-
Notifications
You must be signed in to change notification settings - Fork 798
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slideshow block: On FSE Templates, improperly responsive images are loading intermittently #30891
Comments
Initially reported in 6300144-zd-woothemes. |
Support References This comment is automatically generated. Please do not edit it.
|
Triage Round One📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain
📌 FINDINGS/SCREENSHOTS/VIDEO
Screenshots/RecordingsMobile Response Desktop Response (With responsive controls tests) 📌 ACTIONS
📌 Message to Author
|
@cuemarie I was able to replicate on a test site, though I'm getting really inconsistent results now: https://premium.wootestjpi.blog/ I currently have the Slideshow (align center) in a Group block, as that's similar to what the user I had been chatting with had set up. (It also makes it a bit more obvious that the images are shrunk, when they do shrink.) Right now, it seems to load properly at first, and then they shrink after reloading the page. Mobile is always affected on my end. That said, the user I spoke with seems to have made some changes to the images they're using, and suddenly I can't replicate on their site anymore. Not sure why. 🤔 (Just in case: my test site is on Archeo. User's site is on Masu.) |
Triage Round Two📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain
📌 FINDINGS/SCREENSHOTS/VIDEO
Screenshots/RecordingsBqcmRt.movHere you can see a side-by-side of the same site, before and right after I removed the caption of the first image: I waited a few minutes and refreshed again, and the image does now appear larger again, but not the same size as it was originally, and the different Before editing caption, inspecting the
After editing the caption, inspecting the
📌 ACTIONS
|
Transferring to the Jetpack repo, where the Slideshow block lives. |
related: #22834 |
This issue has been marked as stale. This happened because:
No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation. |
Another occurrence: 7447913-zen |
I've spent some time troubleshooting this issue, and though I haven't been able to reproduce it myself, I've got an idea of what's happening. This function in the Slideshow block determines what image URL to use: the URL depends on the size setting, which is set to Large by default. When one adds an image using an external source (tested with Pexel), resized versions of the selected image are not processed—or available. However, after updating the gallery (such as deleting a caption in the above description), these versions are available.
So, when an image is added to the slideshow, no resized version exists, and the block falls back to the full-size version. After the gallery is updated, resized versions are available, and the one that matches the size setting is used. That explains the What I still don't understand is why the image gets so small. The size attribute is set to Large by default and doesn't seem to be updated to another value anywhere in the code (e.g., the value is the same on mobile and desktop). Could users have set it manually to Small, for instance? A proper fix would likely involve ensuring resized versions of the image are available from the get-go. As far as I understand, that should be handled in WordPress core. |
Not sure what team can comment on that. Do you maybe have some input, @inaikem? |
Good question and thanks for the ping! I'm not entirely sure either but I think @jordesign and @annezazu might be able to help on the Dotorg side. |
Update 2023-03-23 from cuemarie - this one took me a few tries to replicate, so please see my triage round two comment below. My steps to replicate:
<figure>
element pulls the image.<figure>
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
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.
The text was updated successfully, but these errors were encountered: