Just wondering if anyone has experimented with creating responsive images in SS with technique similar to http://adaptive-images.com/
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
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.
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.
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
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.
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.