[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: |
|
||||||||||||||||||||||||||||
| 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 |
|
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 ) Notes: See working example of proposed implementation on branch An important improvement over what is on the branch for non-javascript AND ie8: |
| 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 |
| Comment by Evzen Fochr [ 12/Oct/15 ] |
|
1 missing labels: 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 |