Categories
CMS Php SilverStripe

Silverstripe 3.0 Grid Fields with Thumbnails

Silverstripe 3 has been out for a few months now, and most the big bugs have been fixed… This tutorial describes the code required to set up a grid field to manage ‘Has Many’ relations. Eg – a staff page that lists many staff members.

Also, we’ll add in some code that will make the table list in the CMS display a wee thumbnail of each staff member – making it much easier for CMS users to manage the content.

Create the Staff Page

Create StaffPage.php

This is the page on your site that contains all the staff page. Eg, one ‘staff page’ -> ‘has many’ -> ‘staff members’

Create the Staff Member Object

Create StaffMember.php

This is the object that contains data about each staff member. They belong to a Staff Page

In the code above, we simple create a DataObject, and define two feilds, a name, and a details.

We also attach the DataObject to an image object (allowing us to add an image) and to a page – this forms the connection with the Staff page it belongs to

At this stage, upload the files, run a dev/build and create a ‘staffPage’ in your CMS. You should be able to see a datagrid and start adding staff members and photos.

Displaying Thumbnails in your Grid Field in the CMS

However, the grid field will probably just list your items by their ID – which is a bit meaningless.

By adding the code above into the StaffMember.php file,  we can define the fields (summary_fields) that are shown on the summary table in the CMS.

The function getThumbnail takes the attached Image, and creates a thumbnail to use in the summary fields.

Categories
CMS Php SilverStripe

Silverstripe 3 Grid Field Config Options

The grid field system in Silverstripe 3 has a number of preset config options – here’s what they do, and what they look like:

No Config

If we don’t add any config options, the grid field just displays a list of items…  We can’t view the record details, or edit anything though…

grid1

$gridfield = new GridField(“RegisterEvents”, “RegisterEvent”, $this->RegisterEvents());
$fields->addFieldToTab(‘Root.Events’, $gridfield);

GridFieldConfig_RecordViewer

 

This option just adds in the ability to click the magnifying glass and view the details of each item – but not edit anything.

grid2

GridFieldConfig_RecordEditor

 

Now we’re starting to get something useful – a list that lets us Add, View, and Remove records…

grid3

GridFieldConfig_RelationEditor

The final option is the Relation Edition set up. This adds features to work with ‘has-many’ and ‘many-many’ relationships.

See our article about Many_Many relations for more details

Custom Config

Or, you can just create an empty configuration, and add the bits you need….