How to make a Photo Gallery in Silverstripe 3.0.2

This tutorial will show how to create a sortable (orderable) image gallery which allows for quick and easy multiple uploads 

This tutorail will go through setting a PhotoGallery page, 'has_many' Photos. We'll use the grid field componant to manage the photos within the admin area, and we'll add an extra module to let us upload many images at once - saving a lot of time.

Add the Plug In Modules

Before we start, let's install the extra module that lets you upload multiple images all at once. 

Bulk upload module

  1. Go to https://github.com/colymba/GridFieldBulkEditingTools
  2. Click on the 'Zip' button (about 6cm down from the top, right of the 'Clone in windows' button)
  3. Open the zip file and copy the folder to your website
  4. Rename the folder to 'GridFieldBulkEditingTools'
  5. Upload (if you haven't already)

Sortable grid field module

  1. Go to https://github.com/UndefinedOffset/SortableGridField
  2. Click on the 'Zip' button (about 6cm down from the top, right of the 'Clone in windows' button)
  3. Open the zip file and copy the folder to your website
  4. Rename the folder to 'SortableGridField'
  5. Upload (if you haven't already)

Create the Gallery Page

Create GalleryPage.php

<?php


class GalleryPage extends Page {
	
   public static $has_many = array(
    	'GalleryImages' => 'GalleryImage'
   );
  
   public function getCMSFields() {
	   
   	$fields = parent::getCMSFields();
		
	$gridFieldConfig = GridFieldConfig_RecordEditor::create(); 
	$gridFieldConfig->addComponent(new GridFieldBulkEditingTools());
	$gridFieldConfig->addComponent(new GridFieldBulkImageUpload());   
	$gridFieldConfig->addComponent(new GridFieldSortableRows('SortOrder'));    
	
	$gridfield = new GridField("GalleryImages", "Gallery Images", $this->GalleryImages()->sort("SortOrder"), $gridFieldConfig);
				
	$fields->addFieldToTab('Root.GalleryImages', $gridfield);
		
	return $fields;		
  }
}

class GalleryPage_Controller extends Page_Controller {
	
	public static $allowed_actions = array (
	);

	public function getGalleryImages() {
		return $this->GalleryImages()->sort("SortOrder");
	}
	public function init() {
		parent::init();
	}

}

This creates a new page type called 'GalleryPage'.

First, we tell the page that it has_many 'GalleryImages' - eg, any number (many) of photos can belong to this one page.

Next we use getCMSFeild to add a datagrid to the CMS. This datagrid will be the table that lists all our images, and includes the controls to add new images, remove images, edit images, or upload a whole load in one go.

Create the Photo Object

Create GalleryImage.php

This is the object that contains data about each photo. 

<?php

class GalleryImage extends DataObject {
  
  public static $db = array(	
	  'SortOrder' => 'Int',
	  'Title' => 'Varchar'
  );
 
  // One-to-one relationship with gallery page
  public static $has_one = array(
    'Image' => 'Image',
    'GalleryPage' => 'GalleryPage'	
  );
 
 // tidy up the CMS by not showing these fields
  public function getCMSFields() {
 		$fields = parent::getCMSFields();
		$fields->removeFieldFromTab("Root.Main","GalleryPageID");
		$fields->removeFieldFromTab("Root.Main","SortOrder");
		return $fields;		
  }
  
  // Tell the datagrid what fields to show in the table
   public static $summary_fields = array( 
       'ID' => 'ID',
	   'Title' => 'Title',
	   'Thumbnail' => 'Thumbnail'     
   );
  
  // this function creates the thumnail for the summary fields to use
   public function getThumbnail() { 
     return $this->Image()->CMSThumbnail();
  }
 
}
  • At the top of this code we tell Silverstripe to record a 'Title' for each photo (logical enoguh) plus we also give the photo a 'SortOrder' integer - this is so we can rearrange the order of the photos easily.
  • The next page - has_one - tells Silvestripe that each photo 'has one' gallery page, and also 'has one' photo - this connects the database entry to the uploaded image file stored in the Assets folder.
  • We could leave it at that - but we'll use getCMSFields to remove a couple of fields from the admin area - they just confuse people otherwise!
  • The next section - summary_fields allows us to define what is shown in the grid field in the CMS.
  • And finally this bit of code works with the summary_fields function to display a nice thumbnail within the CMS


At this stage, upload the files, run a 'dev/build' and create a new 'GalleryPage' in your CMS. You should be able to see a datagrid and start adding photos.

Adding Images

Adding a Single Gallery Image:

  • Click 'Add Gallery Image' at the top left of the tab (within the Gallery Images tab)
  • Give the Item a title
  • Press 'Create'
  • Attach an image

As you can see, this can take a while, especially when you have a few photos to upload. This is why we added the bulk upload feature

Adding multiple Images:

  • Click 'Bulk upload' at te bottom right of the page (within the Gallery Images tab)
  • Click 'Choose files to upload'
  • Select as many files as you like from the explorer window
  • Wait until all the images are uploaded
  • You can then run down the list adding a title to each image
  • Press 'Save all and finish'

 

Creating the Template

Create a file called 'GalleryPage.ss' in your themes Layout folder

The exmaple is below is very simple, but it's a good place to start...

<% control getGalleryImages %>          

    <h3>$Title</h3>
    $Image.SetWidth(100)
           
<% end_control %>