Automattic / Automattic/jetpack
Tiled gallery width and Infinite Scroll JS plugin from Metafizzy
- 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:

The same post and gallery loaded with the infinite scroll:

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
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