Memodifikasi Gambar dengan Penggunaan Parameter Struktur URL Blogger / Blogspot Image

July 05, 2018 - #blog_tutorial

Memodifikasi Gambar dengan Penggunaan Parameter Struktur URL Blogger / Blogspot Image

Ketika mengunggah gambar pada Blogger/Blogspot, pengguna dapat melakukan resize dan cropping tanpa perlu mengupload gambar kembali, karena pengguna dapat melakukannya secara server side dengan memodifikasi URL gambar yang diunggah pada Blogger/Blogspot

 

Original Image

Setelah menggunggah gambar pada postingan, dan ditampilkan dengan ukuran "Original", URL gambar yang didapat akan seperti

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/s1600/adult-beautiful-blonde-324658.jpg

/s1600/ menjelaskan dengan Blogger/Blogspot image hosting  bahwa pengguna ingin menampilkan gambar dengan ukuran asli gambar yang lebar gambar kecil dari 1600 atau tinggi kecil dari 1600 (dengan original skala/equal)

Note: Maksimal lebar gambar yang didapat atau terunggah yaitu 2048 pixels (s2048 atau w2048) dengan skala tinggi gambar menyesuaikan.

Dengan URL gambar yang didapat, pengguna dapat memodifikasinya, berikut beberapa caranya

Spesifik Lebar Gambar

Menjelaskan lebar yang spesifik pada parameter URL, gambar akan benar-benar diukur ulang ke lebar yang spesifik, dari 1-2048 pixels, misalkan ingin mendapatkan gambar dengan lebar 500 pixels

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w500/adult-beautiful-blonde-324658.jpg

Gambar akan berukuran dengan lebar 500 pixels dan tinggi yang menyesuaikan pada original gambar

Spesifik Tinggi Gambar

Tinggi gambar yang spesifik pada parameter URL, gambar resized dengan tinggi spesifik serta lebar yang menyesuaikan dengan skala original gambar, misalkan ingin mendapatkan gambar dengan tinggi 500pixels

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/h500/adult-beautiful-blonde-324658.jpg

Spesifik Lebar dan Tinggi Gambar

Dengan spesifik kedua atribut lebar dan tinggi, gambar yang didapat yaitu gambar dengan ukuran yang mendekati dengan skala ratio dari skala gambar, apakah itu lebar atau tinggi gambar, contoh

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w424-h255/adult-beautiful-blonde-324658.jpg

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w565-h918/adult-beautiful-blonde-324658.jpg

Ekuivalen pada Lebar atau Tinggi dari Gambar

Sama dengan Spesifik Lebar dan Tinggi Gambar, metode ini menjelaskan gambar dengan lebar atau tinggi gambar yang mendekati dengan skala rasio nya,

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/s543/adult-beautiful-blonde-324658.jpg

Contoh pada gambar dengan portrait oriented

https://1.bp.blogspot.com/-w4R6nsNIgUQ/Wz9SvsWmnqI/AAAAAAAABVI/4MuMpvqmyKILiMua5Ot6nrRIWBh4CzIBgCLcBGAs/s543/adult-beautiful-blonde-324658-portrait.jpg

Center Cropping

Gambar dapat dipotong menjadi empat persegi panjang pada posisi tengah gambar. Lebar dan tinggi gambar yang didapat akan sama, jika parameternya dengan /w500-c/ atau /h500-c/ ataupun /s500-c/

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w500-c/adult-beautiful-blonde-324658.jpg

Jika ingin mendapatkan gambar dengan lebar dan tinggi yang spesifik, dapat menggabungkan parameter lebar, tinggi dan cropping

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w500-h333-c/adult-beautiful-blonde-324658.jpg

Center Cropping with Circular Mask

Dengan -cc , gambar dapat terpotong pada posisi tengah gambar dengan potongan melingkar

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w500-cc/adult-beautiful-blonde-324658.jpg

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w500-h333-cc/adult-beautiful-blonde-324658.jpg

Background putih muncul karena gambar berformat .jpg. Gambar akan berlatar transparan jika gambar berformat .png

https://1.bp.blogspot.com/-SCv5iIHhpNY/Wz9idE9xSII/AAAAAAAABXs/s6VeSyCVvsIcK61jcgDqt-xeV5-K3RA6gCLcBGAs/s400-cc/adult-beautiful-blonde-324658-portrait-pngformat.png

Smart/Pick Cropping

Jika sebuah gambar memiliki 'konten utama' yang tidak berada di tengah gambar,.

Contohnya, sebuah gambar yang memiliki wajah seseorang yang tidak berada tepat ditengah gambar. Dengan metode ini, gambar dapat dipotong sama seperti metode center cropping, namun gambar akan terpotong tepat pada wajah seseorang tersebut, dengan menggunakan -p

Spesifik Warna Latarbelakang Gambar

Gambar dapat dimodifikasi dengan warna latar yang berbeda menggunakan kode Hex color. Dapat bekerja pada gambar yang memiliki format .png dengan berlatar transparan. Serta dapat bekerja juga pada percobaan center cropping yang memunculkan warna latar putih pada gambar berformat .jpg. -rj-c0xHEX_COLOR adalah parameter yang digunakan pada metode ini.

Misalkan ingin mengganti warna latar putih menjadi warna biru pada gambar yang menggunakan center cropping dengan circular mask

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/w500-h333-cc-rj-c0x067bd6/adult-beautiful-blonde-324658.jpg

067bd6 adalah kode hexa warna biru yang digunakan pada warna latar gambar di atas

Itulah beberapa hal yang bisa dimodifikasi pada gambar Blogger/Blogspot dengan memodifikasi URL source gambar. Hal ini sangat berguna bagi para blogger template developers yang ingin mendapatkan gambar dengan ukuran yang tepat atau spesifik setiap menggunakan gambar pada elemen dengan ukuran yang spesifik juga.

Bonus

XML Object

https://1.bp.blogspot.com/-OS5R3AxqOhQ/Wz9nUW7n68I/AAAAAAAABYE/jd7xxKTBMFYorar263hGu8-39EAZg7ZgwCLcBGAs/s1600-g/adolescent-adult-blur-712513.jpg

Direct Download for Image

https://1.bp.blogspot.com/-MeayP6qc7_8/Wz4WgaMyCOI/AAAAAAAABSo/gKs7iQ0_pKc_mKdb1zFM-zqsEdcJt9QAQCLcBGAs/s2048-d/adult-beautiful-blonde-324658.jpg