Hi everyone,
When working on a responsive website you must, consider hires devices (retina screen as Apple name it).
But I find it difficult to create rules for my thumbnail definitions:
If I need a thumbnail to be 300px wide * 150px height for a standard (non retina) screen, the same image must be more or less 600px wide * 300px height for hires screen (inside a container of 300px * 150px so that the resolution is doubled).
In Seblod we could define this 2 thumbnails styles very easily.
But how could we load the hi-res thumbnail for retina devices and the standard one for standard device?
Best
Simon
Hi Simon,
What I would do is use the srcset attribute (http://www.webkit.org/demos/srcset/) and use the HTML typo in order to render this.
- Set your thumbnails up as you described (thumb1 for low res, thumb2 for high res)
- Use your CSS style sheet to define the container set the width and height as you described
- Choose the HTML typo setting on your image field (in the content or item view, wherever you are displaying your image)
- Type the syntax <img src="/$cck->getThumb1('image_field_name');" srcset="/$cck->getThumb1('image_field_name'); 1x, /$cck->getThumb2('image_field_name'); 2x" />
- You can of course add class="" and alt="" in there if you want.
- That will show your Thumb1 image as default, thumb1 image on non-hi-res screens and your thumb2 image on high res screens.
Hi James,
Many thanks for your reply.
Very easy and smooth way.
Hope the srcset attribute will be more compatible soon (see http://caniuse.com/#feat=srcset).
By curiosity I've searched what solution is availabe for other CCK, eg Dr…al, see what I mean. What I've found is awful, based on some modules you have to configure in many screens.
Best
Simon
PS: I take this opportunity to ask you if your project to write a Seblod eBook is still alive (http://www.jamesmorrell.com/ebook)
Hi Simon,
The eBook project is not going ahead for now... I am focusing more directly on SEBLOD documentation. Maybe in future I will revive this dream but at the moment no.
Thanks,
_jrmo