Saat ini pihak Blogger sudah mulai menerapkan User Interface (UI) alias tampilan baru untuk editor Blogger. Sekilas, UI ini terlihat lebih bersih dan minimalis dibanding versi lama. Tampilannya pun menjadi responsif saat dibuka di layar yang lebih kecil seperti ponsel atau tablet.
Iya, tampilannya memang bagus sih. Tapi ada satu bug yang cukup mengganggu sebagian besar pengguna. Entah kenapa setiap postingan yang diterbitkan melalui editor baru ini menjadi tidak memiliki gambar dalam RSS feed. Biasanya gambar terdapat dalam value media$thumbnail.url seperti ini:
Versi barunya menjadi begini:
Apa Ruginya Sih?
Hilangnya media$thumbnail.url dalam RSS feed menyebabkan hilangnya pula gambar dalam widget kustom seperti recent post, related post, dan lain sebagainya. Ini karena tidak ada value yang bisa diambil untuk ditampilkan menjadi gambar.
Saya sebagai pengembang tema Blogspot dibuat cukup kelabakan akibat editor baru ini karena banyak sekali pengguna yang mengeluhkan hilangnya gambar dalam widget kustom tersebut.
Kenapa Bisa Terjadi Error?
Usut punya usut, ternyata gambar yang diunggah melalui editor baru memiliki format URL yang berbeda dengan editor lama. Sebagai perbandingan, inilah formatnya:
LAMA:
<img src="https://1.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/sXXXX/gambar.jpg"/>BARU:
<img src="https://1.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/wXXX-hXXX/gambar.jpg"/>XXXX dalam sXXXX dan wXXX-hXXX adalah angka, dimana nilainya berbeda-beda sesuai dengan dimensi ukuran gambar yang ingin ditampilkan.
Ternyata perbedaan format URL ini menjadi hal yang berdampak besar. Jika URL tidak mengandung sXXXX, maka gambar tidak akan terbaca di RSS feed. Masalahnya, setiap gambar yang diunggah di editor baru Blogger TIDAK memilik format tersebut, namun otomatis diganti dengan wXXX-hXXX.
Cara Memunculkan Gambar Thumbnail di Widget Pada Editor Baru Blogger
Ini adalah solusi untuk memperbaiki gambar tidak muncul di widget akibat editor baru Blogger. Sesuai penjelasan di atas, solusinya sederhana sekali.
- Edit postingan yang gambarnya tidak muncul pada widget kustom.
- Pindah pada mode HTML (bukan Compose).
- Lihat kode gambar dan perhatikan nilai
src. Jika memiliki format wXXX-hXXX, maka tinggal ganti menjadi sXXXX. - Terbitkan lagi postingannya.
CONTOH:
Lihat ini:
<img src="https://1.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/w625-h351/gambar.jpg"/>Ubah jadi seperti ini:
<img src="https://1.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/s1600/gambar.jpg"/>
Klik untuk melihat ukuran lebih besar
Hasil Akhir
Ini contoh dari widget kustom yang mengambil data dari RSS feed, yaitu related post. Saya coba di template Fiksioner gratis. Tadinya tidak ada gambar (diganti oleh gambar default). Setelah menerapkan cara di atas, gambar thumbnail langsung tampil. Ini karena value media$thumbnail.url muncul kembali di RSS feed.
Penutup
Akan sangat menyusahkan bagi pengguna yang tidak mau ribet, yang biasanya langsung posting dari mode Compose. Kalau perubahan format URL bisa berdampak besar pada hilangnya gambar di RSS feed, ada baiknya pihak Blogger melakukan update pada sisi RSS feednya juga. Karena yang mengubah format URL gambar secara otomatis itu editor baru Blogger, bukan pengguna.
Jadi kalau widget kustom di template kamu tiba-tiba tidak memunculkan gambar, entah itu widget related post (artikel terkait), recent post (artikel terbaru), dan lain sebagainya, jangan buru-buru mengumpat template yang sedang digunakan. Bisa jadi memang masalahnya ada di format gambar seperti yang sudah dijelaskan di atas.
Itu dia cara mengatasi gambar tidak muncul di related post atau recent post Blogger karena editor baru. Semoga bisa sedikit membantu. Kita pakai cara ini saja dulu sambil menunggu pihak Blogger melakukan update yang lebih baik.