FR: Image Collage Block (Landing Page) (2)

shirin27 commented 6 months ago

From vg-macktrucks-com-rd created by Gonzalo-CG: Netcentric/vg-macktrucks-com-rd#117

Description

The Bulldog Magazine Blog page contains an image collage-like component that displays elements following a grid pattern on desktop viewports (on mobile, the structure is simply one image below the other as seen on Figma):

Acceptance Criteria

User AC

[ ] When a user clicks on the image or title, they are directed to the article page.
[ ] The blog category is not clickable, only displayed text to view.

Editor AC

[ ] The Image Collage Block is available for authors to use on any page.
[ ] The Image collage block is available in the AEM Sidekick library.
[ ] All content for text, images, links, etc. is manually added by the author and not dynamically populated.

Non-functional AC

[ ] The Image Collage Block has the same design for Desktop & mobile as shown in Figma.
[ ] Each element consists of an image with text overlayed on its bottom-left corner, and we will add a gradient to address accessibility concerns regarding the readability of the text.
[ ] For use on the landing page, these featured blogs have to be manually added by authors to the block by adding the link to the desired articles to feature, and the Image, Blog Category, and Blog Title will be pulled from the linked blog's metadata.
[ ] The images that should be available in the article metadata are in aspect ratio 4:3, 6:5, and 8:3

Out of Scope

Videos will be handled in a separate ticket.

Open Questions

~~Should there be any hover effect on the block's elements?~~ --> Yes, see: https://www.figma.com/file/oNwe2jHIICPMIe551EY62l?node-id=2222:50863&mode=design#595563726

Attachment / link to Figma

here in Figma

shirin27 commented 6 months ago

@WendyKruger Please see "Open Questions" above.

shirin27 commented 6 months ago

to cover Section Metadata: Horizontal Separator #130 with this when deployed

shirin27 commented 6 months ago

Per comment from Matt here: https://www.figma.com/file/oNwe2jHIICPMIe551EY62l?node-id=2222:50863&mode=design#595563726 there should be a hover effect to enlarge image. Note: he also commented that there should be arrows for the nav instead of dots. the figma file is updated.

alexiscoelho commented 2 months ago

As agreed with @ZoeBeykirch and @BeckyMedlin this component functionality and setup will be merged with the one created on #605 As part of that this work will be done:

Simplify the code of the category collage component
Simplify the block setup on the document
Add some style improvements, animations and adding the gradient behind the text
Optional functionality to display the sub-title (former category)

girishdigrajkar commented 1 month ago

Hi @alexiscoelho, Validated and below is outstanding observation :

Across Viewports:

sign ‘ -> ‘ is not displayed as expected Reference : https://github.com/hlxsites/vg-macktrucks-com/issues/600#issuecomment-1966646011

girishdigrajkar commented 1 month ago

Validated and above mentioned issue is also resolved hence, please proceed with PR merge and marking ticket to 'ready for prod':

hlxsites / vg-macktrucks-com