How to Disable Automatic AMP Lightbox on AMP-IMG

What Will I Learn?

This article demonstrates how to disable the automatic AMP Lightbox on AMP-IMG on multiple levels on WordPress.

Requirements:

  • AMP for WordPress plugin;
  • Basic CSS & HTML knowledge;

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

The Issue

Actually, auto-lightbox is actually not a bug but a feature, though it can be as annoying if you don’t know that. It works great on many instances and improves UX on many pages, especially blog posts and articles. While it works great on those occasions, it can provide a terrible UX with auto-lightbox enabled on unnecessary AMP images, like design elements. As you might have already noticed, the issue occurs once amp-img gets this action on="tap:lightbox1".

Disable Auto-Lightbox on AMP-IMG

First, I personally agree that auto-lightbox is rather more useful than harmful, thus having this feature enabled is great. Nevertheless, on all of AMP websites I’ve developed so far, I had to add some exceptions. Luckily, disabling auto-lightbox on amp-img is a very easy thing to do. All we have to do is to add this attribute data-amp-auto-lightbox-disable to the desired element.

<amp-img data-amp-auto-lightbox-disable
    src="/img/ampire.city.svg"
    height="3"
    width="4"
    layout="responsive"
    alt="amp-img with disabled auto-lightbox">
</amp-img>

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Disable Auto-Lightbox on Multiple AMP-IMG

Further on, if you need multiple amp-img elements to have auto-lightbox disabled, you’ll have to add data-amp-auto-lightbox-disable to the parent element, wrapping all the images you want to affect. Personally, I use this option on my home page, but have auto-lightbox enabled on the rest of the AMPire.city website. It should look something like this:

<section data-amp-auto-lightbox-disable>
    <amp-img>...</amp-img>
    <amp-img>...</amp-img>
    <amp-img>...</amp-img>
</section>

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Disable Auto-Lightbox on Whole Website

Lastly, if you want to disable auto-lightbox on the whole website just add data-amp-auto-lightbox-disable attribute to the <body> tag. This is the fastest solution, but it will disable auto-lightbox on the elements, where it should be desired, if you are to follow the best UX practises.

On WordPress theme, 9/10 times you’ll have to edit header.php template file, which could be found on the main directory of the theme.

<body data-amp-auto-lightbox-disable>
    <!-- All AMP-IMGs will have auto-lightbox disabled -->
</body>

Need Help?

To wrap things up, ff you don’t know how to access your theme’s files, maybe you shouldn’t try to develop AMP WordPress website yourself. I recommend considering hiring AMP professional developer.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Useful links:

Versions:
WordPress 5.5.3
AMP 2.0.5

Happy Clients

Enjoying ultra-fast mobile-first AMP websites for their competitive businesses.