Jump to:

3393 Posts in 976 Topics by 852 members

Template Questions

SilverStripe Forums » Template Questions » Image.SetWidth(150) Link

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

Page: 1 2
Go to End
Author Topic: 5113 Views
  • Ben Gribaudo
    Avatar
    Community Member
    181 Posts

    Image.SetWidth(150) Link Link to this post

    Hello,

    How do I get the link to a resized image in a template? It would be nice to be able to do something like:

    Image.SetWidth(150).Link


    However, I can't do that as Image.SetWidth(150) always returns HTML.

    (In case you're wondering, I'm building a desktop background download page where the background image needs to be offered in several resolutions. I would like to auto-generate those variations using image resizing functionality.)

    Thank you,
    Ben

  • Ben Gribaudo
    Avatar
    Community Member
    181 Posts

    Re: Image.SetWidth(150) Link Link to this post

    More on this....
    It is possible to extend Image by adding convenience methods to provide the desired data. Example:

    class WallpaperResourceImage extends Image {
       public function ResizedURL($width) {
          return $this->SetWidth($width)->URL();
       }
    }

    The downside with this approach is that referencing the resized image to retrieve different pieces of data in the template becomes cumbersome. Instead of being able to do something simple like this --

    Image.SetWidth(150).Link
    Image.SetWidth(150).getHeight


    -- we have to add a method to our Image extension (in this case, WallpaperResourceImage) for every piece of data we want.

  • alirobe
    Avatar
    Community Member
    35 Posts

    Re: Image.SetWidth(150) Link Link to this post

    Strangely, I came across this very same problem today, trying to set some page-specific CSS.

    Writing a class is a very messy solution because it also means the theme and mysite folders are more coupled. This syling information should definitely be in the themes directory. If anyone can offer any ideas, I would also love to hear them.

  • Ben Gribaudo
    Avatar
    Community Member
    181 Posts

    Re: Image.SetWidth(150) Link Link to this post

    More on this:

    The template parser (in sapphire\core\SSViewer.php) uses regular expressions to convert template method/property calls into PHP. These regexes look for a fixed combination of call signatures--i.e. "Property.Subproperty", "Property(one_argument).Subproperty", "Property.Subproperty(one_argument)", etc. The signature of "Image.SetWidth(150).Link " does not match any of the defined call signatures. However, the signature of "Image.SetWidth(150)" does match one of the signatures. So, the parser converts "Image.SetWidth(150)" into PHP (which then is rendered as HTML) and then outputs ".URL" after it.

    A draft patch has been proposed which will remove the limitation of having a fixed list of allowed call signatures.

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Image.SetWidth(150) Link Link to this post

    This is a bit clumsy but should work

    <% control Image %>
    <% control SetWidth(150) %>
    <a href="$Link"><img src="$URL" alt="$Title" /></a>
    <% end_control %>
    <% end_control %>

  • Ben Gribaudo
    Avatar
    Community Member
    181 Posts

    Re: Image.SetWidth(150) Link Link to this post

    Thanks, Will!

  • Ben Gribaudo
    Avatar
    Community Member
    181 Posts

    Re: Image.SetWidth(150) Link Link to this post

    The above-mentioned patch is attached to ticket #3738. Testers are needed to try it out.

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Image.SetWidth(150) Link Link to this post

    Nice work bgribaudo looks patch sounds like an awesome addition to the SSViewer!

    5113 Views
Page: 1 2
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.