Jump to:

5540 Posts in 1738 Topics by 1224 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Adding multiple images to a page type

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

Page: 1 2
Go to End
Author Topic: 6899 Views
  • theGermaniac
    Avatar
    Community Member
    82 Posts

    Adding multiple images to a page type Link to this post

    Hi,

    I'm trying to add a news section where each article can have multiple images. Therefore I want to have a tab "Photos" where the editor can upload images through the backend (like ImageField), as many as he wants. There is no need to also be able to browse the existing files.

    Can anyone give me a hint, how to start? Big thanks in advance!

    Cheers, Mario

  • zenmonkey
    Avatar
    Community Member
    528 Posts

    Re: Adding multiple images to a page type Link to this post

    Unfortunately the Image Upload in the HTML editor field has been removed so the user would have to upload images from the Files and Images interface and place it into the Content field with add image function and select from dropdown.

    If the Image position is determined by the template and the Content field you could always add an ImageDataObjectManger from DataObjectManager Module.

  • Jatinder
    Avatar
    Community Member
    23 Posts

    Re: Adding multiple images to a page type Link to this post

    Take a look at http://www.silverstripe.org/archive/show/7715

    This should all the info you need to attach multiple images to page type.

  • Ben_W
    Avatar
    Community Member
    80 Posts

    Re: Adding multiple images to a page type Link to this post

    in your page type class add in following

    static $has_many = array (
          'GalleryImages' => 'GalleryImage'
       );

    function getCMSFields() {
          $fields = parent::getCMSFields();
    ...

    $manager = new ImageDataObjectManager(
             $this, // Controller
             'GalleryImages', // Source name
             'GalleryImage', // Source class
             'MyGalleryImage', // File name on DataObject
             array(
                'GalleryImageTitle' => 'GalleryImageTitle'
             ), // Headings
             'getCMSFields_forPopup' // Detail fields (function name or FieldSet object)
             // Filter clause
             // Sort clause
             // Join clause
          );
          $fields->addFieldToTab('Root.Content.GalleryImage',$manager);

    ...

          return $fields;
    }

    add the following dataobject in a separate file

    class GalleryImage extends DataObject
    {
       static $db = array (
          'GalleryImageTitle' => 'Text'
       );
       static $has_one = array (
          'MyGalleryImage' => 'Image', //relation needed for this DataObject
          'BelongToEventPage' => 'EventPage' //relation needed to point back to your pagetype, my pagetype is EventPage.
       );
       
       public function getCMSFields_forPopup()
       {
          return new FieldSet(
             new TextField('GalleryImageTitle'),
             new FileIFrameField('MyGalleryImage')
          );
       }
       
       
    }

    You would also need the add in following two module 'DataObjectManager', 'SWFUpload', remember to do a /dev/build?flush=1 after you upload this two module onto your server.

    then in your template do following
    <% if GalleryImages %>
    <% control GalleryImages %>
    <img src="$MyGalleryImage.URL" width="90" />
    <% end_control %>
    <% end_if %>

  • theGermaniac
    Avatar
    Community Member
    82 Posts

    Re: Adding multiple images to a page type Link to this post

    I like that one! Thank you for that!

  • jovoo
    Avatar
    Community Member
    12 Posts

    Re: Adding multiple images to a page type Link to this post

    And I like it, too. Exactly what I needed!
    Thank u, Ben_W!

  • BigChris
    Avatar
    Community Member
    63 Posts

    Re: Adding multiple images to a page type Link to this post

    Thank you Ben_W.

    Excellent stuff. Can I ask though how you would add Thumbnails?

    I am not sure how to add it, but managed to get the template to render it on the front end by using

    $MyGalleryImage.CMSThumbnail

    This creates/displays a thumbnail but is cannot be resized, as I would like to have a thumbnail at 70 by 70.

    Does anyone know how to add it to the Class or a template call I can use?
    (I tried various other GD function but I dont know enough to get it to work.)

    Also if you want to be able to re-order the Gallery you can add
    SortableDataObject::add_sortable_class('GalleryImage');
    to the mysite/_config.php

    Cheers
    Chris

  • Ben_W
    Avatar
    Community Member
    80 Posts

    Re: Adding multiple images to a page type Link to this post

    Have a look at this page: http://doc.silverstripe.org/doku.php?id=image
    The easiest way in your case would be use $MyGalleryImage.SetSize(70,70)
    Please note this will add necessary white padding, ie if after resize the viewable image is 70x60, the it will add 5px white padding on both end vertically, so that your final image will be 70x70.

    If you need to customise image, then have a look at the following pages:
    http://doc.silverstripe.org/doku.php?id=recipes:customising_image&s=custom%20image
    http://doc.silverstripe.org/doku.php?id=recipes:gallery&s=custom%20image

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