This article demonstrates how to disable the automatic AMP Lightbox on AMP-IMG on multiple levels on WordPress.
Quick Navigation
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".
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.
|
1 2 3 4 5 6 7 |
<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> |
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:
|
1 2 3 4 5 |
<section data-amp-auto-lightbox-disable> <amp-img>...</amp-img> <amp-img>...</amp-img> <amp-img>...</amp-img> </section> |
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.
|
1 2 3 |
<body data-amp-auto-lightbox-disable> <!-- All AMP-IMGs will have auto-lightbox disabled --> </body> |
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.
Versions:
WordPress 5.5.3
AMP 2.0.5