Add attributes in amp-carousel

[rsmith4321]

Feature description

When creating a gallery block and selecting the show as carousel option. Is there any way to add some attributes such as autoplay, delay and loop to the tag? I’ve done this by adding the html manually. But it would be much easier if there was a way I could do this using a gallery block. The attributes are listed here https://amp.dev/documentation/components/amp-carousel/ Thanks!

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

There isn't at the moment, without hacking around.

However, it would probably be better to use a block specific for this slideshow purpose. Have you tried the Slideshow block from Jetpack?

Rather than decorating core blocks with AMP-specific functionality, going forward it will be preferred to use existing AMP-compatible block plugins to provide that functionality.

[rsmith4321]

Thanks, I will try that. I didn't know Jetpack blocks were amp compatible. However I really would prefer not installing the full Jetpack. Would you have even a hacky way I could just add the attributes to a single gallery. Currently I'm adding the gallery block, getting all the generated html/amp code, then copy and pasting it into a html block and adding the attributes. It works fine, just if I ever want to change the images I have to do the process again. Thanks for the great support!

[westonruter]

A good part of Jetpack is AMP-compatible, and all of it should be made compatible in the next several months. You could just activate the one module you need for getting access to the gallery block.

I hesitate to recommend hacking around with the core Gallery block because the hacks will be more brittle than using a block dedicated for that purpose.

Alternatively, there is a Carousel block in the CoBlocks plugin which should be made AMP-compatible soon.

[rsmith4321]

I actually tried the Jetpack gallery and it does exactly what I wanted, thanks for the help. By the way, would it be possible to update to the new v0.2 of the amp-carousel? I notice the sliding animation is much better in the new version. However if I try to update manually just by adding the script myself I get random missing images in the carousel. There seems to be a bug with the jetpack gallery and new version of amp-carousel. Thanks!

[westonruter]

@rsmith4321 The bump to 0.2 is coming with v1.5: #3115

In the meantime, here's how you can bump it yourself: #3700 (comment)

[rsmith4321]

Thanks! Sorry I know how frustrating it is to answer questions that have already been answered I should have searched about that.

[rsmith4321]

I've added v0.2 using the script you provided. I'm very consistently getting missing images in the carousel. After scrolling through the entire gallery and repeating the image will appear. This doesn't happen with v0.1. It seems to happen randomly I think it's an image lazyloading issue. Watching the network tab in chrome I see the image load, but it's blank in the carousel. I've got it live on my site using the Jetpack Gallery if you could check it out https://www.ryansmithphotography.com

[westonruter]

@rsmith4321 Could you be observing ampproject/amphtml#27036? If so, please add your details to that upstream AMP issue.