Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

DataObjectManager Module /

Discuss the DataObjectManager module, and the related ImageGallery module.

Moderators: martimiz, UncleCheese, Sean, Ed, biapar, Willr, Ingo, swaiba

(SOLVED?)Help with imageDOM and thumbnail quality


Go to End


3 Posts   1174 Views

Avatar
Hello_electro

Community Member, 80 Posts

16 February 2010 at 2:05pm

Edited: 16/02/2010 2:32pm

Not sure what the solution is. But Internet Exploder 7 is resizing my images very poorly. I am not sure the workaround and maybe someone can help me.

I want to find a way to use the .setWidth property, but I have to use $Attachment.url which is prohibiting me form doing so. If I just use $Attachment then it throws an error. I am running a lightbox which is why you see all of the <br /> gobly guck in there as the title gets generated in the output of th lightbox.

I s there something I can do in the code that lets me not have to use width="180" and instead set the .setWidth property instead? I am pretty sure this will resolve the quality issue with IE(I hate you)7. :)

here is the Source Code:

in short is is a list of persons passed away with the born date, deceased date and photo.

<div class="clear">
	<div class="memoriamContainer">
		<% control Memoriams %>
		<div class="memoriamPersonContainer">
		<div class="ImageMemoriamInfo"><a href="$Attachment.url" rel="lightbox[memoriam]" title="$Name &lt;br /&gt; $DOB - $DeceasedDate &lt;br /&gt;  &lt;span &gt; $Description"&lt;span /&gt;><img src="$Attachment.url" width="180px" border="0" ></a></div>
		<div class="memoriamInfoName"><a href="$Attachment.url" rel="lightbox[memoriam1]" title="$Name &lt;br /&gt; $DOB - $DeceasedDate &lt;br /&gt;  &lt;span &gt; $Description"&lt;span /&gt;>$Name</a></div>
		<div class="memoriamInfo">$DOB - $DeceasedDate</div>
		</div>			
				<% end_control %>
[\code]


and here is the memoriam.php file



<?php 
class Memoriam extends DataObject
{
	static $db = array (
		'Name' => 'Text',
		'DOB' => 'Text',
		'DeceasedDate' => 'Text',
		'Description' => 'Text'
	);
	
	static $has_one = array (
		'Attachment' => 'File',
		'MemoriamPage' => 'MemoriamPage'
	);
	
	public function getCMSFields_forPopup()
	{
		return new FieldSet(
			new TextField('Name'),
			new TextField('DOB'),
			new TextField('DeceasedDate'),
			new TextareaField('Description'),
			new FileIFrameField('Attachment')
		);
	}
}
?>

[\code]

and the memoriampage.php file



<?php
class MemoriamPage extends Page
{
	static $has_many = array (
		'Memoriams' => 'Memoriam'
	);
	
	public function getCMSFields()
	{
		$f = parent::getCMSFields();
		$manager = new ImageDataObjectManager(
			$this, // Controller
			'Memoriams', // Source name
			'Memoriam', // Source class
			'Attachment', // File name on DataObject
			array(
				'Name' => 'Name', 
				'Description' => 'Description', 
				'DOB' => 'DOB',
				'DeceasedDate' => 'DeceasedDate',
			), // Headings 
			'getCMSFields_forPopup' // Detail fields (function name or FieldSet object)
			// Filter clause
			// Sort clause
			// Join clause
		);
		
				
		// If undefined, all types are allowed. Pass with or without a leading "."		
		$manager->setAllowedFileTypes(array('jpg','png')); 
		
		// Label for the upload button in the popup
		$manager->setBrowseButtonText("Upload (jpg or png only)"); 
		
		// In grid view, what field will appear underneath the icon. If left out, it defaults to the file title.
		$manager->setGridLabelField('Name'); 
		
		// Plural form of the objects being managed. Used on the "Add" button.
		// If left out, this defaults to [MyObjectName]s
		$manager->setPluralTitle('Memoriams');
		
		$manager->setUploadFolder("Uploads/memoriam/images");
				
		$f->addFieldToTab("Root.Content.Memoriam", $manager);

		return $f;
	}

}

class MemoriamPage_Controller extends Page_Controller{
		
	

	
	public function init() {
		parent::init();

		// Note: you should use SS template require tags inside your templates
		// instead of putting Requirements calls here.  However these are
		// included so that our older themes still work
		Requirements::javascript("mysite/javascript/prototype.js");
		Requirements::javascript("mysite/javascript/scriptaculous.js?load=effects,builder");
		Requirements::javascript("mysite/javascript/lightbox.js"); 
		Requirements::css("themes/blackcandy/css/lightbox.css");
		
	}


}
?>


[\code]

Avatar
Hello_electro

Community Member, 80 Posts

16 February 2010 at 2:32pm

ok, so maybe I just needed to talk this out. I replaced

static $has_one = array (
      'Attachment' => 'File',
      'MemoriamPage' => 'MemoriamPage'
   ); 

with

static $has_one = array (
      'Attachment' => 'Image',
      'MemoriamPage' => 'MemoriamPage'
   ); 

Now I can use $Attachment.setWidth(180) with no problem and it shows fine across browsers. If anyone thinks this is the WRONG way to do this, i would love to be corrected so I can continue to learn!

Avatar
bummzack

Community Member, 904 Posts

16 February 2010 at 9:32pm

No, this is absolutely the right way to do it.
If the Attachment is always going to be an Image, there's no point in using File. Only the Image has a SetWidth method.

Previously you were showing the full uploaded image (which could be several megabytes in size), but only at a width of 180px. Quite a waste of bandwidth ;)