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:
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