Automattic / Automattic/jetpack
Carousel: images not displayed when a Tiled Gallery uses external images
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
#### Steps to reproduce the behavior
1. Add a tiled gallery to post/page
2. Publish post/page and click on the image.
#### What I expected to happen
Expected gallery to open in a carousel and images to appear.
#### What actually happened
1. Carousel opens but the image appears blank.
2. Console displays the following error.
#### Context
26991480-hc
### Browser / OS version
Tested in Firefox 84 & Chrome 87 / Mac OS Big Sir
### Is this specific to the applied theme? Which one?
Tested on Storefront, TwentyTwenty, Varia child themes. Does not appear to be theme specific.
### Does this happen on simple or atomic sites or both?
Both Simple and Atomic
### Is there any console output or error text?
```
Uncaught TypeError: e(...).data(...) is undefined
originalDimensions https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
bestFit https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
fitInfo https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
updateSlidePositions https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
selectSlide https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
selectSlideAtIndex https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
open https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jQuery 28
open https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jQuery 2
open https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jQuery 2
jetpack-carousel.min.js:3:19301
originalDimensions https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
bestFit https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
fitInfo https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
updateSlidePositions https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
selectSlide https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
selectSlideAtIndex https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
open https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jQuery 28
open https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jQuery 2
open https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jp_carousel https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
https://c0.wp.com/p/jetpack/9.3/_inc/build/carousel/jetpack-carousel.min.js:3
jQuery 2
```
### Level of impact (Does it block purchases? Does it affect more than just one site?)
Seems to affect all users with a gallery carousel on their site.
#### Screenshot / Video: If applicable, add screenshots to help explain your problem.

Contributor guide
Research direction
Reproduce the issue with a WordPress Tiled Gallery containing external images, then inspect the Jetpack carousel entry point and the originalDimensions path shown in the console trace. Confirm that the carousel displays each image and no longer reports the TypeError in Firefox and Chrome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php, wordpress
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100