Jump to:

23372 Posts in 18175 Topics by 2865 members

General Questions

SilverStripe Forums » General Questions » Responsive Image Class idea

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1 2
Go to End
Author Topic: 1412 Views
  • zenmonkey
    Avatar
    Community Member
    527 Posts

    Responsive Image Class idea Link to this post

    Just wondering if anyone has experimented with creating responsive images in SS with technique similar to http://adaptive-images.com/

    I figure since SS already deals with image resize shouldn't be a big deal to create methods that create multiple resized images with a modified setWidth() and then modify the htaccess to serve those images based on User Agent and/or a JavaScript set cookie.

    My big worry is server load to do multiple resizes of multiple images on the first render. I figure it would be impossible on shared hosting as it would hit common memory caps quite quickly. And if you want to support iPad retina graphics you're screwed you'll be uploading relatively massive files. Obviously, if you wanted to handle CSS images the same way, they'd have to be manually resized

    Thoughts? Criticisms?

    I'll post the code if I get this up and running

  • Sigurd
    Avatar
    Forum Moderator
    628 Posts

    Re: Responsive Image Class idea Link to this post

    I don't think there's anything done yet, but given our new default theme in SS3 will be responsive, this is a great idea and potentially something that should be available out of the box. Please make this suggestion on our core development mailing list (Google Groups 'silverstripe-dev'). That way the community can identify the best approach, and consider other issues at play, such as the fact the latest iPad actually has more resolution than a typical desktop machine and hence could benefit from larger not smaller images.

  • zenmonkey
    Avatar
    Community Member
    527 Posts

    Re: Responsive Image Class idea Link to this post

    Will do.

    As an aside, I really think serving images to the new iPad will really need to be handled as a user option. Not sure sending full resolution image by default to a user over 3G / LTE is a good idea

  • Spaghetti
    Avatar
    Community Member
    31 Posts

    Re: Responsive Image Class idea Link to this post

    Just wondering if you managed to get this working? I'm looking at it now for my site. Not sure where to start.

  • zenmonkey
    Avatar
    Community Member
    527 Posts

    Re: Responsive Image Class idea Link to this post

    I actually did have a working version, but I realized from a temaplting perspective it created some pretty hairy notation. You'd need to specify values for each of your breakpoints in the template. Such as Image.SetWidth(1000, 500, 250). That's not bad with SetWidth and SetHeight, but onced you moved into any of the two value operations it just became impossible to read, the other option was settign defaults which might not work for every template.

    Since this is in many ways a front end issue I abbandoned it in favour of using JavaScript polyfill for one of new HTML5 responsive image notations and using seperate image functions for each breakpoint version.

    The added template markup is easier to read for a beginner than any viable modified image method syntax

    I'm happy to post the work I had done in git if you're interested

  • Spaghetti
    Avatar
    Community Member
    31 Posts

    Re: Responsive Image Class idea Link to this post

    Hi Zen, thanks for your quick reply.

    I've just been playing around with this and all I did was follow the installation instructions on http://adaptive-images.com/ (although I had to put the .htaccess rule above the silverstripe one to override silverstripes handling of images. It seemed to work nicely with the 'simple' theme.

    I realise this would make the entire installation of SilverStripe use adaptive images.... but isn't that a good thing? I can't see how you'd host more than one website with SS and I never switch themes except on installation and my customers certainly don't.

    Perhaps I'm being dense but I don't really understand why adaptive images would be something you'd want to enable on a per-template basis, programatically as opposed to a per-site basis?

    I don't know, I'd appreciate your input and yes I'd be interested to see your example code.

    Cheers.

  • zenmonkey
    Avatar
    Community Member
    527 Posts

    Re: Responsive Image Class idea Link to this post

    Adaptive-Images is great for site wide image shrinking, but I was thinking in terms of providing much more granular control to the front end coder. Really great responsive websites don't just scale and drop columns at different screen sizes, they also provide images formatted for context. Say for instance you have a square image on your desktop site as a thumbnail, on a vertical mobile device that image may work better as a wider image spanning the entire column width. I was attempting to bridge that gap.

    I'll try and dig up my solution and post it later today.

  • Spaghetti
    Avatar
    Community Member
    31 Posts

    Re: Responsive Image Class idea Link to this post

    Yes, Good point and I can well imagine customers asking me 'can we have this image crop around this area of the picture on low resolution devices?' too.

    As for themes, I think a file naming convention might easier than configuring them in code?

    Anyway, I'd be very interested to see how you approached it, thanks.

    1412 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.