Jump to:

3372 Posts in 998 Topics by 712 members

Data Model Questions

SilverStripe Forums » Data Model Questions » Image and Link field grouped together

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

Page: 1
Go to End
Author Topic: 3149 Views
  • Aaron Brockhurst
    Avatar
    Community Member
    30 Posts

    Image and Link field grouped together Link to this post

    Hi

    I want the users to be able to upload / select an image and then select a page in silverstripe in the same block on the same tab. eg:

    image
    imagelink

    Is this possible?

    Also, is it possible for this to be a repeating block so that they can select more than one image and link combination?

    Thanks in advance

    Aaron

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Image and Link field grouped together Link to this post

    Hi Aaron, this is very simple

    Add these to your page model:

    static $has_one = array(
    'Image' => 'Image',
    'LinkedPage' => 'SiteTree'
    )

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

    $fields->addFiledToTab('Root.Content.Main' new ImageField('Image1'));
    $fields->addFiledToTab('Root.Content.Main' new TreeDropdownField('LinkedPage', 'Page to link to', 'SiteTree'));

    return $fields;

    }

    Then in your template you can simply do:

    <a href="$LinkedPage.Link"><img src="$Image.URL" /></a>

    Hope that helps!

  • Aaron Brockhurst
    Avatar
    Community Member
    30 Posts

    Re: Image and Link field grouped together Link to this post

    Hi Aram

    Thanks for this, it's a great help.

    What I was hoping to be able to do was put them in there own box in the UI so the user can see that they are related, if that makes sense?

    Aaron

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Image and Link field grouped together Link to this post

    ahh sorry I think I was a little too quick to reply there!

    I think what you want is a fieldGroup which you can use like this:

    $fields->addFieldToTab("Root.Content.Main", new FieldGroup(
                                           new TreeDropdownField("LinkPage", "Page to link to", "SiteTree"),
                                           new ImageField("Image")
                                        ));

    The default styling is not particularly pretty but it does the job.....you can always add/edit the CSS in cms/css

  • Aaron Brockhurst
    Avatar
    Community Member
    30 Posts

    Re: Image and Link field grouped together Link to this post

    No worries, thanks for this.

    I've got two of these on the page. When I put the following in I get an error on save:

    $fields->addFieldToTab("Root.Content.Images", new FieldGroup(
    new TreeDropdownField("ContentTopImageLinkID", "<b>Top Image Block</b><br />Select the page to link to and then choose the image to display", "SiteTree"),
                                new ImageField('ContentTopImage','')
    ));
          
          $fields->addFieldToTab("Root.Content.Images", new FieldGroup(
    new TreeDropdownField("ContentBottomImageLinkID", "<strong>Top Image Block</strong><br />Select the page to link to and then choose the image to display", "SiteTree"),
                                new ImageField('ContentBottomImage','')
    ));

    When I remove one of them it doesn't save the page id in the sitetree

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Image and Link field grouped together Link to this post

    hmm, just tried your code and it works fine for me. here is what I have:

    public static $has_one = array(
           'ContentBottomImage' => 'Image',
          'ContentTopImage' => 'Image',
          'ContentTopImageLink' => 'SiteTree',
          'ContentBottomImageLink' => 'SiteTree'
       );
       
       
       public function getCMSFields()
       {
       $fields = parent::getCMSFields();   
       
       $fields->addFieldToTab("Root.Content.Images", new FieldGroup(
       new TreeDropdownField("ContentTopImageLinkID", "<b>Top Image Block</b><br />Select the page to link to and then choose the image to display", "SiteTree"),
        new ImageField('ContentTopImage','')
       ));
       
       
       $fields->addFieldToTab("Root.Content.Images", new FieldGroup(
       new TreeDropdownField("ContentBottomImageLinkID", "<strong>Top Image Block</strong><br />Select the page to link to and then choose the image to display", "SiteTree"),
        new ImageField('ContentBottomImage','')
       ));
          return $fields;
       }   

  • Aaron Brockhurst
    Avatar
    Community Member
    30 Posts

    Re: Image and Link field grouped together Link to this post

    How very odd, plugged the code back in and it works fine. hmmmmmm!

    Thanks

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