Jump to:

22979 Posts in 11815 Topics by 2826 members

General Questions

SilverStripe Forums » General Questions » [Solved] Image Thumbnails in Gridfield

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1 2 3
Go to End
Author Topic: 5182 Views
  • tmkp
    Avatar
    Community Member
    40 Posts

    [Solved] Image Thumbnails in Gridfield Link to this post

    Hi everybody,
    currently playing around with the gridfield on 3.0.0rc2 on a local xampp, but I can't figure out how to get image thumbnails to show up in the list view.

    The custom getter method that used to work for DOM gives me a "Image_Cached" instead of an actual image, and the other solutions i found around the web will print out an image tag with "<" and ">" translated to html entities "&lt;" and "&gt;"

    Thumbnail generation and image resizing is working fine otherwise.

    Anybody else have problems with this?

    Here's the code, based on this example

    <?php

    class Contact extends DataObject {

    // Contact object's fields
    public static $db = array(
    'Name' => 'Varchar(255)',
    'Description' => 'Text',
    'Website' => 'Varchar(255)'
    );

    // One-to-one relationship with profile picture and contact list page
    public static $has_one = array(
    'ProfilePicture' => 'Image',
    'ContactListPage' => 'ContactListPage'
    );

    // Summary fields
    public static $summary_fields = array(
       'Thumbnail' => 'DOMThumbnail',
    'Name' => 'Name',
    'Description' => 'Description',
    'Website' => 'Website URL'
    );

    public function getCMSFields_forPopup() {

    // Profile picture field
    $thumbField = new UploadField('ProfilePicture', 'Profile picture');
    $thumbField->allowedExtensions = array('jpg', 'png', 'gif');

    // Name, Description and Website fields
    return new FieldList(
    new TextField('Name', 'Name'),
    new TextareaField('Description', 'Contact description'),
    new TextField('Website', 'Website URL (including http://)'),
    $thumbField
    );
    }

    public function getThumbnail() {
    if ($Image = $this->ProfilePicture()->ID) {
    return $this->ProfilePicture()->SetWidth(80)->Tag;
    } else {
    return '(No Image)';
    }
    }

    }

    <?php

    class ContactListPage extends Page {

    // One to many relationship with Contact object
    public static $has_many = array(
    'Contacts' => 'Contact'
    );

    // Create Grid Field
    public function getCMSFields() {
    $fields = parent::getCMSFields();

    $gridFieldConfig = GridFieldConfig::create()->addComponents(
    new GridFieldToolbarHeader(),
    new GridFieldAddNewButton('toolbar-header-right'),
    new GridFieldSortableHeader(),
    new GridFieldDataColumns(),
    new GridFieldPaginator(10),
    new GridFieldEditButton(),
    new GridFieldDeleteAction(),
    new GridFieldDetailForm()
    );

    $gridField = new GridField("Contacts", "Contact list:", $this->Contacts(), $gridFieldConfig);
    $fields->addFieldToTab("Root.Contacts", $gridField);

    return $fields;
    }
    }

    class ContactListPage_Controller extends Page_Controller {

    public static $allowed_actions = array (
    );

    public function init() {
    parent::init();
    }
    }

    Thanks in advance!
    Andi

  • Fuzz10
    Avatar
    Community Member
    786 Posts

    Re: [Solved] Image Thumbnails in Gridfield Link to this post

    Yeah, I also noticed custom getters in $summary_fields do not seem to work anymore in SS3. Subscribing.

  • martimiz
    Avatar
    Forum Moderator
    1037 Posts

    Re: [Solved] Image Thumbnails in Gridfield Link to this post

    Experimenting wth ModelAdmin - the custom getter is called, but the gridfield seems to want to treat the return value as string(???). And if you return the tag, as in something I tried here:

    return $this->WhiskyImage()->getFormattedImage('SetSize', 50, 50)->forTemplate();

    It displays the litteral image tag using "&lt;" and "&gt;" as you mention. Subscribing as well

  • jak
    Avatar
    Community Member
    46 Posts

    Re: [Solved] Image Thumbnails in Gridfield Link to this post

    EDIT 20120729: This bug will be fixed in 3.0.1. This workaround is only needed if you are running 3.0.0.

    One way to get around the escaping that GridField does by default, is to use setFieldFormatting. I had a slightly different problem, adapting my solution to your example should look something like:

    $gridField = new GridField(...)
    $gridField->getConfig()->getComponentByType('GridFieldDataColumns')->setFieldFormatting(array(
       'DOMThumbnail' => function($val, $obj) { //if this does not work try Thumbnail instead
          if($obj instanceof Contact){
             return $obj->getThumbnail();
          } else {
             return $obj;
          }
       },
    ));

    I am not sure if this is the most elegant solution (it is probably possible to do this without the inline function) but it should work.

    BTW: You can also just use the builtin CMSThumbnail():

    return $obj->ProfilePicture()->CMSThumbnail();


    Edit 20120729: I removed a call to Tag() since this might break in 3.0.1

  • tmkp
    Avatar
    Community Member
    40 Posts

    Re: [Solved] Image Thumbnails in Gridfield Link to this post

    That seems to do the trick, although it's kind of a long way to go for a thumbnail : )

    Working example below, I also implemented UndefinedOffset's Sortable Gridfield Module for giggles.

    Thanks for the help!

    <?php

    class Contact extends DataObject {

       // Contact object's fields
       public static $db = array(
          'Name' => 'Varchar(255)',
          'Description' => 'Text',
          'Website' => 'Varchar(255)',
          'SortID' => 'Int'
       );

       // One-to-one relationship with profile picture and contact list page
       public static $has_one = array(
          'ProfilePicture' => 'Image',
          'ContactListPage' => 'ContactListPage'
       );

       // Summary fields
       public static $summary_fields = array(
          'Thumbnail' => 'Thumbnail',
          'Name' => 'Name',
          'Description' => 'Description',
          'Website' => 'Website URL'
       );

       public function getCMSFields_forPopup() {

          // Profile picture field
          $thumbField = new UploadField('ProfilePicture', 'Profile picture');
          $thumbField->allowedExtensions = array('jpg', 'png', 'gif');

          // Name, Description and Website fields
          return new FieldList(
             new TextField('Name', 'Name'),
             new TextareaField('Description', 'Contact description'),
             new TextField('Website', 'Website URL (including http://)'),
             $thumbField
          );
       }

       public function getThumbnail() {
          if ($Image = $this->ProfilePicture()->ID) {
             return $this->ProfilePicture()->SetWidth(80)->Tag;
          } else {
             return '(No Image)';
          }
       }

    }

    <?php

    class ContactListPage extends Page {

       // One to many relationship with Contact object
       public static $has_many = array(
          'Contacts' => 'Contact'
       );

       // Create Grid Field
       public function getCMSFields() {

          $fields = parent::getCMSFields();

          $gridFieldConfig = GridFieldConfig::create()->addComponents(
             new GridFieldToolbarHeader(),
             new GridFieldAddNewButton('toolbar-header-right'),
             //new GridFieldSortableHeader(),
             new GridFieldDataColumns(),
             //new GridFieldPaginator(10),
             new GridFieldEditButton(),
             new GridFieldDeleteAction(),
             new GridFieldDetailForm(),
             new GridFieldSortableRows('SortID')
          );

          $gridField = new GridField("Contacts", "Contact list:", $this->Contacts(), $gridFieldConfig);

          $gridField->getConfig()->getComponentByType('GridFieldDataColumns')->setFieldFormatting(array(
             'Thumbnail' => function($val, $obj) {
                if($obj instanceof Contact){
                   return $obj->getThumbnail();
                } else {
                   return $obj;
                }
             },
          ));

          $fields->addFieldToTab("Root.Contacts", $gridField);

          return $fields;
       }
    }

    class ContactListPage_Controller extends Page_Controller {

       public static $allowed_actions = array (
       );

       public function init() {
          parent::init();
       }
    }

  • martimiz
    Avatar
    Forum Moderator
    1037 Posts

    Re: [Solved] Image Thumbnails in Gridfield Link to this post

    I think I just stumbled on what might be the right wy to do this, and it works in ModelAdmin:

    class MyObject extends DataObject {

       static $has_one = array(
          'MyImage' => 'Image'
       );

       static $summary_fields = array(
          'MyImage.StripThumbnail' => '',
          'Name' => 'Name'
       );
    }

    Or, if you want a custom imagesize:

    class MyObject extends DataObject {

       static $has_one = array(
          'MyImage' => 'CustomImage'
       );

       static $summary_fields = array(
          'MyImage.CustomThumbnail' => '',
          'Name' => 'Name'
       );
    }

    class CustomImage extends Image {
       public function generateCustomThumbnail(GD $gd) {
          return $gd->croppedResize(50, 50);
       }
    }

    Only thing is - for me this works on MAMP, but not on my DEBIAN/PHP5.3/Lighttpd install, where I just get an empty cell - this happens in the Files section as well, so the solution should be right, and my Lighttpd setup cause problems... aaargh)

  • tmkp
    Avatar
    Community Member
    40 Posts

    Re: [Solved] Image Thumbnails in Gridfield Link to this post

    Hi martimiz,
    i remember trying this approach on a xampp a couple days ago, but empty cells for me as well.
    It is the way it's supposed to work though, i guess.

  • Fuzz10
    Avatar
    Community Member
    786 Posts

    Re: [Solved] Image Thumbnails in Gridfield Link to this post

    Can someone change the thread's title again ? This is not solved yet. ;-)

    5182 Views
Page: 1 2 3
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.