Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Giving a SS Image a specific CSS class

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 2247 Views
  • Aaron
    Avatar
    Community Member
    63 Posts

    Giving a SS Image a specific CSS class Link to this post

    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

  • Aaron
    Avatar
    Community Member
    63 Posts

    Re: Giving a SS Image a specific CSS class Link to this post

    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

  • Aaron
    Avatar
    Community Member
    63 Posts

    Re: Giving a SS Image a specific CSS class Link to this post

    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

  • Aaron
    Avatar
    Community Member
    63 Posts

    Re: Giving a SS Image a specific CSS class Link to this post

    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.

  • Aaron
    Avatar
    Community Member
    63 Posts

    Re: Giving a SS Image a specific CSS class Link to this post

    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>

  • mikewheaton
    Avatar
    Community Member
    9 Posts

    Re: Giving a SS Image a specific CSS class Link to this post

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

    2247 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.