Penjelasan dan Fungsi Operator Image di Blog - KodeRian

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Operator Gambar" adalah operator yang dapat membuat ulang ukuran dan rasio atau membuatnya responsif, operator gambar sudah sering dipakai untuk membuat gambar menjadi lebih jelas dan tajam dengan ukuran yang sudah ditentukan oleh pengembang. Perubahan ukuran ini akan diterapkan ke url gambar google biasanya terlihat dengan kode w- dan h- untuk pengaturan lebar dan tinggi gambar.

Sintaks

Operator	Operand	Sintaks fungsional	Hasil
resizeImage	2 atau 3	resizeImage({image},{number},{string})	image
		resizeImage({image},{array[number]},{string})	array[Object]
sourceSet		sourceSet({image},{array[number]},{string})	string

Catatan: Sintaks fungsional adalah alternatif yang dapat digunakan ketika sintaks standar berisi operator yang sama beberapa kali. Dalam konteks penggunaan operator gambar, alternatif ini terbukti lebih mudah diimplementasikan daripada sintaks default.

Gambar Yang di Dukung

Url gambar yang dihosting oleh Google melalui Blogger, Picasa, GooglePhotos dan thumbnail video YouTube dapat kita rubah ukuran dan rasionya. Operator menerapkan nilai baru ke parameter ini, meskipun jika ukuran dari gambar tersebut sudah memiliki rasio sendiri tapi kita bisa merubah kembali terkecuali jika rasio memang kecil bila dirubah maka akan terlihat blur.

Catatan: Operator juga dapat menggunakan string dan data eksplisit string berisi url gambar yang dihosting oleh penyedia layanan diatas.

Operator resizeImage

Operator resizeImage memiliki 2 sintak. Pertama memungkinkan untuk mengubah ukuran gambar dan kedua untuk menentukan resio dari gambar yang akan ditampilkan bisa berupa, landascape atau persegi. Biasanya operator gambar digunakan pada atribut src di tag img.

• Untuk dimensi bisa menggunakan seperti ini: "1:1","2:2","25:25",dll
• Untuk rasio bebas tapi kita gunakan ini dulu:"4:3","16:9","800:600",dll

Contoh Dengan Sintaks Default

<img expr:src='data:view.featuredImage resizeImage 600 resizeImage "4:3"'/>

Contoh Dengan Sintaks Fungsional

<img expr:src='resizeImage(data:view.featuredImage,600, "4:3")'/>

Contoh Dengan Nilai Eksplisit

Kita coba menggunakan nilai eksplisit dengan 2 kode diatas

Contoh Dengan Sintaks Default

<img expr:src='"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/s1024/tampan-dan-berani.jpg" resizeImage 500 resizeImage "500:200"' />

Contoh Dengan Sintaks Fungsional

<img expr:src='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/s1024/tampan-dan-berani.jpg", 500, "500:200")'/>

Gambar dengan ukuran 1024px telah diubah menjadi 500px dengan rasionya 500:200

Hasil rendering HTML akan menjadi:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/w500-h200-p-k-no-nu/tampan-dan-berani.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/w500-h200-p-k-no-nu/tampan-dan-berani.jpg">

Operator resizeImage Dengan Array

Seperti halnya diatas, hanya saja kita membuat dengan tambahan Array yang di dalamnya ada banyak ukuran untuk ditampilkan disetiap operasi dengan menggunakan fungsi loop.

Contoh Dengan Sintaks Default

<b:loop values='data:view.featuredImage resizeImage [50,75,100] resizeImage "16:9"' var='image'>
  <img expr:src='data:image.url'/>
</b:loop>

Contoh Dengan Sintaks Fungsional

<b:loop values='resizeImage(data:view.featuredImage, [50,75,100], "16:9")' var='image'>
  <img expr:src='data:image.url'/>
</b:loop>

Contoh Dengan Nilai Eksplisit

Unutk contoh sintaks default nya sudah saya bahas diatas bila ingin mencoba.

<b:loop values='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/s1024/tampan-dan-berani.jpg", [50,75,100], "16:9")' var='image'>
  <img expr:src='data:image.url'/>
</b:loop>

Ukuran gambar yang semulanya 1024px akan menjadi 50px,75px dan 100px dengan rasionya 16:9. Ukuran tersebut akan menyesuaikan apa yang kita tambahkan di array jika lebih dari itu maka hasilnya pun lebih.

Hasil rendering HTML akan menjadi:

Operator sourceSet

Operator sourceSet sangat mirip dengan sintaks resizeImage menggunakan array. Bedanya untuk sourceSet nilai string akan dimasukkan ke dalam parameter srcset di dalam tag <img>. Operan pertama url gambar dan operan kedua adalah array. Sebagai contoh: [200,400,800,1600].

Hasil Operasi Array

URL_IMAGE_200px w200,
URL_IMAGE_400px w400,
URL_IMAGE_800px w800,
URL_IMAGE_1600px w1600

Kode ini akan terlihat setelah kita menerapkan sourceSet pada tag img.

Contoh Dengan Nilai Default

<img expr:src='data:view.featuredImage' expr:srcset='data:view.featuredImage sourceSet [200,400,800,1600] sourceSet "16:9"'/>

Contoh Dengan Nilai Fungsional

<img expr:src='data:view.featuredImage' expr:srcset='sourceSet(data:view.featuredImage, [200,400,800,1600], "16:9")'/>

Contoh Dengan Nilai Eksplisit

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/s1024/tampan-dan-berani.jpg' expr:srcset='sourceSet("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/s1024/tampan-dan-berani.jpg", [200,400,800,1600], "16:9")'style='width: 100%;'/>

Gambar yang ukuran nya 1024px telah diperbesar menjadi 100% dari lebar container atau box div. Atribut srcset memilih ukuran yang paling mendekati ukuran container.

Hasil rendering HTML akan menjadi:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/s1024/tampan-dan-berani.jpg" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/w200-h112-p-k-no-nu/tampan-dan-berani.jpg 200w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/w400-h225-p-k-no-nu/tampan-dan-berani.jpg 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/w800-h450-p-k-no-nu/tampan-dan-berani.jpg 800w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGTEMTIAxY9TCGer2uNFeBx0c6vEO_NhzMi-t2oGX0J4lDOc08JR7IWMYwUbKh-A-ssLsLgQSBQm_-glABu6oLqVJddypJ34iWTDHA7JF6JOHdEzNaOk-xpBDPj8XFYRFFq9b960OjhV5/w1600-h900-p-k-no-nu/tampan-dan-berani.jpg 1600w" style="width: 100%">

Kalian bisa melihat kode diatas ada banyak yang merupakan array pada img, seperti diawal tadi dan ditampilkan pada sourceSet.

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#