AMP Common Attributes - Atribut Umum Pada AMP HTML

fallback attribute adalah atribut yang digunakan sebagai "cadangan" atau alternatif konten lain apabila konten utama yang dimaksud tidak didukung oleh browser atau tidak tersedia (mungkin terhapus). Contoh, kita mereferensikan gambar A, apabila gambar A tersebut tidak valid (terhapus atau tidak di-support browser) maka kita bisa berikan fallback gambar lain.

fallback attribute tidak hanya bisa digunakan pada element AMP itu sendiri, akan tetapi juga dapat digunakan pada element HTML yang mana element HTML tersebut terletak didalam Element AMP (sebagai anak/child) dimana element AMP tersebut juga harus mendukung (Support) fallback attribute.

Attribute ini, bisanya digunakan untuk menangani gambar (images), animasi (animation), audio dan video. Lihat contoh Berikut:

Example

<amp-anim src="/media/images/clock.webp"
  width="580"
  height="580"
  layout="responsive" >
  <div fallback>
    Cannot play animated images - Gambar animasi GIF tidak bisa ditampilkan.
  </div>
</amp-anim>

heights berbeda dengan height. height diisi langsung dengan nilai (value) berupa unit pixel (contoh: height="680"), sedangkan heights value berupa ekspresi berdasarkan media (@media) ekspresi. heights lebih mirip dengan sizes attribute pada HTML <img> tag.

Example

<amp-img src="/media/images/amp-bg.jpg"
  width="420" height="456"
  heights="(min-width:500px) 300px, 70%">
</amp-img>

layout attribute digunakan untuk menentukkan susunan pada dokumen AMP. Value dari atribute layout dapat diisi dengan: nodisplay, fixed, responsive, fixed-height, fill, container, dan flex-item.

Example

<amp-img src="/media/images/flower.jpg"
  width="750"
  height="562"
  layout="responsive"
  alt="a flower">
</amp-img>

media attribute digunakan untuk menentukkan visibilitas AMP element berdasarkan media query. Contoh penggunaan attribute ini adalah jika Anda ingin mengampilkan gambar (picture) yang berbeda berdasarkan ukuran layar (device viewport). Ini berkaitan dengan CSS @media yang tentunya Anda harus memahaminya terlebih dahulu. Semua elemen AMP mendukung (support) media attribute

Example

<amp-img
    media="(min-width: 700px)"
    src="/media/images/amp-bg.jpg"
    width="750"
    height="500" layout="responsive"></amp-img>
<amp-img
    media="(max-width: 699px)"
    src="/media/images/amp-bg-red.jpg"
    width="450"
    height="200" layout="responsive"></amp-img>

noloading attribute digunakan apabila tidak ingin menampilkan loading indicator yang biasanya ditandai dengan animasi loading yang menunjukkan konten sedang dimuat. Seperti menggunakan amp-img untuk menampilkan gambar ; sebelum gambar dimuat/ditampilkan maka akan ditampikan loading indicator yang memberi tahu kita bahwa gambar mau ditampikan.

Umumnya atribut ini digunakan dan berkaitan dengan: gambar (images), animasi (animations), video dan ads (amp-ad).

Example

<amp-img src="/media/images/cloud.jpg"
  noloading
  height="750"
  width="562"
  layout="responsive">
</amp-img>

Sebagaimana dalam DOM (Document Object Model) kita mengenal event handler, maka on attribute digunakan dan hanya akan terjadi apabila ada interaksi dari user atau sumber lain. Contohnya, pada saat user mengklik tombol (button) di sebuah element, maka tampilkan kotak dialog dan sebagainya.

Umumnya atribut ini digunakan dan berkaitan dengan: lightboxes, sidebars, live lists, dan forms. Mengenai istilah-istilah tersebut silahkan merujuk pada dokumentasi resmi AMP.

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Example

<amp-img
    on="tap:nama-lightbox"
    role="button"
    tabindex="0"
    src="/media/images/amp-bg.jpg" width=200 height=100></amp-img>
<amp-image-lightbox id="nama-lightbox" layout="nodisplay"></amp-image-lightbox>
<p>click or tap the image</p>

placeholder menunjukkan "pengganti". Konten didalam atribut ini digunakan sebagai pengganti konten utama (induk) sebelum konten utama tersebut selesai dimuat atau ditampilkan. Atribut ini boleh digunakan pada HTML elemen biasa yang mana terletak di dalam AMP element (yang support placeholder). Jadi, placeholder akan tampil terlebih dahulu sebelum konten induk (parent). Ketika konten induk berhasil dimuat, maka placeholder akan disembunyikan.

Umumnya atribut ini digunakan dan berkaitan dengan: images, animations, videos, dan ads (berkaitan dengan iklan amp-ad). Mengenai istilah-istilah tersebut silahkan merujuk pada dokumentasi resmi AMP.

Contoh dibawah ini, menggunakan placeholder (Baris ke-6) dengan <amp-img> element. Apabila browser tidak support file "clock.webp" image, maka akan menggunakan file "clock.gif" sebagai gantinya.

Example

<amp-anim src="/media/images/clock.webp"
  width="580"
  height="580"
  layout="fixed"
  attribution="originally from wikimedia.org - public domain license">
  <amp-img placeholder
    alt=""
    layout="fixed"
    width="580"
    height="580"
    tabindex="0"
    src="/media/images/clock.gif">
    <noscript>
      <img src="/media/images/clock.gif" alt="" />
    </noscript>
  </amp-img>
</amp-anim>

sizes attribute sama seperti size atribut pada HTML <img> tag, akan tetapi sizes pada AMP dapat digunakan pada semua element. sizes atribut dapat digunakan pada semua AMP elemen yang support (mendukung) layout="responsive".

Example

<amp-img src="/media/images/cat.jpg"
  width="320" height="200"
  layout="responsive"
  sizes="(min-width: 320px) 320px, 100vw">
</amp-img>

width digunakan untuk menentukan "lebar" element. Sama seperti width pada attribute HTML biasa, akan tetapi pada AMP umumnya width harus ditulis secara eksplisit. Nilai yang berlaku adalah pixel (hanya angka saja).

Example

<amp-img src="/media/images/flash.jpg"
  width="320"
  height="200"
  layout="fixed">
</amp-img>

height digunakan untuk menentukan "tinggi" element. Sama seperti height pada attribute HTML biasa, akan tetapi pada AMP umumnya height harus ditulis secara eksplisit. Nilai yang berlaku adalah pixel (hanya angka saja).

Example

<amp-img src="/media/images/car.jpg"
  width="320"
  height="200"
  layout="fixed">
</amp-img>