Dipublikasikan oleh:
wiBlogger.com
(23 Juni 2021)
Cara Mengatasi Gambar Widget Artikel Terkait Blog Tidak Muncul
Label:
Blogger.com,
Masalah Blogger
PENYEBAB
PEMICU
WIDGET YANG TERPENGARUH Masalah ini tidak hanya berdampak pada widget artikel terkait saja, semua widget berbasis JSON feed (widget yang mengambil konten dengan cara meload feed blogger menggunakan Javascript) juga akan terpengaruh. Adapun beberapa widget yang menggunakan sistem ini adalah:
Efek samping dari metode ekstrak via property content bisa dikatakan cukup "mahal". Selain harus melakukan ekstrak, metode ini juga mengharuskan pengambilan JSON feed dengan menggunakan directory full atau minimal default. Dengan kata lain, pengambilan JSON feed tidak bisa dilakukan dengan directory summary yang pada kebanyakan kasus akan jauh lebih optimal dibandingkan dengan kedua directory sebelumnya.
Karena alasan diatas dan merujuk pada besarnya efek samping yang ditimbulkan, dibandingkan dengan melakukan fix dengan cara merubah sistem pengambilan thumbnail melalui property content, saya sendiri lebih memilih mengarahkan pengguna template untuk melakukan perubahan pada postingan dengan 2 metode yang telah diuraikan sebelumnya.
Masalah ini bukan disebabkan oleh template atau kode pada postingan. Ini muncul murni karena bug blogger.
Bug ini muncul sejak blogger melakukan update antarmuka post editor (tahun 2020).
PEMICU
Tidak ada satupun gambar di dalam postingan yang menggunakan parameter size dengan prefix s
WIDGET YANG TERPENGARUH Masalah ini tidak hanya berdampak pada widget artikel terkait saja, semua widget berbasis JSON feed (widget yang mengambil konten dengan cara meload feed blogger menggunakan Javascript) juga akan terpengaruh. Adapun beberapa widget yang menggunakan sistem ini adalah:
- Recent posts (Postingan terbaru)
- Posts by label (Postingan berdasarkan label)
- Related posts (Postingan terkait/Artikel terkait)
SOLUSI BAGI BLOGGER
Berikut adalah 2 solusi untuk mengatasi gambar thumbnail widget yang tidak muncul di blogger. Cukup pilih salah satu dari 2 solusi berikut:
Metode 1:
Gambar sebelum:
Gambar sesudah:
Keterangan: Pada kedua HTML diatas, kode HTML gambar khusus thumbnail (hijau) diambil dari gambar pertama (merah) dengan melakukan sedikit perubahan. Beberapa perubahan yang dilakukan adalah:
s0 merupakan parameter size yang akan memanggil gambar dalam ukuran original.
Dengan metode ini, blog akan tetap meload gambar seperti sebelum melakukan perubahan, namun, untuk urusan thumbnail, gambar yang terbaca oleh sistem blogger adalah yang terdapat pada tag komentar. Kelebihan metode ini adalah kita dapat dengan leluasa mengatur gambar mana yang akan dijadikan thumbnail. Custom thumbnail ini akan berlaku secara global, baik itu pada widget yang digenerate dengan Ekspresi XML (Blog posting misalnya), maupun widget yang berbasis JSON Feed. Lebih jauh tentang ini akan anda jumpai pada metode ke-2.
Metode 2:
Gambar sebelum:
Gambar sesudah:
PENTING...! Pada metode 2, pastikan gambar yang dipilih adalah gambar yang terletak pada urutan pertama. Ketika gambar yang dipilih tidak terletak pada urutan pertama, thumbnail widget berbasis JSON feed akan berbeda dengan thumbnail yang ditampilkan pada widget Blog posting. Hal ini karena pada widget Blog, umumnya konten postingan langsung diambil menggunakan Tag/Ekspresi XML. Pengambilan gambar thumbnail dengan Ekspresi XML akan mengacu pada gambar pertama, tidak peduli apakah itu parameter s atau lainnya. Jika anda risih dengan masalah ini, pastikan gambar yang diubah ukurannya selalu terletak pada urutan pertama!
Menambahkan Gambar Khusus Thumbnail
Cara ini merupakan metode yang paling aman, efektif, dan fleksibel.
Metode ini dapat mengatasi masalah tanpa menimbulkan efek samping.
Caranya?
Tambahkan gambar dengan parameter size berprefix s
di bagian atas postingan (minimal di atas gambar pertama) dan
letakkan gambar tersebut di dalam elemen HTML
<!--komentar-->
Gambar sebelum:
Gambar sesudah:
Keterangan: Pada kedua HTML diatas, kode HTML gambar khusus thumbnail (hijau) diambil dari gambar pertama (merah) dengan melakukan sedikit perubahan. Beberapa perubahan yang dilakukan adalah:
- Menambahkan <!-- diawal dan --> di akhir HTML gambar khusus thumbnail.
- Mengubah parameter size yang semula adalah w320-h180 mejadi s0
s0 merupakan parameter size yang akan memanggil gambar dalam ukuran original.
Dengan metode ini, blog akan tetap meload gambar seperti sebelum melakukan perubahan, namun, untuk urusan thumbnail, gambar yang terbaca oleh sistem blogger adalah yang terdapat pada tag komentar. Kelebihan metode ini adalah kita dapat dengan leluasa mengatur gambar mana yang akan dijadikan thumbnail. Custom thumbnail ini akan berlaku secara global, baik itu pada widget yang digenerate dengan Ekspresi XML (Blog posting misalnya), maupun widget yang berbasis JSON Feed. Lebih jauh tentang ini akan anda jumpai pada metode ke-2.
Metode 2:
Sertakan setidaknya 1 gambar dengan parameter s
Metode ini lebih simpel dibandingkan dengan metode pertama. Hanya saja, untuk urusan fleksibilitas,
metode ini mengharuskan kita untuk tetap menggunakan gambar pada urutan pertama sebagai thumbnail.
Caranya?
Pada gambar urutan pertama, ganti parameter yang sebelumnya menggunakan
w[lebar]-h[tinggi] menjadi s[lebar].
Gambar sebelum:
Gambar sesudah:
PENTING...! Pada metode 2, pastikan gambar yang dipilih adalah gambar yang terletak pada urutan pertama. Ketika gambar yang dipilih tidak terletak pada urutan pertama, thumbnail widget berbasis JSON feed akan berbeda dengan thumbnail yang ditampilkan pada widget Blog posting. Hal ini karena pada widget Blog, umumnya konten postingan langsung diambil menggunakan Tag/Ekspresi XML. Pengambilan gambar thumbnail dengan Ekspresi XML akan mengacu pada gambar pertama, tidak peduli apakah itu parameter s atau lainnya. Jika anda risih dengan masalah ini, pastikan gambar yang diubah ukurannya selalu terletak pada urutan pertama!
SOLUSI DEVELOPER TEMPLATE
Untuk sekarang, tidak ada solusi lainya yang saya temukan selain dengan cara mengekstrak URL
gambar melalui property content pada JSON feed.
Ini karena ketika tidak terdapat gambar berparameter s di dalam postingan, property
media$thumbnail tidak akan tersedia pada object entry.
Efek samping dari metode ekstrak via property content bisa dikatakan cukup "mahal". Selain harus melakukan ekstrak, metode ini juga mengharuskan pengambilan JSON feed dengan menggunakan directory full atau minimal default. Dengan kata lain, pengambilan JSON feed tidak bisa dilakukan dengan directory summary yang pada kebanyakan kasus akan jauh lebih optimal dibandingkan dengan kedua directory sebelumnya.
Karena alasan diatas dan merujuk pada besarnya efek samping yang ditimbulkan, dibandingkan dengan melakukan fix dengan cara merubah sistem pengambilan thumbnail melalui property content, saya sendiri lebih memilih mengarahkan pengguna template untuk melakukan perubahan pada postingan dengan 2 metode yang telah diuraikan sebelumnya.
Tambahkan komentar untuk: