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   3717 Views

Avatar
Todd

31 Posts

23 February 2008 at 9:38am

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

Forum Moderator, 5513 Posts

23 February 2008 at 11:12am

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

31 Posts

23 February 2008 at 12:17pm

Thanks Will,

Worked Great.

Avatar
seagull

Community Member, 17 Posts

1 May 2008 at 9:20pm

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

Forum Moderator, 5513 Posts

1 May 2008 at 9:23pm

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

Avatar
seagull

Community Member, 17 Posts

1 May 2008 at 9:41pm

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

Forum Moderator, 5513 Posts

1 May 2008 at 9:53pm

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

Community Member, 17 Posts

1 May 2008 at 10:06pm

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