17488 Posts in 4473 Topics by 1978 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1926 Views |
-
Giving a SS Image a specific CSS class
8 June 2008 at 2:04pm
Hi
I have a page type called 'Tour' with up to 10 Images attached to it:class Tour extends Page {
static $db = array(
'TourTeaser' => 'Text'
);
static $defaults = array(
'SlideImgWidth' => 200
);static $has_one = array(
'MyTourRegion' => 'TourRegion',
'MainImage' => 'Image',
'Photo1' => 'Image',
'Photo2' => 'Image',
'Photo3' => 'Image',
'Photo4' => 'Image',
'Photo5' => 'Image',
'Photo6' => 'Image',
'Photo7' => 'Image',
'Photo8' => 'Image',
'Photo9' => 'Image',
'Photo10' => 'Image'
);....
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo1') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo2') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo3') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo4') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo5') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo6') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo7') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo8') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo9') );
$fields->addFieldToTab( 'Root.Content.Images', new ImageField('Photo10') );What I am trying to do is to pull those images out when the page is viewed like $Photo1.SetWidth(150), $Photo2.SetWidth(150) etc. Got this part fine.
But in my Tour.ss template, I am trying to add these images to a JS/CSS slideshow. For this, each image requires to be of a specific css class of 'full'.
Is there any way of doing this with Silverstripe? E.g. Image1.SetCSSClass('full'). Can't find any doco on this.Cheers
Aaron -
Re: Giving a SS Image a specific CSS class
8 June 2008 at 2:20pm Last edited: 8 June 2008 2:21pm
Found this example. Works for me and is probably the best way for full control:
http://doc.silverstripe.com/doku.php?id=image&s=setwidth -
Re: Giving a SS Image a specific CSS class
8 June 2008 at 3:50pm
OK, so I used the method above. I was wondering if someone could help be get my head around this problem.
The slideshow needs the image in 3 sizes to use full functionality: A display size, a thumbnail size, and a large size for on-click.
Here is the html for the setup so far:
<% if Photo2 %>
<% control Photo2.SetWidth(300) %>
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="$URL" title="open image" class="open"></a>
<img src="$URL" class="full" />
<img src="$URL" class="thumbnail" />
</div>
<% end_control %>
<% end_if %>The last three elements in the div are the problem I am having understanding. What I am wanting is the eqivilent of saying:
$large = Photo2.SetWidth(600); // Large size
$mid = Photo2.SetWidth(300); // Mid size
$thumb = Photo2.SetWidth(50); // Thumb size<a href="$large.URL" title="open image" class="open"></a>
<img src="$mid.URL" class="full" />
<img src="$thmb.URL" class="thumbnail" />Any ideas on how to attack something like this in the same block of code?
Cheers
Aaron -
Re: Giving a SS Image a specific CSS class
8 June 2008 at 6:22pm Last edited: 8 June 2008 6:42pm
Well, I've spent an entire day trying to figure this one out. And no result.
I thought that perhaps the best way to attack it would be to create functions in the Page class to do the resize and return a URL only of the re-sampled image. But I am unable to access the image object from within that class.
I have tried various methods that I have picked up from within the forums and API docs but nada. -
Re: Giving a SS Image a specific CSS class
8 June 2008 at 6:53pm
Well, I had a duh moment and this is what I came up with. Does exactly what I need for now:
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<% control Photo1.SetWidth(600) %>
<a href="$URL" title="" class="open"></a>
<% end_control %>
<% control Photo1.SetWidth(300) %>
<img src="$URL" class="full" />
<% end_control %>
<% control Photo1.SetWidth(75) %>
<img src="$URL" class="thumbnail" />
<% end_control %>
</div> -
Re: Giving a SS Image a specific CSS class
24 October 2008 at 5:56am
The last example was exactly what I needed. Thank you!
| 1926 Views | ||
|
Page:
1
|
Go to Top |
