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:
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 > 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;}
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=" Membuat Image Gallery dengan Caption menggunakan AMP Membuat Image Gallery dengan Caption valid AMP"></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=" Membuat Image Gallery dengan Caption menggunakan AMP Membuat Image Gallery dengan Caption valid AMP"></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.