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 :)

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.

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 :)

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

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

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.

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.

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.