Silverstripe Uploadify Add fields

Question

I am looking to attach multiple images to a page in silverstripe (that will act as a rotating gallery eventually) and was wondering if it was possible for a user to add a link for each of these images when uploading each image?

Rogan

Answer 1

Yes. This can be achieved by having a has_many relationship to a custom DataObject which contains an image and a link object in it.

In the following example we have a HomePage that has a has_many relationship to Slide. Slide contains an Image and Link.

There is some good information on this topic in SilverStripe Lesson 9 - Working with data relationships - $has_many.

The optional sorting module I use in this example is the SortableGridField.

SilverStripe 3.1

Slide.php

class Slide extends DataObject {

    private static $db = array(
        'Title' => 'Text',
        'SortOrder' => 'Int'
    );

    private static $has_one = array(
        'HomePage' => 'HomePage', 
        'Image' => 'Image', 
        'Link' => 'SiteTree'
    );

    private static $field_labels = array( 
        'Image.CMSThumbnail' => 'Image', 
        'Link.Title' => 'Link'
    ); 

    private static $summary_fields = array( 
        'Title',
        'Image.CMSThumbnail', 
        'Link.Title'
    ); 

    private static $default_sort = 'SortOrder ASC';
    private static $singular_name = 'Slide';
    private static $plural_name = 'Slides';

    public function getCMSFields() {

        $image = UploadField::create('Image', 'Image');
        $image->setFolderName('slides');

        $fields = FieldList::create(
            TextField::create('Title'), 
            $image, 
            TreeDropdownField::create('LinkID', 'Link', 'SiteTree')
        );
        return $fields;
    }

}

HomePage.php

class HomePage extends Page {

    private static $has_many = array(
        'Slides' => 'Slide'
    );

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

        $slidesFieldConfig = GridFieldConfig_RecordEditor::create();

        // The following requires the SortableGridField module installed
        $slidesFieldConfig->addComponent(new GridFieldSortableRows('SortOrder'));

        $slidesField = GridField::create(
            'Slides',
            'Slide',
            $this->Slides(),
            $slidesFieldConfig
        );

        $fields->addFieldToTab('Root.Slides', $slidesField);

        return $fields;
    }

}

Layout/HomePage.ss

<% if $Slides %>
    <div class="slideshow">
        <% loop $Slides %>
            <% if $Link %>
                <a class="slide" href="$Link.URL" title="Go to the $Link.Title.XML page">
                    <img src="$Image.URL" alt="$Title" />
                </a>
            <% else %>
                <div class="slide">
                    <img src="$Image.URL" alt="$Title" />
                </div>
            <% end_if %>
        <% end_loop %>
    </div>
<% end_if %>

SilverStripe 2.4

Using DataObjectManager and Uploadify modules:

Slide.php

class Slide extends DataObject {

    static $db = array(
        'Title' => 'Text'
    );

    static $has_one = array(
        'HomePage' => 'HomePage', 
        'SlideImage' => 'Image', 
        'Link' => 'SiteTree'
    );
    static $singular_name = 'Slide';
    static $plural_name = 'Slides';

    public function getCMSFields_forPopup()
    {
        return new FieldSet(
            new TextField('Title'),
            new SimpleTreeDropdownField('LinkID', 'Slide Link', 'SiteTree'),
            new ImageUploadField('SlideImage', 'Slide Image')
        );
    }

}

HomePage.php

class HomePage extends Page {

    public static $has_many = array(
        'Slides' => 'Slide'
    );

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

        $slideManager = new ImageDataObjectManager(
            $this,
            'Slides',
            'Slide',
            'Image', 
            array(
            ),
            'getCMSFields_forPopup'
        );
        $fields->addFieldToTab('Root.Content.Slides', $slideManager);

        return $fields;
    }

}

Layout/HomePage.ss

<% if Slides %>
    <div class="slideshow">
        <% control Slides %>
            <% if Link %>
                <a class="slide" href="$Link.URL" title="Go to the $Link.Title.XML page">
                    <img src="$Image.URL" alt="$Title" />
                </a>
            <% else %>
                <div class="slide">
                    <img src="$Image.URL" alt="$Title" />
                </div>
            <% end_if %>
        <% end_control %>
    </div>
<% end_if %>

Bucky

Wow! Thanks for this amazing answer. Wish I could accept it 100 times over. Thanks! – Rogan

Perfect answer and excellent to put both SS 2.x and SS 3.x examples in the answer. Thanks! – Poynter

@pinkp - I'll try to update this answer with an SS 4 answer when I get some time. – Bucky