SilverStripe 3.1 Gallery Using Gridfield

In this post I will tell you how to make a working gridfield gallery for Silverstripe CMS 3.1.

Modules needed: SortableGridField

  1. Create Page called Gallery.php inside folder mysite/code/:
    <?php
    class Gallery extends Page {
    
       public static $has_many = array(
        	'GalleryImages' => 'GalleryImage'
       );
    
       public function getCMSFields() {
    
       	$fields = parent::getCMSFields();  
    	$gridFieldConfig = GridFieldConfig_RecordEditor::create();  
    	$gridFieldConfig->addComponent(new GridFieldSortableRows('SortOrder'));
    	$gridfield = new GridField("GalleryImages", "Gallery Images", $this->GalleryImages()->sort("SortOrder"), $gridFieldConfig);
    	$fields->removeByName("Content");
    	$fields->addFieldToTab('Root.Content.Main', $gridfield);	
    	return $fields;		
      }
    }
    
    class Gallery_Controller extends Page_Controller {
    
    	public static $allowed_actions = array (
    	);
    	public function Photos() {
    		return $this->GalleryImages()->sort("SortOrder");
    	}
    	public function init() {
    		parent::init();
    	}
    }
  2. Also add file named GalleryImage.php to mysite/code/ folder:
    <?php
    class GalleryImage extends DataObject {
      public static $db = array(	
    	  'SortOrder' => 'Int',
    	  'Title' => 'Varchar'
      );
      public static $has_one = array(
        'Image' => 'Image',
        'Gallery' => 'Gallery'	
      );
      public function getCMSFields() {
     	$fields = parent::getCMSFields();
    	$fields->removeFieldFromTab("Root.Main","GalleryPageID");
    	$fields->removeFieldFromTab("Root.Main","SortOrder");
    	return $fields;		
      }
       public static $summary_fields = array( 
    	'ID' => 'ID',
    	'Title' => 'Title',
    	'Thumbnail' => 'Thumbnail'     
       );
       public function getThumbnail() { 
         return $this->Image()->CMSThumbnail();
      }
    
    }
  3. In themes/yourtheme/templates/Layout/ folder make file named Gallery.ss with code:
    <% control Photos %>
    <% control Image %>
    // In here you can add any stuff like rel="" for ajax 
    <a href="$SetHeight(200).URL">$SetWidth(500)</a>
    <% end_control %>
    <% end_control %>
  4. Rebuild database using www.yoursitename.com/dev/build?flush=all
  5. also log out from admin and login again and then start making your gallerypage by adding Gallery

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting !

Tags: , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

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


4 − 2 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>