Thumbnails in Silverstripe 3 GridField Summaries

Often, you will use Silverstripe 3 GridFields to handle images and will want to show image thumbnails in the summary view rather than have to give every image a title that you can later refer to when you need to edit the image. I have managed to achieve this fairly simply using the below code snippet which will give you something looking like this:

Silverstripe 3 GridField summary with Thumbnails

The important parts of the snippet are the ‘Thumbnail’ item in the the summary_fields static and the getThumbnail function:

<?php
class HeroImage extends DataObject{
	public static $db = array(
		'Title' => 'Varchar(255)',
  		'SortOrder' => 'Int'
 	);
 
 	static $has_one = array( 
		'HomePage' => 'HomePage',
		'HeroImage' => 'Image'
	);
 
 	public static $summary_fields = array(
  		'Thumbnail'=>'Thumbnail',
  		'Title' => 'Title'
 	);
 
 	public function getThumbnail() { 
		if ($Image = $this->HeroImage()->ID) { 
			return $this->HeroImage()->SetWidth(80); 
		} else { 
			return '(No Image)'; 
		} 
	}
 
 	public static $default_sort='SortOrder';
 
 	public function getCMSFields() {
	  	return new FieldList(
	   		new TextField('Title', 'Title'),
	   		new UploadField('HeroImage', 'Image')
	  	);
	}
}

A fairly short post but if you have any questions about anything on here, post them in the comments below or you can contact me and I will get back to you with an answer.

Did you like this post? Why not subscribe?

3 thoughts on “Thumbnails in Silverstripe 3 GridField Summaries

  1. Wish i would have found this post 1 hour sooner.
    Could not figure out how to define what fields should be editable in a GridField edit view – i was using getCMSFields_forPopup when i should have been using getCMSFields.

    Thanks for sharing this info!

  2. I don’t understand why this works, there is a getThumbnail function but it doesn’t look as if it is called, so what makes the thumbnail appear on the GrdField?

Leave a Reply

Your email address will not be published. Required fields are marked *