Learning AMP: Disabling AMP-IMG Lightbox — AMPire.city

Originally published at https://ampire.city

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;

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>

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>

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.

Useful links:

Versions:
WordPress 5.5.3
AMP 2.0.5

Originally published at https://ampire.city on November 2, 2020.

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store