Support » Plugin: AMP » AMP Carousel html being removed by post editor

  • Resolved stevenbradley

    (@stevenbradley)


    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>

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Milind More

    (@milindmore22)

    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)

    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 2 weeks, 6 days ago by Weston Ruter.
    Thread Starter stevenbradley

    (@stevenbradley)

    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)

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

    Thread Starter stevenbradley

    (@stevenbradley)

    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)

    @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)

    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)
  • You must be logged in to reply to this topic.