[MGNLDAM-1366] Improve asset thumbnail preview and hovering enlarged image Created: 08/Jan/24  Updated: 02/Feb/24  Resolved: 29/Jan/24

Status: Closed
Project: Magnolia DAM Module
Component/s: None
Affects Version/s: None
Fix Version/s: 3.1.0

Type: Task Priority: Low
Reporter: Lam Nguyen Bao Assignee: Lam Nguyen Bao
Resolution: Fixed Votes: 0
Labels: dx-core-6.3, searchx
Remaining Estimate: Not Specified
Time Spent: 1.75d
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2024-02-02 at 10.11.46.png    
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: SearchX 1. In-App search & Top Nav
Team: AuthorX
Work Started:
Approved:
Yes

 Description   

ACs

  • Show asset thumbnail preview on the table grid
    • when preview is supported
      • for photos and videos show a 4:3 ratio thumbnail, showing the image in its maximum possible size, centred with the cropped nest
      • for icons and logos centred them in a 4:3 ration grey box
    • when preview is not supported
      • show "no-preview" thumbnail
  • On asset thumbnail hovering, show enlarged preview
    • for images: the enlarged preview should maintain the aspect-ratio size of the asset, respecting its original proportion
      • the enlargement should follow the limit size of a maximum 200px width and/or 200px height
      • the position should be as per design mockup
      • the enlarged thumbnail should contain a drop shadow effect
    • for videos: when supported by the browser, the preview should play automatically on hovering, otherwise a static image of the video should be presented
    • for the remaining and "no-preview" thumbnails, don't apply enlargement effect on hovering
    • Mimic tooltip hovering rules regarding to appearing a disappearing times
  • Remove the triangle shows on the middle left of enlarged thumbnail lam.nguyen I don't understand what this means, so I strikethrough instead of deleting it. Feel free to delete it if it doesn't make sense anymore.

 

Design mockups

Assets thumbnail mockup
Assets thumbnail component
Enlarged thumbnail preview example - vertical image
Enlarged thumbnail preview example - horizontal image


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