Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive

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

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

Three separate Images in the Home Page Banner -Sorry for the Cross Post


Go to End
Reply

12 Posts   3666 Views

Avatar
Todd

23 February 2008 at 9:38am 31 Posts

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

Avatar
Willr

23 February 2008 at 11:12am Forum Moderator, 5511 Posts

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.

Avatar
Todd

23 February 2008 at 12:17pm 31 Posts

Thanks Will,

Worked Great.

Avatar
seagull

1 May 2008 at 9:20pm Community Member, 17 Posts

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.

Avatar
Willr

1 May 2008 at 9:23pm Forum Moderator, 5511 Posts

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

Avatar
seagull

1 May 2008 at 9:41pm Community Member, 17 Posts

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

Avatar
Willr

1 May 2008 at 9:53pm Forum Moderator, 5511 Posts

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

Avatar
seagull

1 May 2008 at 10:06pm Community Member, 17 Posts

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

Go to Top