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

Giving a SS Image a specific CSS class


Go to End
Reply


6 Posts   2614 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:
http://doc.silverstripe.com/doku.php?id=image&s=setwidth

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!