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

Giving a SS Image a specific CSS class


Reply


6 Posts   2304 Views

Avatar
Aaron

Community Member, 63 Posts

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

Avatar
Aaron

Community Member, 63 Posts

8 June 2008 at 2:20pm

Edited: 08/06/2008 2:21pm

Found this example. Works for me and is probably the best way for full control:
[url]http://doc.silverstripe.com/doku.php?id=image&s=setwidth[/url]

Avatar
Aaron

Community Member, 63 Posts

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

Avatar
Aaron

Community Member, 63 Posts

8 June 2008 at 6:22pm

Edited: 08/06/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.

Avatar
Aaron

Community Member, 63 Posts

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>

Avatar
mikewheaton

Community Member, 9 Posts

24 October 2008 at 5:56am

The last example was exactly what I needed. Thank you!