Jump to:

7940 Posts in 1543 Topics by 946 members

DataObjectManager Module

SilverStripe Forums » DataObjectManager Module » ImageGallery Thumbnails Custom sizes and proportions

Discuss the DataObjectManager module, and the related ImageGallery module.

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

Page: 1
Go to End
Author Topic: 778 Views
  • marc79
    Community Member
    65 Posts

    ImageGallery Thumbnails Custom sizes and proportions Link to this post


    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'



    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);
          if( $items ) {
             foreach( $items as $item ) {
                   $thumbImg = $item->Image()->CroppedImage($this->ThumbnailWidth,$this->ThumbnailSize);
                   $thumbImg = $item->Image()->SetHeight($this->ThumbnailSize);               
                if($thumbImg) {
                   $item->ThumbnailURL = $thumbImg->URL;
                   $item->ThumbnailWidth = $this->ThumbnailWidth;
                   $item->ThumbnailHeight = $this->ThumbnailSize;
                      $normalImg = $item->Image()->SetWidth($this->NormalSize);
                      $normalImg = $item->Image()->SetHeight($this->NormalSize);
                   $item->ViewLink = $normalImg->URL;
           return $this->UI->updateItems($items);
          return false;


    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.

Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.