[MGNLDEMO-101] Images in Demo break the layout Created: 15/Sep/15  Updated: 05/Nov/15  Resolved: 06/Oct/15

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

Type: Bug Priority: Major
Reporter: Christopher Zimmermann Assignee: Unassigned
Resolution: Duplicate Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
supersession
is superseded by MGNLDEMO-102 Ad-hoc Images in demo should be loade... 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)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Epic Link: Travel Demo
Story Points: 5

 Description   

Images in Demo should be sized to fit the layout. Currently if you add an image to a "Text and Image" component, or to a teaser component the original image file is included, and it totally breaks the layout.
A. A rendition should be included rather than the original.
B. The image should not expand wider than its container - it should be resized.

Notes - CSS:
CSS classes should be added so that the images behave as if they have the bootstrap css class "img-responsive". Basically they should have a full width.
A way to implement this for the teasers and text-image would be something like the following rules:

/* IMAGES
-------------------------------------------------- */

.teaser img{
    max-width:100%;
}

.text-image-section img{
    max-width:100%;
}

.content-image-wrapper{
    position: relative;
}

Notes - Variation
I recommend adding an image variation to the theme called "large" or "layout-width" with a width of 940px. This would then fill the full width of the bootstrap layout. The textImage & teaser components both use the ImageModel class which will pickup the value of a parameter named "imageVariation" in the template definition.
Therefore, a possible path is to create new templateDefintions for the teasers and textImage components in the travel-demo module (which reference the mte script and dialog) and add this parameter to them - and of course update the content bootstraps to use these.

Tip: consider performing MGNLDEMO-102 in the same sprint. 102 builds on this ticket, so there's not really wasted work doing them separately - but might be most efficient to do both at the same time.


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