Cara Mengatasi Gambar Widget Artikel Terkait Blog Tidak Muncul

PENYEBAB
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 (2020). Thumbnail postingan tidak terdeteksi ketika 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 contoh 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:

  1. Metode 1: 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 artikel terkait tidak muncul

    Gambar sesudah:
    Mengatasi gambar thumbnail widget tidak tampil


    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 sendiri 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.


  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 di related posts blogger tidak muncul

    Gambar sesudah:
    Thumbnail widget blog tidak tampil


    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.



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.
Komentar