Automattic / Automattic/jetpack
Tiled Gallery images sizes inconsistent between editor and front of site causing layout issues
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### Quick summary
When investigating 9474377-zd-a8c I determined that the image sizes are different between the editor and the front end. Specifically the aspect ratios are different.
- go to the page in question on the support ticket
- open a support session and Edit the page
- ensure you have two browser windows open tiled next to each with the same widths - one should be the editor and the other the front of site
- using DevTools select the first image in the gallery
- switch to Console and type $0.currentSrc.
- Repeat for both editor and front of site.
- Compare dimensions and notice they are different.
It's easier to perceive the diffetent when you remove the `flex-basis` rules from `.tiled-gallery__col`. Again use dev tools and add `flex-basis: initial !important`.
### Steps to reproduce
Visit the page mentioned in the support ticket and open in editor and front of site views. You can visually see the different layouts.
### Site owner impact
Fewer than 20% of the total website/platform users
### Severity
Moderate
### What other impact(s) does this issue have?
_No response_
### If a workaround is available, please outline it here.
_No response_
### Platform (Simple and/or Atomic)
Simple
Atomic
Jetpack
Contributor guide
Research direction
Start with the affected page and compare the first gallery image's currentSrc and layout in the editor and front of site using two same-width browser windows. Inspect the .tiled-gallery__col flex-basis behavior in DevTools; done means both views use consistent image dimensions and no longer produce visibly different gallery layouts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, wordpress
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100