Tentang
Formatting Image adalah
format HTML dan konfigurasi untuk menampilkan gambar - (Demo).
Spesifikasi
Konfigurasi
Keterangan
align
Nilai | Keterangan |
---|---|
left | Rata kiri |
center | Rata tengah |
right | Rata kanan |
formatting
Secara default, sistem akan memproses semua elemen img pada penggunaan yang didukung sesuai data spesifikasi.
Dengan memberikan nilai no pada konfigurasi ini,
elemen img yang bersangkutan tidak akan diproses dengan formatting (akan menggunakan style default browser).
Penggunaan
-
Simantik Format
Simantik format adalah format HTML yang direkomendasikan untuk mendefinisikan sebuah gambar. Format ini menggunakan html figure.
Format S1: Hanya gambar<figure> <img src='image-url.png' data-original-width='300' data-original-height='187'/> </figure>
Format S2: Gambar dengan link:<figure> <a href='image-url.png'> <img src='image-url.png' data-original-width='300' data-original-height='187'/> </a> </figure>
Format S3: Gambar dengan caption:<figure> <img src='image-url.png' data-original-width='300' data-original-height='187'/> <figcaption>Image caption</figcaption> </figure>
Elemen figcaption harus diletakkan di awal atau di akhir elemen figure. Posisi caption akan mengikuti peletakkan elemen figcaption.
Format S4: Gambar dengan link dan caption:<figure> <a href='image-url.png'> <img src='image-url.png' data-original-width='300' data-original-height='187'/> </a> <figcaption>Image caption</figcaption> </figure>
-
Blogger Format
Blogger Format adalah format HTML gambar yang di-generate oleh sistem blogger melalui insert
gambar pada Post Editor atau Laman Editor.
Formatting ini juga akan memproses berbagai format blogger secara otomatis.
Anda tidak perlu melakukan perubahan terhadap semua gambar yang sudah ada.
Berikut adalah berbagai format HTML gambar yang akan diproses oleh formatting selain dengan Simantik format sebelumnya:
Format B1: Format Dasar<img src='image-url.png' data-original-width='1000' data-original-height='500'/>
Format B2: Format Dasar dengan Link<a href='image-url.png'> <img src='image-url.png' data-original-width='1000' data-original-height='500'/> </a>
Format B3: Format Blogger<div class='separator'> <img src='image-url.png' data-original-width='1000' data-original-height='500'/> </div>
Format B4: Format Blogger dengan Link<div class='separator'> <a href='image-url.png'> <img src='image-url.png' data-original-width='1000' data-original-height='500'/> </a> </div>
Format B5: Format Blogger dengan Caption<table class="tr-caption-container"> <tbody> <tr> <td> <img src="image-url.png" data-original-width='1000' data-original-height='500'/> </td> </tr> <tr> <td class="tr-caption">Image caption</td> </tr> </tbody> </table>
Format B6: Format Blogger dengan link dan Caption<table class="tr-caption-container"> <tbody> <tr> <td> <a href="image-url.png"> <img src="image-url.png" data-original-width='1000' data-original-height='500'/> </a> </td> </tr> <tr> <td class="tr-caption">Image caption</td> </tr> </tbody> </table>
-
Penambahan Konfigurasi
Karena struktur HTML gambar yang beranekaragam, konfigurasi kami batasi untuk hanya bisa ditambahkan pada
elemen img.
Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atributdata-nama-konfigurasi='Nilai' pada elemen img.
Contoh:<figure> <img data-box='shadow' src='image-url.png' data-original-width='300' data-original-height='187'/> </figure>
Lainnya
- Formatting ini akan mengupdate src gambar dengan ukuran yang sesuai serta menggunakan versi gambar webp yang memiliki ukuran lebih ringan. Untuk kebutuhan ini, Atribut data-original-width dan data-original-height harus tersedia. Adapun kedua atribut ini otomatis ditambahkan ketika anda mengupload gambar melalui Post Editor atau Laman Editor.
- Gambar akan diload secara lazy (hanya akan dimuat ketika terlihat pada layar browser).
- Penambahan caption hanya mendukung format S3, S4, B5, dan B6.