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

ImageGallery Thumbnails Custom sizes and proportions


Go to End


1240 Views

Avatar
marc79

Community Member, 65 Posts

7 July 2011 at 6:48pm

Hello,

I was looking for some further flexibility with the thumbnails for the ImageGallery as I wanted to be able to crop them to a consistant height and width but not as squares.

By making a few minor additions/amends to the ImageGalleryPage.php file in the image_gallery > code folder I was able to allow the width of the thumbnails to be set to any width.

class ImageGalleryPage extends Page
{
	static $db = array (
		'SortBy' => "Enum( array( 'Title', 'UploadDateASC', 'UploadDateDESC','SortASC' ), 'SortASC' )",
		'GalleryUI' => "Varchar(50)",
		'CoverImageWidth' => 'Int',
		'CoverImageHeight' => 'Int',
		'ThumbnailSize' => 'Int',
		'ThumbnailWidth' => 'Int',  // New field for entering a ThumbnailWidth
		'MediumSize' => 'Int',
		'Square' => 'Boolean',
		'NormalSize' => 'Int',
		'NormalHeight' => 'Int',
		'MediaPerPage' => 'Int',
		'UploadLimit' => 'Int'
	);
	
	static $has_one = array (
		'RootFolder' => 'Folder'
	);
	
	static $defaults = array (
		'CoverImageWidth' => '128',
		'CoverImageHeight' => '128',
		'ThumbnailSize' => '128',
		'ThumbnailWidth' => '172',  // A default size
		'Square' => '1',
		'MediumSize' => '400',
		'NormalSize' => '600',
		'MediaPerPage' => '30',
		'MediaPerLine' => '6',
		'UploadLimit' => '20',
		'GalleryUI' => 'Lightbox'
	);

....

[/code}

This then needs adding to the configuration tab in admin which is don by adding in this line of code under the ThumbnailSize field

....

		$f->addFieldToTab("Root.Content.$configuration", new NumericField('ThumbnailWidth',_t('ImageGalleryPage.THUMBNAILWIDTH','Thumbnail width (pixels)')));

....

You may also want to change the label of the the check box in the line below as, after we have made the changes below, this will allow you to select whether or not you want your images cropped.

Below I have made the width of the cropped image ThumbnailWidth instead of ThumbnailSize:

public function GalleryItems($limit = null, $items = null) {
		
		if($items === null) 
			$items = $this->Items($limit);
	  $this->includeUI();
		if( $items ) {
			foreach( $items as $item ) {
				if($this->Square)
					$thumbImg = $item->Image()->CroppedImage($this->ThumbnailWidth,$this->ThumbnailSize); 
				else
					$thumbImg = $item->Image()->SetHeight($this->ThumbnailSize);					
				if($thumbImg) {
					$item->ThumbnailURL = $thumbImg->URL;
					$item->ThumbnailWidth = $this->ThumbnailWidth;
					$item->ThumbnailHeight = $this->ThumbnailSize;
					
					if($item->Image()->Landscape())
						$normalImg = $item->Image()->SetWidth($this->NormalSize);
					else
						$normalImg = $item->Image()->SetHeight($this->NormalSize);
	
					$item->ViewLink = $normalImg->URL;
					$item->setUI($this->UI);
				}
			}
	  	return $this->UI->updateItems($items);
		}
		return false;
	}

dev/build.

Then back in admin you now have a new field in the configuration tab called Thumbnail width which will allow you to set the width you'd like your thumbnails. The check box below, previously Crop thumbnails to square, needs to be checked for this to work other wise it will work as before and only adjust the height.

I am not sure if this is the best way to achieve this but it seems to work.

I hope this helps if you are trying to achieve the same thing.