Automattic / Automattic/jetpack

Tiled Gallery images sizes inconsistent between editor and front of site causing layout issues

Open
#42,183 3 comments 0 reactions 0 assignees View on GitHub
[Block] Tiled Gallery [Experiment] AI labels added [Feature Group] Content Management [Feature] Tiled Gallery [Plugin] Jetpack [Pri] Low [Status] Auto-allocated Bug Customer Report [LEGACY] Triaged
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.