Responsive images

[Driebot]

In gitlab by david on Nov 12, 2015, 08:34

As discussed on Yammer: we need responsive images.

Proposal:

• We determine 3 standard image sizes: S, M, L.
• When we include ({% image ... or {% image_url) a S image, nothing special needs to be done. When we include a M image, we add an S variant (in <imgset) as alternative for smaller screens. When a L image is included, we add S and M variants.
• The requested image size should be determined from the supplied mediaclass and fall back to width/height if passed to {% image}.

Questions:

1. Are 3 image sizes enough or do we need more?
2. Should we add support in Zotonic’s {% image %} tag or should we add a separate {% imgset %} tag?
3. How do frontenders feel about passing the imgset sizes HTML attribute? Shouldn’t that be in the CSS instead?

[Driebot]

In gitlab by david on Nov 17, 2015, 10:54

As a starting point, we could use separate mediaclass.configs per device (suggested by Fred).

[Driebot]

In gitlab by david on Nov 26, 2015, 11:54

http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/

[Driebot]

In gitlab by david on Nov 30, 2015, 08:58

Adding this to Zotonic: https://github.com/zotonic/zotonic/pull/1096

[vincentjacobs]

Apparently this issue is discussed and closed in Zotonic: https://github.com/zotonic/zotonic/pull/1096. I suggest to close this one too.