Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / AMP Tutorial

Membuat Image Gallery Dengan Caption Valid Amp

Membuat Image Gallery dengan Caption memakai AMP-Carousel 

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

Kali ini, aku akan membahas mengenai amp-carousel beserta cara customize nya. Tutorial ini akan memperlihatkan cara menciptakan gallery gambar ditambah dengan caption gambar masing-masing. Lihat teladan 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 menciptakan image gallery dengan gaya carousel dan valid AMP, yang anda butuhkan tentunya js amp-carousel yang harus anda pasang sebelum isyarat </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 menciptakan style caption di gallery gambar anda, copy isyarat 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 isyarat diatas terpasang, untuk proses tamat yaitu menciptakan gallery di artikel anda. Berikut yaitu isyarat yang harus anda pasang ketika menciptakan 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 memakai 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 memakai 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 ketika anda memasang isyarat gallery diatas akan mengalami sedikit error ketika sudah dipublish. Biasanya error tersebut terjadi sebab isyarat epilog </amp-carousel> tiba-tiba terpasang pada kawasan yang salah. Sehingga ketika artikel publish, tampilan blog anda error.

Untuk mengatasi problem ini, silahkan perbaiki di mode penulisan HTML ketika mengedit artikel.


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