Jetpack: Carousel: error thrown in `originalDimensions` function
Steps to reproduce the issue
- Activate recommended features in Jetpack.
- Create new post and add a 1) Tiled Gallery and 2) a Gallery block in Gutenberg.
- Upload these two images. Add a long caption to the last one.
- Publish post and click one of the images to display the carousel.
What I expected
- The clicked image to be displayed correctly in the carousel.
What happened instead
- Carousel came up empty (both the image, caption, exif data).
- Site is halted and clicks on the carousel don't work because of a JS error.
- Console shows this JS error:
Uncaught TypeError: Cannot read property 'split' of undefined
at a.fn.init.originalDimensions (jetpack-carousel.min.js?ver=20190102:4)
at a.fn.init.e.fn.jp_carousel (jetpack-carousel.min.js?ver=20190102:4)
Which seems to originate from the originalDimensions function:
Screenshots
keoshi
All 21 comments
I can't seem to reproduce right now, with the same images.
Was there any other plugin installed on the site? Can you reproduce with other images? Were there any issues when you uploaded the images?
jeherve
on 24 Jan 2019
@jeherve No other plugins installed. The post I was testing this on had a tiled gallery on it as well, but that's it.
You can see it here: https://unaware-water-10.jurassic.ninja/2019/01/24/testing-carousel/
keoshi
on 24 Jan 2019
And boom, site is gone. Did you manage to test it out before it went dark, @jeherve ? That's why I didn't add a link on it on the original issue.
keoshi
on 24 Jan 2019
oh sorry, I was looking at another issue! :(
Can you reproduce with a brand new site now?
jeherve
on 24 Jan 2019
No worries, @jeherve — will try to reproduce and report back.
keoshi
on 24 Jan 2019
@jeherve Yep, managed to reproduce here: https://marxist-caribou.jurassic.ninja/2019/01/24/testing-galleries/
It seems that this error is only triggered when a simple gallery is used in tandem with a tiled gallery block. As you can see it doesn't happen with just the gallery block: https://marxist-caribou.jurassic.ninja/2019/01/24/testing-carousel-with-simple-gallery/
keoshi
on 24 Jan 2019
Excellent, nice catch!
Related: #8033, #6638
jeherve
on 24 Jan 2019
So I've been looking into this as it's been causing issues (see p58i-7RD-p2#comment-42220). It turns out that we're missing a check for the data-orig-size attribute here:
This is causing a JS error to be thrown which causes the UI to freeze up.
This attribute appears to be added here
https://github.com/Automattic/jetpack/blob/master/modules/carousel/jetpack-carousel.php#L503
...which if you trace it back gets its data from a call to wp_get_attachment_metadata() here
https://github.com/Automattic/jetpack/blob/master/modules/carousel/jetpack-carousel.php#L455
However, if the image is not stored on the site there is no attachment. How can this happen? If you take a set of blocks and paste them into the editor (or insert them via code) then it's perfectly possible to have a gallery referencing images from another site.
You should also read p58i-7RD-p2#comment-42252.
So
- We should add a check for
origSizein the JS to avoid the crash. - Should/could we use a fall back set of dimensions?
- How do we handle images that are not stored on the site directly?
getdave
on 8 Jul 2019
Got the same problem here. Externally hosted images, the only one working in the carousel is the wider image at the bottom. Others don't show up and show the same Javascript error mentioned above.
Silox
on 10 Jul 2019
Another report in #16986623-hc possibly related to externally hosted images.
katiebethbrown
on 30 Nov 2019
User in 2792313-zen gets this same error but does not seem to have externally hosted images.
aheckler
on 16 Mar 2020
Another report in #3244831-zen
lakellie
on 21 Aug 2020
I noticed the same issue on https://docs.woocommerce.com/document/woocommerce-blocks/#section-2 where you can click any of the images in the gallery.
The only way I was able to reproduce it at this point in time is by adding a Gallery Block with one image, switching to Code Editor, and removing this set of 4 attributes for the <img> element (here is the video):
data-id="158" data-full-url="https://mystore123456789.wpcomstaging.com/wp-content/uploads/2020/09/Best-Selling-Products-Block-Settings-1.png" data-link="https://mystore123456789.wpcomstaging.com/?attachment_id=158" class="wp-image-158"
So possibly this has been somehow addressed in the latest versions of Gutenberg (which updated the Gallery Block)? I noticed that the issue is present when Gallery Block has no Image size section in the sidebar in the Editor. When that section is present (which is the case for any Gallery Block you add with the most recent version of Gutenberg), then the issue cannot be reproduced.
| Old Gallery Block | Current Gallery Block |
| ------------- | ------------- |
| |
|
For Gallery Blocks added in the past, <img> didn't have the attributes data-link and data-full-url. Here's how a Gallery Block looks in the Code Editor when added today versus last year:
| Old Gallery Block | Current Gallery Block |
| ------------- | ------------- |
| <!-- wp:gallery {"ids":[945]} --><figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://atrumtest03.files.wordpress.com/2019/10/wp-image-1419139768jpg.jpg?w=800" alt="" data-id="945" class="wp-image-945"/></figure></li></ul></figure><!-- /wp:gallery --> | <!-- wp:gallery {"ids":[158]} --><figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://mystore123456789.wpcomstaging.com/wp-content/uploads/2020/09/Best-Selling-Products-Block-Settings-1-844x1024.png" alt="" data-id="158" data-full-url="https://mystore123456789.wpcomstaging.com/wp-content/uploads/2020/09/Best-Selling-Products-Block-Settings-1.png" data-link="https://mystore123456789.wpcomstaging.com/?attachment_id=158" class="wp-image-158"/></figure></li></ul></figure><!-- /wp:gallery --> |
I hope these bits help in any way.
zdenys
on 5 Sep 2020
Encountered another case of this on a WP.com site in #24528170-hc / #3364177-zen
Recreated on this test page by copying the code over.
Is there a workaround to get it working now, or any way to avoid this?
Console error:
donalirl
on 1 Oct 2020
Also reported in 23458609-hc
The workaround we used was to disable Carousel in admin.php?page=jetpack#/writing. Not ideal, but it worked for this particular case.
eduardozulian
on 1 Oct 2020
Also seeing this on https://docs.woocommerce.com/document/log-into-woocommerce-com-with-wordpress-com/
GeoJunkie
on 28 Oct 2020
An additional note on this one ^
The carousel was deactivated pending this bugfix, but when it's activated, it works fine if you're logged in to the site, but not if you're logged out.
GeoJunkie
on 29 Oct 2020
A customer reported this issue this week and I was able to reproduce it here:
https://melissasgutenbergteststuff.blog/gallery-variations/
The very first gallery image with the caption "lone gallery image"
Note that it is not a long caption and no externally hosted images.
I see this issue was reported in January 2019 almost 2 years ago, do we have any fix coming or a workaround? I notice this does not happen with the Tiled Gallery block.
msilbers
on 1 Nov 2020
Another report in 25432752-hc
Disabling carousel fixed the issue
carladoria
on 5 Nov 2020
Another report in 3740078-zd-woothemes
bsanevans
on 19 Feb 2021
Just had this also happen to a friend of mine -- tracked down to this method:
and one other location (not specifically causing this error, but the same pattern) where it could cause an error where orig-size isn't specified:
In that file it looks like in other areas we're handling a lack of orig-size a couple places:
Idea resolution should (in my opinion) be two-fold:
1) Find cases where orig-size isn't added to the src (this seemed to be in a gallery block), and see if we can filter it to add that data attribute in as well,
2) Make the js more resilient so it has some sort of fallback code path if orig-size isn't available.
georgestephanis
on 14 Apr 2021
Related issues
jeherve
·
3Comments
tyxla
·
3Comments
dougaitken
·
3Comments
NicktheGeek
·
3Comments
kevinlisota
·
3Comments
Most helpful comment
An additional note on this one ^
The carousel was deactivated pending this bugfix, but when it's activated, it works fine if you're logged in to the site, but not if you're logged out.