Carousel: images not displayed when a Tiled Gallery uses external images #18362

joweber123 · 2021-01-14T03:00:56Z

Steps to reproduce the behavior

Add a tiled gallery to post/page
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

Carousel opens but the image appears blank.
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
    <anonymous> 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
    <anonymous> 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.

The text was updated successfully, but these errors were encountered:

joweber123 · 2021-01-14T03:27:13Z

I do not believe this is the same issue but will reference it here if it is helpful to track down the cause.

#11191

tjcafferkey · 2021-01-14T11:30:27Z

This issue looks like it's definitely related to #11191 in some way.

Unfortunately I am unable to reproduce this exact error. However using similar images in terms of file size I was able to come across some issues with the Bulk Uploader but I am not able to consistently reproduce this bug either.

Due to the images referenced in the HC of the issue description, one thing that stands out is the size of the images as they're extremely large but again all attempts to reproduce the original issue have failed. I wonder if this issue would persist if the images we downsized, compressed and reuploaded?

cathymcbride · 2021-01-14T14:44:19Z

Internal repro here: p1muIj-837-p2 no luck reproing from scratch yet

aleone89 · 2021-01-14T17:25:49Z

This has come up in the public forums here - the console shows these errors: https://d.pr/i/1F7QA7 (same as #11191)

Something I also identified is that the image being displayed in the gallery (an ordinary gallery block) - https://tepe68blog3.wordpress.com/2020/12/22/rosabell-laurenti-sellers/ isn't present into the media gallery.

lsl · 2021-01-15T01:58:24Z

Repro here: https://test79088093.wordpress\.com/portfolio/ (using a page layout / pattern content)

Narrowed this down to this $attachments array being empty. The jQuery error we see above results when data-orig-size=.. doesn't get set along with other image attributes. These are only set when attachments are found.

The $selected_images array is not empty and looks correct in my example.

The images in this example are not present in the media library. Likely because it's example content that uses image urls for the content from the pattern source site.

For example, in this test post I used images directly from the media library and everything works fine: https://test79088093.wordpress\.com/19-2/

I'm not sure where the fix belongs, @jeherve - do you think Jetpack needs to handle the hotlink usecase? It's probably out of scope but we might be able to at least get it to gracefully handle the situations (loop on selected images instead of attachments and add defaults where we can).

cc @andrewserong / @apeatling as maybe ya'll have a better idea / and or want to take this issue on. e.g. copying images over to the media library and using those in the pattern content instead. (not easy I know)

jeherve · 2021-01-15T07:46:45Z

That's an interesting one. Jetpack definitely should handle this use-case better, it would be worth moving this issue to the Jetpack repo. I'l do that now.

The images in this example are not present in the media library

Do you think you could add some steps to follow to create a tiled gallery, or a core gallery, using images that are not in the Media Library? I did not know that was possible :)

joweber123 · 2021-01-16T06:24:02Z

Do you think you could add some steps to follow to create a tiled gallery, or a core gallery, using images that are not in the Media Library? I did not know that was possible :)

If a page template is used in WordPress.com, the images are not added to the Media Library.

Alternatively, if I copy a tiled gallery block from the editor of one site and paste that into another site, the images are also not added to the Media Library.

jeherve · 2021-01-18T11:05:17Z

If a page template is used in WordPress.com, the images are not added to the Media Library.

Ah, that's interesting. That seems like a bug. I believe images were side-loaded since Automattic/wp-calypso#34823 and Automattic/wp-calypso#34839, so I would recommend creating an issue in the Calypso repo about this.

if I copy a tiled gallery block from the editor of one site and paste that into another site, the images are also not added to the Media Library.

That's another interesting edge-case. Thank you, that should help us reproducing and when testing a fix.

simison · 2021-02-23T12:14:33Z

@jeherve we've decided that it's better UX and better use of customers hosting space if we don't populate the media gallery with demo-images, as we expect customers to anyway replace those images with their own.

That said, I don't see why the Jetpack Carousel shouldn't work for external images and this definitely is still a bug. Customers can add external images to the image block just fine manually as well.

@apeatling added to View backlog for your consideration, let us know if you'd prefer not to have this. :-)

cc @sgomes in case this is after recent carousel jQuery refactoring?

sgomes · 2021-02-23T12:28:37Z

@simison : The first stage of the carousel refactoring is only live in wpcom, and hasn't made its way into Jetpack yet. So if the issue is showing up in atomic, it's likely unrelated.

Per the discussion above, the issue appears to be that certain data attributes are expected, but are not being populated for these images.

apeatling · 2021-03-09T17:13:58Z

Marked this issue in a note as part of a bigger carousel rethink.

yansern · 2021-09-08T13:54:35Z

This is no longer replicable. With all the rework being done in Carousel I think this is no longer and issue.
See commit history: https://github.com/Automattic/jetpack/commits/master/projects/plugins/jetpack/modules/carousel/jetpack-carousel.js

aleone89 · 2023-06-09T09:28:28Z

Hey there,

I've just come across this bug twice on two simple sites. The first incident can be found here:

https://wordpress.com/forums/topic/subscribers-137/?view=all (using images loaded into the sites media library)

The second can be found here:

https://wordpress.com/forums/topic/bug-in-gallery-widget/ (using external images)

When clicked, the console displays these two errors in both of these sites here:

Uncaught TypeError: Cannot read properties of undefined (reading 'closest') at Object.closest (??-eJyNUNFuAjEM+6GVaNNAe5n2KajXBmhpmlOTHvv8BcQdE0JsfapjO24Np9EFropVIQtEnFLA8XuV5QWMSjWUHlHO3IEnbOkidVlWlOojlY9GuMG334I5YSx9n6qAHpDQEdZ+ttzQvZ66my0ZdfTheMVAzBW2FgxDTyVC8I27YFl08+DRM/5Ye51tJ6yRG/iuTF41hUW940ZWVhKFoXA4CkwJT09illaMD0zu1tJ/PORFsdnNabN4eWKav+0uOXfQfF/0+br5WL9v3uzkH2snvrk=:722:1408) at H (??-eJyNUNFuAjEM+6GVaNNAe5n2KajXBmhpmlOTHvv8BcQdE0JsfapjO24Np9EFropVIQtEnFLA8XuV5QWMSjWUHlHO3IEnbOkidVlWlOojlY9GuMG334I5YSx9n6qAHpDQEdZ+ttzQvZ66my0ZdfTheMVAzBW2FgxDTyVC8I27YFl08+DRM/5Ye51tJ6yRG/iuTF41hUW940ZWVhKFoXA4CkwJT09illaMD0zu1tJ/PORFsdnNabN4eWKav+0uOXfQfF/0+br5WL9v3uzkH2snvrk=:722:16560) at C (??-eJyNUNFuAjEM+6GVaNNAe5n2KajXBmhpmlOTHvv8BcQdE0JsfapjO24Np9EFropVIQtEnFLA8XuV5QWMSjWUHlHO3IEnbOkidVlWlOojlY9GuMG334I5YSx9n6qAHpDQEdZ+ttzQvZ66my0ZdfTheMVAzBW2FgxDTyVC8I27YFl08+DRM/5Ye51tJ6yRG/iuTF41hUW940ZWVhKFoXA4CkwJT09illaMD0zu1tJ/PORFsdnNabN4eWKav+0uOXfQfF/0+br5WL9v3uzkH2snvrk=:722:21103) at T.a.onload (??-eJyNUNFuAjEM+6GVaNNAe5n2KajXBmhpmlOTHvv8BcQdE0JsfapjO24Np9EFropVIQtEnFLA8XuV5QWMSjWUHlHO3IEnbOkidVlWlOojlY9GuMG334I5YSx9n6qAHpDQEdZ+ttzQvZ66my0ZdfTheMVAzBW2FgxDTyVC8I27YFl08+DRM/5Ye51tJ6yRG/iuTF41hUW940ZWVhKFoXA4CkwJT09illaMD0zu1tJ/PORFsdnNabN4eWKav+0uOXfQfF/0+br5WL9v3uzkH2snvrk=:722:20263)

sophiegyo · 2023-06-12T08:31:02Z

Just to note, the gallery mentioned in https://wordpress.com/forums/topic/bug-in-gallery-widget/ is actually a regular gallery, not a tiled gallery specifically.

airdrummer · 2023-06-23T12:30:06Z

i have the same issue when enabling image load speedup: the gallery display is blank. on inspection, the carousel links are missing parameters:

https://i0.wp.com/cardinalglen.org/wp-content/uploads/2023/06/IMG_1651.gif

404s, but the inspector also shows:

https://i0.wp.com/cardinalglen.org/wp-content/uploads/2023/06/IMG_1651.gif?w=394&h=289&ssl=1

which does load…see https://cardinalglen.org/buckbrosbreakfast/

work-around: disable carousel;-{

jeherve transferred this issue from Automattic/wp-calypso Jan 15, 2021

matticbot added the Customer Report Issues or PRs that were reported via Happiness. aka "Happiness Request", or "User Report" label Jan 15, 2021

jeherve changed the title ~~Gallery Carousel Does Not Display Images~~ Carousel: images not displayed when a Tiled Gallery uses external images Jan 15, 2021

jeherve removed the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Jan 18, 2021

joweber123 mentioned this issue Jan 23, 2021

Page Template and Block Pattern images not added to Media Library Automattic/wp-calypso#49225

Closed

yansern closed this as completed Sep 8, 2021

aleone89 reopened this Jun 9, 2023

miksansegundo mentioned this issue Jul 25, 2024

MU WPCOM: Port the starter-page-templates feature from ETK #38475

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Carousel: images not displayed when a Tiled Gallery uses external images #18362

Carousel: images not displayed when a Tiled Gallery uses external images #18362

joweber123 commented Jan 14, 2021

joweber123 commented Jan 14, 2021 •

edited

Loading

tjcafferkey commented Jan 14, 2021 •

edited

Loading

cathymcbride commented Jan 14, 2021

aleone89 commented Jan 14, 2021

lsl commented Jan 15, 2021

jeherve commented Jan 15, 2021

joweber123 commented Jan 16, 2021

jeherve commented Jan 18, 2021

simison commented Feb 23, 2021 •

edited

Loading

sgomes commented Feb 23, 2021

apeatling commented Mar 9, 2021

yansern commented Sep 8, 2021

aleone89 commented Jun 9, 2023 •

edited

Loading

sophiegyo commented Jun 12, 2023

airdrummer commented Jun 23, 2023 •

edited

Loading

Carousel: images not displayed when a Tiled Gallery uses external images #18362

Carousel: images not displayed when a Tiled Gallery uses external images #18362

Comments

joweber123 commented Jan 14, 2021

Steps to reproduce the behavior

What I expected to happen

What actually happened

Context

Browser / OS version

Is this specific to the applied theme? Which one?

Does this happen on simple or atomic sites or both?

Is there any console output or error text?

Level of impact (Does it block purchases? Does it affect more than just one site?)

Screenshot / Video: If applicable, add screenshots to help explain your problem.

joweber123 commented Jan 14, 2021 • edited Loading

tjcafferkey commented Jan 14, 2021 • edited Loading

cathymcbride commented Jan 14, 2021

aleone89 commented Jan 14, 2021

lsl commented Jan 15, 2021

jeherve commented Jan 15, 2021

joweber123 commented Jan 16, 2021

jeherve commented Jan 18, 2021

simison commented Feb 23, 2021 • edited Loading

sgomes commented Feb 23, 2021

apeatling commented Mar 9, 2021

yansern commented Sep 8, 2021

aleone89 commented Jun 9, 2023 • edited Loading

sophiegyo commented Jun 12, 2023

airdrummer commented Jun 23, 2023 • edited Loading

joweber123 commented Jan 14, 2021 •

edited

Loading

tjcafferkey commented Jan 14, 2021 •

edited

Loading

simison commented Feb 23, 2021 •

edited

Loading

aleone89 commented Jun 9, 2023 •

edited

Loading

airdrummer commented Jun 23, 2023 •

edited

Loading