Slideshow: Fix image sizing when parent height is not set

[coder-karen]

Fixes JETPACK-1217

Proposed changes:

• This PR checks to see if an image includes naturalWidth and naturalHeight properties, creating a fallback otherwise.
• This is aimed at preventing scenarios such as in the linked issue, where the height is not added to the inline style for the images parent ul element, this filling the whole width of the parent. This can cause a visual mismatch on a page with several slideshows.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

JETPACK-1217

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Ideally this would be tested on mobile by sandboxing the site mentioned in the above linked Linear issue (unless you can reproduce on another non Simple site), and using the generated commands in the comment below to apply the changes when sandboxed. May need mobile assistance for this.

If you can replicate the issue on mobile on a self-hosted or WoA site:

• Note that you may want to use BrowserStack for testing too, as generally the issue is present on first load, so you can test different devices. Use Android / Chrome. There are some BrowserStack login details in the SS.
• To replicate on mobile, you need to have created a slideshow within a post (ideally several in the post, some with portrait images, some with landscape). Set image sizes to 'large'. You should be able to use a default theme like Twenty Twenty.
• Then on the front-end if you have for example multiple portrait slideshows and one is full width, then check the HTML for that slideshow in the inspector. If the parent ul for the slideshow images has no inline style height, then that should confirm the issue. Manually adding a height comparable to the other slideshows would fix it.
• Reproducing could be tricky, but potentially easier using BrowserStack. If you can reproduce, then applying the changes in this PR and testing again, you should ideally see the issue fixed.

To ensure this causes no issues for slideshows not on mobile:

• Apply this PR using the Jetpack beta tester plugin on self-hosted (Jurassic Ninja or local), or a WoA test site. On Simple, sandbox a site and use the generated commands in the comment below to apply changes.
• Create a slideshow within a post. Ideally add a few Slideshows, some with portrait images and some with landscape. Set image sizes to 'large'
• Ensure that with the PR applied, the slideshow display is the same on the front-end as with trunk.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/jetpack-slideshow-aspectRatio-fallback branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/jetpack-slideshow-aspectRatio-fallback

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/plugins/jetpack/extensions/blocks/slideshow/swiper-callbacks.js	4/55 (7.27%)	-0.13%	1 ❤️‍🩹

Full summary · PHP report · JS report

[Copilot]

Pull request overview

This PR fixes an issue where slideshows stretch to the full parent container width on mobile devices when the parent ul element's height is not set. The fix adds a fallback to use a 16:9 aspect ratio when the image's natural dimensions are not available.

Key Changes:

• Added a check for valid naturalWidth and naturalHeight properties before calculating aspect ratio
• Falls back to a 16:9 aspect ratio when natural dimensions are unavailable or invalid

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
projects/plugins/jetpack/extensions/blocks/slideshow/swiper-callbacks.js	Adds validation for naturalWidth/naturalHeight and provides 16:9 fallback for aspect ratio calculation
projects/plugins/jetpack/changelog/fix-jetpack-slideshow-aspectRatio-fallback	Changelog entry documenting the bugfix

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

[coder-karen]

Testing this is proving difficult, primarily in terms of consistently replicating the issue in order to confirm changes fix it, and also that the site mentioned in the issue is Simple so testing the changes (proxied on mobile presumably) is not something I'm familiar with. I wonder if someone on the mobile team is able to reproduce the issue on mobile and confirm if the fix works for the site in question. I was able to confirm no changes to slideshow display for the site in question on desktop, but that is just confirming that unaffected slideshows aren't changed in anyway.

Also added @sgomes as I'm modifying the aspect ratio line you'd modified last year here, though in testing with the instructions here ( #43880 ) for a regular slideshow I see no issues introduced.

[sgomes]

Hey @coder-karen, sorry for the late reply!

Sorry for introducing the issue, I imagine it was a division by zero for images where, for whatever reason, the natural size properties don't get filled in?

These changes look good to me, as they align well with what I was trying to do with my previous work 👍 Thank you!