Langsung ke konten utama

Cara Membuat Lightbox AMP dengan Fitur Galeri

Dalam memposting konten banyak yang menggunakan gambar supaya lebih menarik. Atau mungkin menggunakan media gambar sebagai media untuk mempermudah dalam memahami isi artikel. Serta, mungkin juga sebagai media Galery.

Seringkali banyak pengunjung blog yang mempratinjau atau memperbesar gambar agar terlihat lebih jelas, terutama gambar yang memiliki bagian-bagian yang detail. Sehingga mereka harus membuka gambar di tab .

Dengan menggunakan alat lightbox gambar dapat diperbesar. Ada banyak tutorial untuk membuat lightbox non-amp dan banyak juga plugin untuk membuat lightbox.

Di amp project ada tiga jenis komponen lightbox, diantaranya:

  1. amp-lightbox, menampilkan elemen html dengan layar penuh.
  2. amp-image-lightbox, menampilkan efek lightbox untuk gambar yang telah ditentukan.
  3. amp-lightbox-gallery, menampilkan gambar dalam mode galery lightbox. Pengguna dapat beriteraksi untuk melihat-lihat gambar dengan lebih nyaman.

Di sini akan membahas tutorial membuat lightbox menggunakan amp-lightbox-gallery. Kenapa memilih amp-lightbox-gallery, karena penggunaannya yang mudah dan tidak ribet, serta terdapat beberapa fitur bagus.

Langkah awal pasang script amp-lightbox-gallery.

Active Select All
<script async='async' custom-element='amp-lightbox-gallery' src='https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js'></script>

Pastikan bahwa gambar yang di upload untuk dijasikan lightbox memiliki resolusi yang tinggi. lalu buat gambar pada postingan supaya valid amp (mengubah img menjadi amp-img) yang sudah di bahas dalam blog ini.

Terkait: Cara Mengatur Gambar AMP di Postingan supaya Responsive.

Cara Menggunakan Amp Lightbox Gallery

Pada postingan, masuk mode HTML setelah itu cari elemen amp-img (yang dijadikan lightbox), supaya ketika gambar dalam keadaan besar nanti tidak kabur maka atur parameter url terlebih dahulu.

Pada parameter scale atau S[angka] ubah menjadi s0 untuk ukuran asli atau s1600 untuk maksimal 1600px. Lalu pada elemen tersebut tambahkan atribut lightbox. Contoh:

<div class="separator">
 <amp-img lightbox alt="Menu AMP Lightbox gallery" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFx5tVYMGMxU6ggqqWi4z5xs6V75y4LVaV_bIk1B95SqrU9iOlEt9QMLMUToMrnL0x6zF3q3gNpzMSw7yQeJZ4vC66T37E-vv9_frI-NppnHgfzVsOPrn09urLOF1jgjrlrqi2jzR0XL8/s0/Lightbox%2BGaleri.png" title="Menu AMP Lightbox gallery" width="640"></amp-img>
</div>

Pertinjau/review dulu, untuk mengecek apakah berfungsi. Pada halaman pratinjau coba klik gambar yang telah dijadikan lightbox. Jika berhasil maka akan muncul lightbox.

Membuat Galeri Lightbox

Selanjutnya cara membuat lightbox galery. Jika di postingan disematkan beberapa gambar, kamu dapat membuat galeri di postingan.

Pada media gambar yang lain atur dengan cara yang sama seperti di atas, ubah parameter scale url dan tambahkan atribut lightbox pada amp-img.

<div class="separator">
 <amp-img lightbox alt="AMP Lightbox gambar" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8W9vkmL7gEy7ydNCXaA9K_fe64Qv4AWTi51Zx4Ou7iueN-Y2I5tDaZSvOAQu6ulzDs-4XMqDW622cw7liOuQW1zUcWXn4Fc1pcvXme2m1eU0VJa1lV8qw4Ot-2updIYf6USZMo07HS7Y/s0/AMP%2BLightbox.png" title="AMP Lightbox gambar" width="640"></amp-img>
</div>
<p>paragraf 1</p>
<div class="separator">
 <amp-img lightbox alt="Menu AMP Lightbox gallery" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFx5tVYMGMxU6ggqqWi4z5xs6V75y4LVaV_bIk1B95SqrU9iOlEt9QMLMUToMrnL0x6zF3q3gNpzMSw7yQeJZ4vC66T37E-vv9_frI-NppnHgfzVsOPrn09urLOF1jgjrlrqi2jzR0XL8/s0/Lightbox%2BGaleri.png" title="Menu AMP Lightbox gallery" width="640"></amp-img>
</div>
<p>paragraf 2</p>
<!-- dan seterusnya -->

Nanti secara otomatis script amp akan membuat lightbox. Ketika klik klik (buka) salah satu gambar, nanti akan muncul lightbox gambar tersebut dan bisa di geser kanan kiri untuk beralih ke gambar yang lain. Serta ada tombol menu daftar gambar pada galeri di kanan atas.

Perlu di ingat, jika kamu menggunakan amp-img dengan fitur fallback akan ada masalah. Biasanya fitur fallback ini digunakan untuk menggunakan gambar Webp.

Saat elemen amp-img dan fallback-nya terdapat atribut lightbox, pada galery kedua gambar tersebut akan muncul. Dan jika fallback tidak aktif gambarnya akan ter-hidden.

Jadi lebih baik jangan gunakan fallback untuk gambar yang ingin dibuat lightbox.

Membuat Lebih dari Satu Lightbox

Tidak hanya itu saja komponen amp lightbox gallery juga bisa digunakan untuk membuat beberapa grup lightbox yang berbeda. Kamu cukup membuat berbeda isi dari atribut lightbox.

Contoh pada gambar grup pertama kamu menggunakan atribut lightbox="grub1" untuk seluruh gambar yang akan ditampilkan pada grup pertama. lalu pada grub kedua kamu menggunakan atrinut lightbox="grub2".untuk seluruh gambar yang akan ditampilkan pada grup kedua.

<div class="separator">
 <amp-img lightbox alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCeuWOfGGATuWCHhPs71hjs9CpT_KB-1bh2HhQCqiyBGUMm3t3BrqeeU1KPzo-SLxehXHIP5Cfov3LMkRLfry-FgViejqVk8cY77b7xE6ZQGExjHNdNaBd0MipjD3yuTdun6TypXR8m0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div>
<p>paragraf 1</p>
<div class="separator">
 <amp-img lightbox alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgl-UJTKOmuMGv7-g5eu4Qfs1FZES5-oSSBDXpyras8CvyRCNoBSRMagDk5A4HIg6-ULgb6WSuM4YAiM8JfdOgQTRGnitoIRK45MlF1wnVuTmUMqWp1Wrfhd-xMSZuGCoP-ZswngyUoQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div>
<p>paragraf 2</p>
<!-- dan seterusnya --> 
<div class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCeuWOfGGATuWCHhPs71hjs9CpT_KB-1bh2HhQCqiyBGUMm3t3BrqeeU1KPzo-SLxehXHIP5Cfov3LMkRLfry-FgViejqVk8cY77b7xE6ZQGExjHNdNaBd0MipjD3yuTdun6TypXR8m0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div><p>paragraf 1</p>
<div class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgl-UJTKOmuMGv7-g5eu4Qfs1FZES5-oSSBDXpyras8CvyRCNoBSRMagDk5A4HIg6-ULgb6WSuM4YAiM8JfdOgQTRGnitoIRK45MlF1wnVuTmUMqWp1Wrfhd-xMSZuGCoP-ZswngyUoQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div><p>paragraf 2</p>
<!-- dan seterusnya -->

Intinya isi dari atribut lightbox harus berbeda untuk setiap grup. Bisa juga untuk lighbox pertama tidak di isi.

Menampilkan satu gambar saja untuk membuka galeri

Atau hanya ingin menampilkan satu gambar saja di artikel, tetapi saat dibuka lightbox-nya menampilkan banyak gambar. Caranya sama saja, kamu hanya perlu menyembunyikan gambar yang tidak ditampilkan.

Setelah memberi atribut lightbox pada semua gambar. Kamu buat elemen <span class="overlay-text">Lihat Galeri Foto</span> di dalam media gambar yang ditampilkan. Lalu buat tag div dan beri atribut hidden. Dan taruh gambar yang tidak ingin ditampilkan ke dalam elemen div. Contoh seperti ini:

<div class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYbXOIRuNGyGahT_nafS3CVosJH_oCLAEZ83pr3uAkSkm_YPmiS9kmcdX0W7VJqkbV5x7_w9N8rJCOjEWk1_u-BFXWAgz4oZaeTFHcrlVAXfDwHNwRnbHjPqzRIPtf2gXxCNy033E5Hk/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
 <span class="overlay-text">Lihat Galeri Foto</span> </amp-img>
 <div hidden>
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCeuWOfGGATuWCHhPs71hjs9CpT_KB-1bh2HhQCqiyBGUMm3t3BrqeeU1KPzo-SLxehXHIP5Cfov3LMkRLfry-FgViejqVk8cY77b7xE6ZQGExjHNdNaBd0MipjD3yuTdun6TypXR8m0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgl-UJTKOmuMGv7-g5eu4Qfs1FZES5-oSSBDXpyras8CvyRCNoBSRMagDk5A4HIg6-ULgb6WSuM4YAiM8JfdOgQTRGnitoIRK45MlF1wnVuTmUMqWp1Wrfhd-xMSZuGCoP-ZswngyUoQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
 </div>
</div>

Penting jangan lupa simpan css berikut untuk mengatur posisi teks "Lihat Galeri Foto".

.overlay-text{position:absolute;bottom:20px;left:20px;z-index:1;pointer-events:none;background-color:rgba(0,0,0,.3);color:#fff;padding:5px
 15px;border-radius:2px;font-size:1em}

Menambahkan Deskripsi Pada Gambar Lightbox

Tidak hanya dapat menampilkan gambar saja pada lightbox. Gambar juga dapat diberi deskripsi, yang nanti deskripsi itu akan muncul di bagian bawah gambar.

Ada dua cara yang dapat di coba, menggunakan figcaption dan aria-describedby.

Menggunakan figcaption

Figcaption adalah elemen anakan dari figure, artinya figure dan figcaption iatu satu rangkaian. Buat rangkaian figure terlebih dulu kemudian taruh media gambar dan buat deskripsinya pada figcaption. Contoh:

<figure class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYbXOIRuNGyGahT_nafS3CVosJH_oCLAEZ83pr3uAkSkm_YPmiS9kmcdX0W7VJqkbV5x7_w9N8rJCOjEWk1_u-BFXWAgz4oZaeTFHcrlVAXfDwHNwRnbHjPqzRIPtf2gXxCNy033E5Hk/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
 <figcaption>
 Surat PIN adsense
 </figcaption>
</figure>

Menggunakan aria-describedby

Aria-describedby merupakan sebuah atribut, yang nantinya digunakan untuk memanggil teks dari elemen lain. Untuk menggunakannya tambahkan atribut aria-describedby="" ke elemen amp-img dan buat elemen div (lalu diberi atribut id="").

Kemudian isi elemen div dengan deskripsi gambar, dan isi atribut aria-describedby dan id dengan isi yang sama. Contoh:

<div class="separator">
 <amp-img lightbox="adsense" aria-describedby="pin-adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYbXOIRuNGyGahT_nafS3CVosJH_oCLAEZ83pr3uAkSkm_YPmiS9kmcdX0W7VJqkbV5x7_w9N8rJCOjEWk1_u-BFXWAgz4oZaeTFHcrlVAXfDwHNwRnbHjPqzRIPtf2gXxCNy033E5Hk/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
</div>
<div id="pin-adsense">Pin Adsense adalah ....</div>
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Komentar Blogger Valid AMP dan Anti Backlink Spam

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO. Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress). Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar a...
44 komentar
Baca selengkapnya

Membuat Komentar Blogger Simple SEO Ringan dengan Schema.org

Komentar merupakan salah satu bagian dari blog yang digunakan untuk pertanyaan, pendapat, dan bisa juga berdiskusi. Komentar bawaan blogger tersedia dalam 2 jenis yaitu yang biasa tidak ada fitur balas komentar (Comments) dan yang bertingkat (Threaded Comments) dengan fitur balas komentar. Kedua jenis komentar tersebut tidak menyertakan schema data terstruktur, yang tentunya berfungsi untuk SEO. Dengan adanya schema.org komentar yang positif dapat dengan mudah dibaca / index oleh mesin google dan tentunya dapat berguna untuk reputasi blog di pencarian google. Karena google sendiri juga menggunakan komentar untuk menilai konten, intinya reaksi pengunjung setelah membaca artikel. Mungkin dengan ditambahkannya schema akan lebih baik jika dibandingkan dengan tanpa schema. Blog ManKoin menggunakan komentar dengan schema.org, pada postingan kali ini membahas tentang membuat komentar dengan banyak fitur tapi sederhana. Awalnya ini dari blogger lain yang meminta membuat komentar seperti blog ...
19 komentar
Baca selengkapnya

Cara Mengembalikan Partisi Disk ke dalam Keadaan Semula

Partisi pada hardisk drive terlanjur terformat, tiba tiba hilang atau telah terhapus. Kalau partisi hilang dengan sendirinya itu mungkin karena habis melakukan install ulang windows seperti yang pernah saya alami, atau hal lainnya. Jika seperti itu partisinya sudah tidak muncul lagi. Di dalam keadaan seperti itu sangat dimungkinkan partisi disk bisa dikembalikan/restore seperti semula. Cara kerjanya hampir sama dengan mengembalikan/recovery data yang hilang atau terhapus. Bagian hardisk yang tidak terformat akan menunjukkan "Unallocated". Bagian itulah yang di recovery, dengan menganalisa terlebih dulu lalu mengembalikan partisi dapat dilacak seperti semula. Serta bisa juga untuk dilakukan pada bagian harddisk yang sudah terformat. Tidak hanya untuk hardisk saja, recovery juga bisa digunakan pada memori SD card, dan juga drive external. Kenapa Tidak Menggunakan Data Recovery saja Mungkin ada yang berpikir untuk melakukan recovery, tapi itu butuh waktu yang sangat lama. Jadi a...
22 komentar
Baca selengkapnya