Formatting: Image

Tentang

Formatting Image adalah format HTML dan konfigurasi untuk menampilkan gambar - (Demo).



Spesifikasi




Konfigurasi



Keterangan

box
Nilai Pratinjau
none Lihat
border Lihat
shadow Lihat

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

  1. 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>
    		
            

    Image caption

    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>
    		
            

    Image caption



  2. 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>
    		
            


    Keterangan: Pada semua HTML diatas, tidak ada satupun konfigurasi yang ditambahkan. Semua konfigurasi akan mengambil Nilai Default.


  3. 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 atribut
    data-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.
Komentar