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

Avatar
Aaron

8 June 2008 at 2:04pm Community Member, 63 Posts

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

8 June 2008 at 2:20pm (Last edited: 8 June 2008 2:21pm), Community Member, 63 Posts

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

8 June 2008 at 3:50pm Community Member, 63 Posts

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

8 June 2008 at 6:22pm (Last edited: 8 June 2008 6:42pm), Community Member, 63 Posts

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

8 June 2008 at 6:53pm Community Member, 63 Posts

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

24 October 2008 at 5:56am Community Member, 9 Posts

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