AMP Carousel html being removed by post editor

Resolved stevenbradley
(@stevenbradley)

1 year, 10 months ago
When I add the AMP carousel code to the editor for a post in text view and toggle to visual, then go back to text view the code is gone. The surrounding <amp-carousel>
tag is just gone, but the inner contents (the inner tags) remain.

How do I properly add an amp-carousel tag to a post? because this get’s removed:
```
<amp-carousel id="xlsider"
  width="100%" 
  height="150"
  layout="responsive"
  type="slides"
  loop 
  autoplay
  delay="4000" 
  role="region"
  aria-label="Basic carousel"       
>
```
INNER TAGS / CONTENT

</amp-carousel>
- This topic was modified 1 year, 10 months ago by stevenbradley.

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Support Milind More
(@milindmore22)

1 year, 10 months ago

Hello @stevenbradley

Thank you for contacting us, this might be because the <amp-carousel> tag is not allowed. you can add the tags using the wp_kses_allowed_html filter.

We will recommend creating an amp-carousel using the WordPress gallery

eg: Use WordPress gallery shortcode with attribute lightbox=”true” and amp-carousel=”true”

[gallery ids="761,760,759,758" lightbox="true" amp-carousel="true"]

I hope this helps!
Plugin Author Weston Ruter
(@westonruter)

1 year, 10 months ago
Or if you’re not using carousel to create a gallery, you can also just add a filter that ensures that amp-carousel is not removed from post content. Something like this:
```
add_filter( 'wp_kses_allowed_html', static function( $tags ) {
    $tags['amp-carousel'] = array_fill_keys( [ 'width', 'height', 'layout', 'type', 'loop', 'autoplay', 'delay', 'role', 'aria-label' ], true );
    return $tags;
} );
```
- This reply was modified 1 year, 10 months ago by Weston Ruter.
Thread Starter stevenbradley
(@stevenbradley)

1 year, 10 months ago

Since I’m using the carousel to show text I went with the filter option in functions.php, but the carousel is still being dynamically removed from the post editor. We are using the classic editor, would that make any difference? Should I add the carousel via short code?

Plugin Author Weston Ruter
(@westonruter)

1 year, 10 months ago

It could be that TinyMCE (classic editor) is corrupting the custom element. Injecting the carousel via a shortcode would work.

Thread Starter stevenbradley
(@stevenbradley)

1 year, 10 months ago

I added the shortcode which does add the AMP carousel code but the same issue is happening where the containing amp-carousel tag is removed leaving the inner HTML tags.
The filter to allow the AMP carousel tag is also in place in my functions file. Might have to just go with the gallery to create the carousel, and make the text images as a work around.

Plugin Support Milind More
(@milindmore22)

1 year, 10 months ago

@stevenbradley
I hope adding content to the amp-img resolved your issue, As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Thread Starter stevenbradley
(@stevenbradley)

1 year, 10 months ago

None of the suggestions seemed to work including adding the gallery shortcode which just showed the images inline on the screen.

Just puzzled why any AMP tags are off limits and not allowed to be added to pages by people. You should allow all tags in AMP. Bad enough AMP is limiting in it’s choices of dynamic elements to accomplish certain tasks. Limiting those limited elements leaves us with essentially nothing.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘AMP Carousel html being removed by post editor’ is closed to new replies.