Membuat Image Gallery dengan Caption valid AMP

Membuat Image Gallery dengan Caption menggunakan AMP-Carousel

Komponen amp-carousel sangat bagus untuk galeri foto. amp-carousel membutuhkan atribut height yang akan ditentukan terlebih dahulu. JS dari google AMP ini bisa dicustomize mengggunakan gambar dan caption yang ditampilkan berbeda ukurannya.

Kali ini, saya akan membahas mengenai amp-carousel beserta cara customize nya. Tutorial ini akan memberikan cara membuat gallery gambar ditambah dengan caption gambar masing-masing. Lihat contoh di bawah ini:

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

MEMASANG JS amp-carousel

Untuk membuat image gallery dengan gaya carousel dan valid AMP, yang anda butuhkan tentunya js amp-carousel yang harus anda pasang sebelum kode </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

Selanjutnya untuk membuat style caption di gallery gambar anda, copy kode CSS ini dan tempelkan pada amp-custom:


#carousel-with-preview amp-img {transition: opacity 1s ease-in-out;}
.carouselamp {background: #eee;margin: 16px 0;}

.carouselamp .slide &gt; amp-img &gt; 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;}

MEMBUAT IMAGE GALLERY DENGAN AMP-CAROUSEL

Setelah semua kode diatas terpasang, untuk proses akhir adalah membuat gallery di artikel anda. Berikut adalah kode yang harus anda pasang saat membuat artikel.


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

<div class="slide">

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

<div class="caption">

CAPTION GAMBAR

</div>

</div>

<div class="slide">

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

<div class="caption">

CAPTION GAMBAR

</div>

</div>

<div class="slide">

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

<div class="caption">

CAPTION


</div>

</amp-carousel>

Keterangan:

Ubah URL GAMBAR dengan url gambar anda.
Ubah ALT IMAGE sesuai yang diinginkan.
Ubah CAPTION dengan caption gambar yang akan tampil overlay di atas gambar.

Troubleshoting

Harap diperhatikan bahwa, biasanya saat anda memasang kode gallery diatas akan mengalami sedikit error saat sudah dipublish. Biasanya error tersebut terjadi karena kode penutup </amp-carousel> tiba-tiba terpasang pada tempat yang salah. Sehingga saat artikel publish, tampilan blog anda error.

Untuk mengatasi masalah ini, silahkan perbaiki di mode penulisan HTML saat mengedit artikel.

Itu dia artikel kali ini yang membahas Cara Membuat Gallery dengan Caption Valid AMP. Semoga bermanfaat