[MCL-11] Image Created: 08/Dec/23  Updated: 29/Jan/24

Status: In Progress
Project: Magnolia Component Library
Component/s: Core Content
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Raymond Tran Assignee: Tu Bo Xuan
Resolution: Unresolved Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2024-01-29 at 16.40.47.png     PNG File Screenshot 2024-01-29 at 16.41.00-1.png     PNG File Screenshot 2024-01-29 at 16.41.00.png    
Issue Links:
Cloners
is cloned by MCL-19 Video Open
is cloned by MCL-12 Grid (Row/Column/Container) Closed
Template:
Acceptance criteria:
Acceptance Criteria
[ ]* Component is called "Image"
[ ]* Supports all OOTB Bootstrap style variants including None (default), Rounded and Thumbnail
[ ]* Uses picture element to render resized image for each breakpoint width
[ ]* Resized images obey focal point / area selected for each breakpoint in the DAM asset
Documentation Acceptance Criteria
[ ]* Contains Title, Description and Examples
[ ]* Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]* Component can be added to any page template in Column area of a Row component only.
[ ]* Class and CSS can be overridden in the Dialog
[ ]* Alt text override can be configured in Dialog
[ ]* Style variant can be configured in the Dialog
[ ]* Selected Image is mandatory
[ ]* Supports selecting all file types supported by the Imaging module https://docs.magnolia-cms.com/product-docs/6.2/Modules/List-of-modules/Imaging-module.html
Accessibility Acceptance Criteria
[ ]* Shows alt text from DAM image Description field, Caption field or Title field if not present. Alternatively, shows overridden alt text field from the Image dialog
Date of First Response:

 Description   

User Story:

As a content author,
I want to create an image component
So that I can place images onto a content page without involving a developer.

Description:

Exists in BTK already as Image component. See also Corporate website demo code which contains handy Image macros that leverage the Imaging module and does alt text null coalescing.

Bootstrap documentation:

https://getbootstrap.com/docs/5.3/content/images/


Generated at Mon Feb 12 04:48:40 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.