Description
We need to incorporate an automated image cropping mechanism into the image detail view of the image browing design, where image foci are centered and displayed in 9:16 (TikTok-friendly) dimensions. This will ensure images in the detail view are cropped intelligently rather than relying on simple center-cropping.
Scope / Details:
- Integrate an SmartCropJS image cropping library to handle smart cropping (e.g., face/subject-aware).
- Ensure carousel images render in TikTok-friendly aspect ratios.
- Initial ticket should focus on basic implementation.
- If time permits, create a follow-up ticket for refinement and QA polish.
Acceptance Criteria:
-
Images in detail view display in 9:16 TikTok-style dimensions. -
Cropping is automated - T400703 has been updated to include a list of all 3rd-party libraries introduced to support this feature
- Per last discussion with @egardner MVP now is just generating coordinates for object fit center
- Per last discussion with team MVP now is applying the coordinates to the detail view image.
Follow-Up
- Refine cropping accuracy based on QA feedback.
- Explore alternative/improved libraries or approaches if needed.
Requirement
Scope: Mobile web detail view only (PatchDemo: https://patchdemo.wmcloud.org/wikis/8ab6c84ec2/wiki/Paris).
- QA must focus on the detail (full-screen) image view, not the carousel.
- Carousel images at the top of the page are no longer cropped to 9:16 (only very wide panoramas are cropped there).
- In the detail view, images must be smart-cropped using SmartCropJS so that the main subject is centered when displayed in mobile-size viewports.
- For larger screens, images should still be centered appropriately if cropped by viewport dimensions.
- Strict 9:16 enforcement applies to the detail view on mobile; carousel remains responsive in its original aspect ratio.
BDD
Feature: Smart cropping in mobile detail view
Scenario: Detail view on mobile
Given I open an image detail view on a mobile-size viewport
When SmartCropJS applies crop coordinates
Then the image is displayed in 9:16 aspect ratio
And the subject is centered in the viewport
Scenario: Detail view on desktop
Given I open an image detail view on a desktop-size viewport
When the viewport dimensions cause cropping
Then the subject remains centered on a reasonable focal point
Scenario: Carousel images
Given I view the carousel at the top of the page
When images are rendered
Then images display in their original aspect ratios
And no strict 9:16 crop is applied (except very wide panoramas)Test Steps
Test Case 1: Detail view on mobile
- Open https://patchdemo.wmcloud.org/wikis/408016161e/wiki/Paris in a mobile viewport.
- Tap an image to open the detail view.
- AC1: The image is displayed in 9:16 aspect ratio.
- AC2: SmartCropJS ensures the subject is centered (inspect applied crop coordinates).
Test Case 2: Detail view on desktop
- Open the same PatchDemo page on a desktop viewport.
- Open an image in the detail view.
- AC3: The image fills the viewport according to its aspect ratio.
- AC4: Cropping centers the subject if the viewport forces part of the image to be hidden.
Test Case 3: Carousel images
- Inspect the carousel at the top of the Paris page in both desktop and mobile.
- AC5: Images render in their original aspect ratios.
- AC6: No strict 9:16 crop is applied, except for panoramic images which may be cropped to fit.
QA Results - Patchdemo
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T402203#11172639 |
| 2 | ✅ | T402203#11172639 |
| 3 | ✅ | T402203#11172639 |
| 4 | ✅ | T402203#11172639 |
| 5 | ✅ | T402203#11172639 |
| 6 | ✅ | T402203#11172639 |
