Automattic / Automattic/jetpack

Tiled gallery width and Infinite Scroll JS plugin from Metafizzy

Open
#8,428 2 comments 0 reactions 0 assignees View on GitHub
[Feature] Tiled Gallery [Pri] Low [Status] Stale Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Hello, I have an issue with the tiled gallery. I'm working on a custom WordPress theme and I choose to add infinite scroll from a post to another. My goal is to reproduce the behavior of websites like [qz.com](https://qz.com/1167017/robots-automation-and-ai-in-the-workplace-will-widen-pay-gap-for-women-and-minorities/) or [bloomberg.com](https://www.bloomberg.com/news/articles/2017-12-27/bitcoin-s-rebound-eases-as-cryptocurrency-watchers-debate-value). When you are at the end of an article, another one is automatically load above the first one.

***

#### Steps to reproduce the issue
To create this feature, I used the following js plugin: [infinite-scroll.com](https://infinite-scroll.com/) It works like a charm, I only have a bug with the jetpack tiled gallery.

#### What I expected
The gallery should works normally.

#### What happened instead
The gallery is perfectly responsive for the first post. Once another post is load with the infinite scroll, the width of the gallery is higher than the container.

Example with the first post load:
normal-loading

The same post and gallery loaded with the infinite scroll:
infinite-sroll-loading

The gallery is visually crop by the width of the container instead to be responsive. The width of the gallery and all elements inside stay fixed.

I searched solutions around here without success...
Any ideas to fix this bug in PHP, JS or even CSS?

Thanks

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the tiled gallery inside a WordPress post loaded through the Infinite Scroll JS plugin, comparing the initial post with a dynamically loaded one. No project file or test is named in the issue; done means the gallery and its contents remain responsive within the container after another post loads.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.