Home
 

21

May

11

Adding a Thumbnail to a DataObjectManager or Complex Table Field

This snippet lets you add a thumbnail to items in UncleCheese's Data Object Manager module or a regular Complex Table field. All you need to do is create a function that returns a thumbnail and refer to this function in your DOM or CTF definition.

So add a function like this to your DataObject class:

Notice the use of CMSThumbnail() SilverStripe has already done the hard work of creating the thumbnail so all you need to do is call this function on your image!

Then when you define your DOM or CTF just use the function name as your key for the field you would like to display the thumbnail in

About the Author

Name: Aram Balakjian

Website: http://www.aabweb.co.uk

Aram is a web designer/developer running London based agency aab web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

Comments (10)

  • Unfortunatly this does not work for HasManyDataObjectManager or ManyMany DataObjectManager etc.

    To fix this add a new field to your object named 'Thumbnail', then add a getThumnail function.

    e.g.

    class MyImageObject extends DataObject {
    static $db = array(
    'Thumbnail' => 'Varchar'
    );

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

    function getThumbnail() {
    $Image = $this->Image();
    if ( $Image ) {
    return $Image->CMSThumbnail();
    } else {
    return null;
    }
    }

    }

    Posted by Chris, 14/06/2010 7:40pm (1 month ago)

  • Thanks for a nice tip, Aram :-)

    Found some unwanted behaviour, when I add an image to a ComplexTableField: clicking it will return a 'page not found' in the popup'. In ComplexTableField.js lines 88+ there is a check on the <a> tags of IMG nodes, meant for the show/edit/delete/. Unfortunately it doesn't check on images that have no href... So it creates a popupLink 'undefined?ajax=1'. Quickfix (I'm no JavaScripter):

    ...
    if(Event.element(e).nodeName == "IMG") {
    link = Event.findElement(e,"a");
    if (link.className != undefined) {
    popupLink = link.href+"?ajax=1";
    }
    } //else
    if (!popupLink) {
    el = Event.findElement(e,"tr");
    var link = $$("a",el)[0];
    popupLink = link.href;
    }
    ...

    Posted by Martine, 03/02/2010 6:10am (6 months ago)

  • thank you. exactly what i was looking for :-)

    Posted by roelfsche, 02/02/2010 12:30pm (6 months ago)

  • Hi Biagio

    Image() is a function which returns a DataObject (in this case an Image) that is attached under the has_one relationship 'Image', if your releationship was called 'BannerImage' then the function would be BannerImage()

    Posted by Aram, 29/12/2009 7:05am (7 months ago)

  • \"$Image = $this->Image();\"

    $this->Image()

    Image() is a function or a field name?

    Posted by Biagio Paruolo, 28/12/2009 9:00am (7 months ago)

  • I had trouble getting this to work with a ManyManyDataObjectManager until I set the function's name to match the name of the $db field it was meant to work with.

    The problem with this is that it caused the templates to call the function instead of the object's field.

    Here is the code I used to get around that problem.

    Class Product extends DataObject {
    static $db = array (
    ...
    'description' = 'text',
    ...
    );
    ...
    public function description($display = 'short') {
    if ($display == 'short') {
    $limit = 35;
    $description = trim($this->description);
    if (strlen($description) > $limit) {
    $shortdescription = substr($description, 0, $limit) . '...';
    } else {
    $shortdescription = $description;
    }
    return $shortdescription;
    } elseif ($display == 'full') {
    return $this->description;
    }
    }

    productlist.ss :
    <% control Products %>
    ...
    $description(full)
    ...
    <% end_control %>

    The action triggered by the default parameter needs to return what should show up in the DOM since I don't see a way of calling it with a custom parameter.

    Posted by Joshua, 31/08/2009 10:50am (11 months ago)

  • Good one, but it doesn't seem to work with HasOneDataObjectManager, HasManyDataObjectManager and ManyManyDataObjectManager. Do you know why?

    Posted by theAlien, 13/07/2009 7:47am (1 year ago)

  • GOOD TIP!!!!

    Posted by Biagio Paruolo, 08/07/2009 2:22pm (1 year ago)

  • Thanks for the article! I'm having a slight problem, but I think that's due to my overriding of the default image class. I was also thinking, wouldn't it be more efficient to override the class in that file? Instead of using dataobject manager, use, say, ThumbData, with the class extending the DataObjectManager Class...

    Posted by CodeJoust, 05/07/2009 3:50pm (1 year ago)

  • Thanks. That's exactly what I was looking for.

    Posted by Anatol, 24/06/2009 8:43pm (1 year ago)

RSS feed for comments on this page RSS feed for all comments

Post your comment