Great News! Try our new tool to convert img to amp-img. Try Now!

Thursday, January 18, 2018

Create Image Gallery With Caption (Valid AMP)

Tutorial how to Create Image Gallery With Caption (Valid AMP) with AMP-CAROUSEL. (AMP-CAROUSEL CUSTOMIZED)

Create Image Gallery with Caption using AMP-Carousel

The amp-carousel component is great for making photo galleries. amp-carousel requires the height attribute to be determined first. JS from google AMP can be customized using images and captions displayed different sizes. 

This time, I will discuss amp-carousel and how to customize it. This tutorial will give you how to create image gallery plus image caption respectively. See example below:

1. The Power of Nature / SERGIO TAPIRO VELASCO

2. To Live / HIROMI KANO

3. CROCODILES AT RIO TARCOLES / TARUN SINHA

4. MARBLE CAVES / CLANE GESSEL

5. FOREST OF THE FAIRY / Y. TAKAFUJI

6. MT. BROMO / REYNOLD DEWANTARA

7. IN YOUR FACE / SHANE GROSS

8. BUFF TAILED CORONET / HYMAKAR VALLURI

9. WORKSHIP / DILEK UYAR

10. INTERESTING MOMENT / JULIUS Y

Attach JS amp-carousel in Blog Theme

To create an image gallery with a carousel style and valid AMP, you need an amp-carousel js that you have to put before the code </ head>.

<script async='async' custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

CSS AMP CAROUSEL WITH CAPTION

Next to create a style caption in your image gallery, copy this CSS code and paste it on amp-custom:


#carousel-with-preview amp-img {transition: opacity 1s ease-in-out;}
.carouselamp {background: #eee;margin: 16px 0;}
.carouselamp .slide > amp-img > img{object-fit: contain;}
.carouselamp .caption {position: absolute;bottom: 0;left: 0;right: 0;padding: 8px;background: rgba(0, 0, 0, 0.6);color: #ddd;font-size: smaller;max-height: 30%;
}
.selected {border-width: 1px;border-style: solid;}

MAKE IMAGE GALLERY WITH AMP-CAROUSEL

After all the above code is installed, for the final process is to make gallery in your article. Here is the code you should install when creating the article.


<amp-carousel class="carouselamp" layout="responsive" height="400" width="500" type="slides">

<div class="slide">

<amp-img src="IMAGE URL" layout="fill" alt="ALT IMAGE"></amp-img>

<div class="caption">

CAPTION

</div>

</div>

<div class="slide">

<amp-img src="IMAGE URL" alt='ALT IMAGE'></amp-img>

<div class="caption">

CAPTION

</div>

</div>

<div class="slide">

<amp-img src="IMAGE URL" layout="fill" alt="ALT IMAGE"></amp-img>

<div class="caption">

CAPTION

</div>
</amp-carousel>

Keterangan:
  • Change IMAGE URL with your image url.
  • Change ALT IMAGE as desired.
  • Change CAPTION with image caption that will overlay over the image.

Troubleshoting 

Please note that usually when you install the above gallery code will experience a little error when it is published. Usually, the error occurs because the closing code </ amp-carousel> is suddenly installed in the wrong place. So when the article publishes, display your blog error.

To resolve this issue, please correct it in the HTML writing mode when editing the article.


That's the article this time that discusses How to Create a Gallery with Valid AMP Captions. May be useful