21303 Posts in 5736 Topics by 2603 members
Page: 1 2
|Go to End||Next >|
11 April 2012 at 4:04am
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
Core Development Team
12 April 2012 at 6:10am
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.
12 April 2012 at 6:23am
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
16 January 2013 at 6:29am
Just wondering if you managed to get this working? I'm looking at it now for my site. Not sure where to start.
16 January 2013 at 7:23am
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
16 January 2013 at 8:05am
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.
16 January 2013 at 8:19am
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.
17 January 2013 at 12:18am
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.
Page: 1 2
|Go to Top||Next >|