How to add 'controls' attribute to 'amp-carousel' when using AMP plugin?

Question

I want to keep the buttons on the amp-carousel gallery always visible and that needs the controls attribute. Since I am using AMP official plugin, I don't know to add this attribute to the amp-carousel output since the plugin controls the output of that.

Answer 1

after some time trying to do the same as you asked i found a way to solve this question. hope that help you.

in your wordpress project on folder wp-content -> theme -> has file called functions.php.

you must hook the action amp_content_sanitizers using the function add_filter and implement your own function. but first you need create a new class that extends from AMP_Base_Sanitizer and override the method sanitize() like:

add a new file

file name ex: Custom_AMP_Carousel_Injection_Sanitizer.php

located at folder 'classes' inside you theme folder.

<?php

require_once( AMP__DIR__ . '/includes/sanitizers/class-amp-base-sanitizer.php' );

class Custom_AMP_Carousel_Injection_Sanitizer extends AMP_Base_Sanitizer {
    public function sanitize() {
        $ampCarouselNodeList = $this->dom->getElementsByTagName('amp-carousel');
        foreach($ampCarouselNodeList as $node){
            $node->setAttribute('controls', '');
        }
    }
}

in functions.php from your theme folder:

add_filter( 'amp_content_sanitizers', 'custom_amp_add_carousel_sanitizer', 10, 2 );
function custom_amp_add_carousel_sanitizer( $sanitizer_classes, $post ) {
    require_once( dirname(__FILE__) . '/classes/custom_amp_carousel_injection_sanitizer.php' );
    $sanitizer_classes['Custom_AMP_Carousel_Injection_Sanitizer'] = array();
    return $sanitizer_classes;
}

this also can help you:

https://amp-wp.org/documentation/how-the-plugin-works/amp-content-rendering-in-wordpress/

https://developer.wordpress.org/reference/functions/add_filter/

Answer 2

The way to add controls attribute in amp-carousel was defined in the documentation itself.

As described:

controls - Permanently displays left and right arrows for the user to navigate carousel items on mobile devices.

Here is an example of how it is implemented, example taken from the documentation.

<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"
  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <amp-img src="images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>