Automattic / Automattic/jetpack

Slideshow block: On FSE Templates, improperly responsive images are loading intermittently

Open
#30,891 18 comments 0 reactions 1 assignee Claimed by @monsieur-z View on GitHub
[Block] Slideshow [Focus] FSE [Platform] Simple [Plugin] Jetpack [Pri] Normal Bug Customer Report [LEGACY] Triaged
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.

![LYQ0Dy.png](https://github.com/Automattic/wp-calypso/assets/5630717/ef4091e3-b004-460f-9fdb-44dfe39d7ac5)

### What actually happened

The images are very small:

![vWt6eR.png](https://github.com/Automattic/wp-calypso/assets/5630717/710440c4-e76d-450f-8478-d6f8c8a2daf8)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.