In our everyday life, we somehow got used to the Internet and to all of the benefits coming with having constant access to it – on our desktop/laptop computers and especially – on the mobile devices which we always carry around with us. It has become so essential part of our life that we take it as one of the necessary conditions for living – like the electricity and the clean water in the sink.
Additionally, along with the mobile friendly web design becoming a standard, there are these projects from the Internet giants like Facebook or Google trying to bend the markup into some tailor made branches made especially for working with assets provided by them and on their servers as maybe a kind of territory war along The Net. They claim to do it in order to provide the regular user with low and mid class mobile device and more or less limited data plan, fast and quality access to the content that publishers want to share – all they have to do to take benefit is recreate their pages in a way following the vendors requirements. What stands among these projects is the so called AMP or Accelerated Mobile Pages standard, developed and therefore pushed up by Google – a way of creating stripped down HTML with no stylesheets and external scripts but the ones provided by the big G for handling it.
On the other hand what the regular user actually cares about – content. Being a user at least half of the time we just need the access to the information we need and the images following it, since as we well know, an image is worth a thousand words. When it comes to text, the implementation of it, of course, is quite easy, but how about the pics? How can a picture be showcased in a gallery within AMPs? Let's take a look.
When it comes to the term image gallery, we guess the first association in user's head is the so called tiled gallery where you have all those small images at a glance and can freely click on either of them you find interesting and see it filling up the viewport in a lightbox with some convenient controls aside letting you navigate to the previous or next image if needed. In AMP things are working a bit differently – you can have a single image displayed in a lightbox via the amp-image-lightbox additional component but it concerns the particular image and this image only – you can't set them in a stack and navigate between them within the lightbox itself. Stated this way it turns out in order to have some kind of a regular gallery you need to include your images in page's markup defining a few additional attributes to them telling the browser when the image is clicked or tapped it should trigger the lightbox displaying it. Of course, you also need to create the lightbox element as well – luckily one of them can handle multiple images so a single lightbox element per a page is enough for all
of the images to get displayed a bit larger when needed.
In order to use the amp-image-lightbox element you first need to call the script from the AMP library (as we discussed before – the only script library permitted by the AMP validation rules). To do so you'll need to include this line in your page's <head> tag
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Once this is done – just include your images in the page using the amp-image tag instead of the regular <div class="img"><img></div> adding some extra attributes to them like on="tap: ~lightbox id here, no # ~", role="button" and tabindex="0" along with the other attributes you might want to include concerning the image's layout and the appearance on the AMP page while it's not clicked. You need to do this for all of the images intended to be capable of being displayed in a lightbox later on.
Next, of course, the lightbox element itself should be defined. To do so you need to include an amp-image-lightbox tag in your markup adding it the same id attribute defined with the images and setting its layout to nodisplay in order to hide it from the page until an image is clicked.
What this routine will produce as a result - each of the images mentioned above with click or tap will take all the viewport as we got used to in the tiled galleries. The difference is we need to click away to hide it and manually click on the next one we might want to take a closer look at in order to have it in a lightbox again.
Additionally, some captions to the images could be added – for this just wrap the image into a <figure> tag and place a <figcaption> underneath it – the caption will display both on the page and in the lightbox. Alternative way of achieving this is adding aria-describedby=" ~ the description wrapper id here ~ " attribute to the image (without wrapping it in <figure> ) and placing a regular div with the proper id next to it wrapped around the text you need to be displayed.
That's pretty much the way you can get an appearance and behavior, not like the regular lightbox galleries the regular user is used to, but something close to it.
In our point of view, AMP image gallery rather looks like the image sliders we got used to see utilizing the amp-carousel additional component combined with a few others like amp-fit-text, amp-selector and amp-bind. What they are offering us to do is this:
First of all, all of those additional components should be, of course, included in the page's <head> so we can use them.
The script tags needed are:
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> - for the carousel
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script> - for the amp-fit
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script> - for amp-selector
and
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> for amp-bind
Once this has been done, in order to have what they call an image gallery and looks rather like slider we need to create an amp-carousel element with the class carousell assigned to it, appropriate height and width attributes to define its proportions only since we'll also assign layout="responsive" and finally - type="slides"
Next we need to define the slides to be held within wrapping the images and their captions in <div class="slide"> elements.
Inside of them an ordinary amp-image takes place followed from either an amp-fit-text element for the caption with layout="responsive" with predefined dimensions to set the aspect ratio which will always try to shrink the text to fit the space available.
This text displays under the image so if you go for that – make sure you experiment a bit with the dimensions you assign to the master wrapper – the amp-carousel element and the caption, in order to also have the image evenly spreading to the edges of its container and not being reduced down from the caption, pushing it up.
Also, we can have a <div class="caption"> which will render in a semi-transparent element overlaying the image itself, which might be the better way to go concerning space utilization but in the case of far too long descriptions, we actually risk, hiding the image.
Both ways are correct and will get verified and which one will be most appropriate to pick for the particular situation is up to your decision.
The usual experience appears to be this:
The amp-image-lightbox is activated applying on action on the amp-img element by referencing the lightbox component's ID. As turned on, it settles the picture in the midpoint of the full-viewport lightbox. Notice that just about any amount of pictures in the post can easily make use of the exact same amp-image-lightbox. The amp-image-lightbox component itself need to be empty and have layout= nodisplay set.
The amp-image-lightbox as well have the ability to additionally showcase a caption for the pic at the lowest part of the viewport. The caption is explored just as following:
1) The elements of the <figcaption> feature as soon as pic is in the figure tag.
2) The materials of the component whose ID is actually specified by the pic's aria-describedby attribute.
Within other details, the amp-image-lightbox authorizes the following user controls: zooming capability, panning, showing/ covering up of the description. Pushing the escape key on the keyboard will definitely close the lightbox.
The amp-image-lightbox feature can possibly be styled with common CSS. A number of the features that can possibly be styled are simply background and color.
The amp-image-lightbox-caption class is additionally obtainable to style the title element.
The amp-image-lightbox displays the following acts you can certainly employ AMP on-syntax to trigger :
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="image1" width=200 height=100></amp-img>
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>layout: Needs to be designated to nodisplay.
data-close-button-aria-label: Extra string operated as ARIA label for the close switch.
Basically, these are the ways a one could use in order to present some imagery content on AMP page with AMP Footer and AMP Map. It's not perfect, but at least it is something and in case you were wondering how it gets done – now you know.
Actually, considering the single gallery thumbnails will most probably display spreading to display's horizontal borders anyway since it's small devices, talking about wrapping them in a slider might indeed be the better approach since this will also grant a bit better utilization of the space available and if we need user to have a glance at all of the images, we guess we'll just need to include them as a regular images.
Of course, it all depends on the particular page and the effect we're seeking to achieve on the people visiting it.