Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Three separate Images in the Home Page Banner -Sorry for the Cross Post

Our old forums are still available as a read-only archive.

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

Page: 1 2
Go to End
Author Topic: 3539 Views
  • Todd
    Avatar
    31 Posts

    Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    Hi,

    *Reposting in the correct forum, sorry for the cross post.

    I'm pretty sure this is very simple, I just don't know how to do it.

    I created three tabs in Silverstripe's CMS in order to upload three pictures into my HomePage Banner:

    static $has_one = array(
       'Banner_Image1' => 'Image',
       'Banner_Image2' => 'Image',
       'Banner_Image3' => 'Image'
    );

    function getCMSFields() {
       $fields = parent::getCMSFields();
       $fields->addFieldToTab("Root.Content.MiddleContent", new HtmlEditorField("MiddleContent", "Middle Content"));
       $fields->addFieldToTab("Root.Content.RightContent", new HtmlEditorField("RightContent", "Right Content"));
       $fields->addFieldToTab("Root.Content.Banner_Image1", new ImageField('Banner_Image1'));
       $fields->addFieldToTab("Root.Content.Banner_Image2", new ImageField('Banner_Image2'));
       $fields->addFieldToTab("Root.Content.Banner_Image3", new ImageField('Banner_Image3'));
       return $fields;
    }

    Now, I want to have the pictures show concurrently WITHOUT any spaces.

    I can't do this:

    $Banner_Image1$Banner_Image2$Banner_Image3

    Any Ideas?

    Thanks

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    you cant do $Banner_Image1$Banner_Image2$Banner_Image3 but you could do {$Banner_Image1}{$Banner_Image2}{$Banner_Image3}

    or just
    $Banner_Image1
    $Banner_Image2
    $Banner_Image3

    as I don't think that will add any spaces. If it does a little bit of CSS could fix that.

  • Todd
    Avatar
    31 Posts

    Re: Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    Thanks Will,

    Worked Great.

  • seagull
    Avatar
    Community Member
    17 Posts

    Re: Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    Hi, I'm keen to do something similar to this but I would like each image to also be a hyperlink, so I'd like to do something like this

    <a href="....">$Image1</a>
    <a href="....">$Image2</a>
    <a href="....">$Image3</a>


    I was thinking maybe instead of saving three images to just use a text field, upload images to assets and save the html in the text field. Is this the best approach or could I do better?
    Thanks.

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    Where/what does the link link to? the image or another page.

  • seagull
    Avatar
    Community Member
    17 Posts

    Re: Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    Hi, the images are basically ads so they're external links.

    I was just looking on rumblejungle.co.nz and found this line in the source:
    <div id="pageHeaderLogo" onclick="location.href='http://www.jansen.co.nz' ;" style="cursor:pointer;">

    Is this a method of hardcoding links on images without using a <img> tag, if so, I could also do this....

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    Should be pretty easy to do this. Just follow the code for up the top then add 3 text fields like static $db = array(
    'Banner_Link1' => 'Varchar(150)',
    ...
    );

    then you would need to add the fields to the CMS -
    function getCMSFields() {
    ...
    $fields->addFieldToTab("Root.Content.Banner_Image1", new TextField('Banner_Link1'));
    ..
    }

    Then in the template all you need to do is

    <a href="$Banner_Link1">$Banner_Image1</a>.. etc

  • seagull
    Avatar
    Community Member
    17 Posts

    Re: Three separate Images in the Home Page Banner -Sorry for the Cross Post Link to this post

    okay sweet thanks that makes sense.

    I notice the rumblejungle.co.nz site has only one link (to jansen) despite appearing as 6 images anyway so it doesn't work as expected.

    Just out of interest and for future reference, If I wanted to hard code (in a template) a header image and include a link to /home on that image, would I have to use

    <div id="pageHeaderLogo" onclick="location.href='http..............

    and add background-image to the css for pageHeaderLogo rather than just

    <a href=" "><img src.......

    I'm only just getting into this, maybe I should read a few more tutorials before getting into detail, but it appears to me that you can't hard code images into the template using the <img> tag? is this true??

    Thanks again for your help.....

    3539 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.