Attract user attention to the primary images in your emails with amp-image-lightbox
Written by
Kanika Sreen
Kanika Sreen
0

Subscribe for updates

Attract user attention to the primary images in your emails with amp-image-lightbox

Published : November 2, 2022 | Updated : May 23, 2024

Images are a proven way to evoke user interest in marketing emails. Whether it is to promote an apartment on sale or showcase a new product launch, images effectively draw attention.

Images you can interact with, are even more powerful. You’ve probably seen these at work on ecommerce websites. You see a series of images, choose one, and click on it. The image enlarges and jumps out at you. 

Wouldn’t you just love to offer a similar visual experience in your marketing emails?

You can, if you design an AMP email using the amp-image-lightbox component. 

Let us learn more about amp-image-lightbox, which makes images the hero of your emails.

1. What are the benefits of the amp-image-lightbox component?

It brings the image to the center of the page while darkening the background elements. Here is how you can bring interactivity into the images in your marketing AMP emails.

1.1. Bring out minute details

amp-image-lightbox makes little details on an image more evident. It blurs everything other than the primary picture and lets the user focus on the zoomed rendition. Use it cleverly to highlight images for products, reviews, features, on-sale items, and more.

Minute details-AMP lightbox

1.2. Boost product sales

The component allows you to add multiple images to a single email. You can even include a 360-degree view of clothes and accessories, popular holiday spots, machinery and equipment, and more. Give users a complete view of the product with enlarged images from different angles. It increases the information value, builds confidence in the product, and leads to conversions.

2. How to use the amp-image-lightbox component?

The amp-image-lightbox component provides a powerful, interactive, lightbox experience for a specified image.

Required Scripts: <script async custom-element=”amp-image-lightbox” src=”https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js”></script>

When the user clicks the image, the <amp-img> activates the <amp-image-lightbox> via the on action, which references the ID of the <amp-image-lightbox> element (i.e., lightbox1). The <amp-image-lightbox> then displays the image in the center of the full-viewport lightbox. Note: The amp-image-lightbox element must be empty and set to layout=nodisplay.

Among other things, the amp-image-lightbox allows the following user manipulations:

  • Zooming
  • Panning
  • Showing/hiding the description

And yes! You can certainly use the same amp-image-lightbox component for more than one image on the AMP email.

The ‘open’ action opens the image lightbox, with the source image being the one that triggered the action. Pressing the escape key on a keyboard closes the lightbox.

Optionally, you can display captions at the bottom of the viewport for the image. The <amp-image-lightbox> component determines the content for the caption as follows:

  • If the image is in a figure tag, the content of the <figcaption> displays for the caption.
  • If the image specifies an aria-described by attribute, the content of the element whose ID is specified by the aria-describedby attribute displays for the caption.

You can style the amp-image-lightbox component with standard CSS. You can also style some of the properties like background and color. The amp-image-lightbox-caption class is also available to style the caption section.

If you wish to learn more about the amp-image-lightbox component for email, visit amp.dev.

3. Variations of the amp-image-lightbox component

Use the attributes of the amp-image-lightbox component to simplify its use in emails.

3.1. Introduce a close button

You can use the data-close-button-aria-label to create a close button. The users can click on this to close the image lightbox in their email.

3.2. Complete the setup

There are two attributes for amp-image-lightbox that help you adjust the principal settings:

  • Id attribute: Sets the ID for the lightbox element used as a target for the image’s ‘on’ action
  • Layout attribute: Sets the display layout; it must be set to nodisplay

amp-image-lightbox is frequently combined with the amp-img and amp-carousel components to make the emails even more effective.

4. How can Netcore Cloud help you?

Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month on behalf of businesses across 12 countries. 

Netcore Cloud offers an enterprise-ready AMP editor that makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to build engaging AMP emails quickly. To customize further, you can connect with the in-house team of AMP experts to design AMP emails for specific use cases.

At Netcore Cloud, we help you set up and integrate AMP emails in as few as 10 days. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize the ROI of your email marketing campaigns. 

With Netcore Cloud’s help, 50+ global brands have rolled out interactive emails powered by AMP and achieved their goals. 

Netcore Cloud’s team partners with your marketing team to help you leverage the power of AMP emails and drive business revenue. Our experts share your brand KPIs and work as an extension to provide result-oriented solutions.

Connect with us to understand how you can benefit from our expertise and experience.

Experience the power of AMP emails firsthand
Create interactive emails in 3 simple steps using our no-code, drag-and-drop editor.
Footer request demo image
Written By: Kanika Sreen
Kanika Sreen
Assistant Manager - Content Strategist