[MGNLDEMO-33] Reduce Image Size - Efficient responsive Images Created: 18/May/15 Updated: 19/Oct/15 Resolved: 19/Oct/15 |
|
| Status: | Closed |
| Project: | Magnolia Demo Projects |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | 0.8 |
| Type: | Story | Priority: | Major |
| Reporter: | Christopher Zimmermann | Assignee: | Roman Kovařík |
| Resolution: | Fixed | Votes: | 1 |
| Labels: | None | ||
| Remaining Estimate: | 0d | ||
| Time Spent: | 0.75d | ||
| 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 15 | ||||||||
| Story Points: | 3 | ||||||||
| Description |
|
Currently the same image is loaded regardless of screen width - and scaled in the browser AKA responsive images. I made a suggestion on implementation on branch As lazysizes works on img tag - we probably need to replace the usage of background-image that we used to have images stretch nicely to fill their containers without distortion. A newish css value supports this behaviour in the image tag "object-fit: cover". A custom javascript helper is used (jquery.object-fit-cover-simple.js) to enable this feature on browsers that do not support this attribute. Implementation Notes (for git branch The javascript resources should be added to the theme instead of directly to the main.ftl! The carousel does not work with the object-fit property - therefore I recommend leaving it the way it is. relatedTours.ftl should be updated to use this technique - probably very similar to the changes in tourTeaser.ftl |
| Comments |
| Comment by Antonín Juran [ 16/Oct/15 ] |
|
Pictures resolution is wrong |