[MGNLDEMO-102] Ad-hoc Images in demo should be loaded efficiently Created: 16/Sep/15  Updated: 02/Nov/16  Resolved: 13/Oct/15

Status: Closed
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: 0.7
Fix Version/s: 0.8

Type: Improvement Priority: Neutral
Reporter: Christopher Zimmermann Assignee: Roman Kovařík
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 1d 40m
Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLDEMO-100 Responsive columns component Closed
dependency
is depended upon by MGNLDEMO-33 Reduce Image Size - Efficient respons... Closed
is depended upon by MGNLDEMO-93 Demo carousel Closed
supersession
supersedes MGNLDEMO-101 Images in Demo break the layout Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Travel Demo
Sprint: Kromeriz 14
Story Points: 8

 Description   

MGNLDEMO-101 should be considered or completed first.

By "Ad-hoc" images - I mean images that a user can add anywhere (not those "managed" in specific tour components). When a user places a textimage or teaser - in this responsive layout - ideally the site should not always load the same variation of an image. It should load an image with roughly the size that the element takes on the page.

This can be achieved using the srcSet attribute of the image tag - as is done for the tour images (see related ticket) But this is configuration intensive - and better suited to situations where we know the actual likely sizes.

For the ad-hoc images I recommend a lighter approach based on the "lazySizes" javascript library. (https://github.com/aFarkas/lazysizes )
The key benefit is that no-one has to configure which size of image should be used based on browser-width as one must do with the srcSet attribute. The library uses the actual size of the element on the page - you must only specify the URL's of the images to use at different sizes of that image.
The benefit of "lazySizes" over the popular "Imager.js" is that it falls back gracefully where no javascript is available.

Notes:

See working example of proposed implementation on branch MGNLDEMO-102-ex.
Create image variations for typical bootstrap widths, 1920, 1366, 960, 480, 320, 240. (variations should not define heights)
Add the lazySizes.min.js to the theme.
Add the polyfill for srcSet attribute, respimage.min.js to the theme.
Create a new ftl include based on mte's image.ftl, maybe called imageResponsive.ftl in travel-demo module. Which contains methods to easily generate the lazySizes syntax (lazyload css class, data-sizes="auto" attribute, data-srcset attribute.
Use the 240 variation as the src of the image tag. So this image will be loaded first when the page loads, but then when the image is scrolled into view, then the proper sized image will be loaded and displayed.

An important improvement over what is on the branch for non-javascript AND ie8:
Is to follow the "noscript pattern" mentioned on this page: https://github.com/aFarkas/lazysizes with a large image for the noscript case.
If using this pattern, than the img tag with the lazysizes markup no longer requires a src attribute. Which is an improvement because we only load one image per img tag.



 Comments   
Comment by Christopher Zimmermann [ 05/Oct/15 ]

The example git commit creates a new TextImageResponsive component - this was just an experiment. Actually the textImage component should be changed. (And teaser)

Comment by Roman Kovařík [ 08/Oct/15 ]

Reopened: We need to have two sets of variations (according to width which we already have and the second according to heigh). We should be able to configure it in dialog. This is needed e.g. for MGNLDEMO-102, since the images in the carousel have now different heights.

Comment by Evzen Fochr [ 12/Oct/15 ]

1 missing labels:
travel-demo.components.textImage.tabImage.fixedHeight.buttonLabel
travel-demo.components.textImage.tabImage.fixedHeight.label

2 image is not correctly resized in carousel to its full width

Comment by Roman Kovařík [ 13/Oct/15 ]

Reopened: heigh should not be defined for lazy sizes variations

Generated at Mon Feb 12 05:16:19 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.