✔ Menciptakan Image Gallery Dengan Caption Valid Amp

Membuat Image Gallery dengan Caption memakai AMP-Carousel 

Komponen amp-carousel sangat cantik 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 aba-aba </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 aba-aba 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 aba-aba diatas terpasang, untuk proses final yaitu menciptakan gallery di artikel anda. Berikut yaitu aba-aba yang harus anda pasang dikala 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 dikala anda memasang aba-aba gallery diatas akan mengalami sedikit error dikala sudah dipublish. Biasanya error tersebut terjadi sebab aba-aba epilog </amp-carousel> tiba-tiba terpasang pada kawasan yang salah. Sehingga dikala artikel publish, tampilan blog anda error.

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


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

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: