Automattic / Automattic/jetpack
Slideshow block: On FSE Templates, improperly responsive images are loading intermittently
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
_Update 2023-03-23 from cuemarie - this one took me a few tries to replicate, so please see my [triage round two comment below](https://github.com/Automattic/jetpack/issues/30891). My steps to replicate:_
1. _On a simple site with an FSE theme active, add the Slideshow block to a template, with several images from Pexel free image library._
2. _Save and view the site_
3. _Inspect the slideshow, and check out how the `` element pulls the image._
4. _Return to the editor and remove a caption from one of the images_
5. _Save and view the site again_
6. _Now you should see a different response from the images. If you inspect the slideshow > `` element again, there's new responsiveness going on with the images._
### Quick summary
Adding the Slideshow block to a template can lead to some issues with image sizes – in particular, the images can appear much smaller than expected on the live site. In my tests, this behavior was consistent on mobile, but sometimes was "delayed" on larger screens – the images sometimes loaded at the expected size and then quickly snapped to a smaller size. (In most cases, the images always displayed at the smaller size.)
### Steps to reproduce
1. Start with a site with a block/FSE theme active.
7. Open the Site Editor.
8. Add a Slideshow block with a few images to the template, e.g. inside the header or below the header template part. Test adding it to a Group block as well.
9. View the live site.
### What you expected to happen
The slideshow should appear on the live site as it does in the editor, with images sized to fit the slideshow area.

### What actually happened
The images are very small:

### Impact
Some (< 50%)
### Available workarounds?
No but the platform is still usable
### Platform (Simple and/or Atomic)
Simple
### Logs or notes
Only tested on Simple so far, unsure if this also affects other platforms. Replicated on Chrome and Firefox (latest versions), as well as Chrome on Android.
From the browser console, it looks like the images are being loaded in with `?w=` URL parameters to specifically shrink them to a smaller-than-expected size, so using CSS to resize them isn't possible.
Setting the block to wide or full width (if inside a Group block) fixes the issue, but the slideshow may then be larger than desired.
Contributor guide
Assessment
This issue has not been assessed yet.