Mengatasi Gambar Thumbnail Blog yang Tidak Muncul Karena Update Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/21/2021

Mengatasi Gambar Thumbnail Blog yang Tidak Muncul Karena Update Blogger - Seperti kita ketahui bahwa baru-baru ini Blogger mengganti tempat penyimpanan gambar yang semula di domain bp.blogspot.com menjadi blogger.googleusercontent.com. Dan perubahan ini tidak terjadi serentak di semua blog, jadi sampai saat ini masih ada juga blog yang masih mendapatkan tempat hosting image blogger lama.

Dan bagi blog yang sudah mendapatkan perubahan tempat penyimpanan gambar Blogger terbaru, ada di antaranya blog yang mengalami error di bagian thumbnail postingan di homepage yaitu gambarnya tidak muncul atau blank.

Hal itu karena domain blogger.googleusercontent.com tidak atau belum mendukung thumbnail Blogger, sehingga blog yang menggunakan kode data:post.thumbnailUrl tidak dapat menampilkan gambar.

Sampai saat ini, kode data:post.thumbnailUrl hanya mendukung gambar dengan hosting bp.blogspot.com seperti berikut ini dari gambar postingan. Biasanya URL yang diambil dari gambar pertama postingan.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorSOBQ-BDPApR05j6G2N3uuEKMuSUB_hMc0cK_1eSQ2KE2Yo9SN9yhXNAsevLpy0XHqh09syCV2vL9w6gFe4JLD897dhj-ImjY3xlEiHQB2WVWg6ibn1AEbYI-9y9YgwPbhsZMslyFgQ/s72-c/thumb.jpg

Untuk itu, untuk mengatasi blank thumbnail, kita harus mengganti atau memberi kode follback untuk kode data:post.thumbnailUrl dengan kode data:post.firstImageUrl

Untuk yang belum tahu, kode data:post.firstImageUrl ini dapat mendeteksi semua gambar pertama postingan dengan hosting apa pun baik hosting blogspot maupun hosting pihak ketiga seperti imgur dan lainnya termasuk gambar thumbnail dari video Youtube.

Balik lagi ke perubahan tempat penyimpanan gambar Blogger terbaru yaitu dari bp.blogspot.com menjadi blogger.googleusercontent.com, ternyata semua parameter modifikasi image Blogger untuk hosting lama juga dapat berlaku untuk hosting baru, namun berbeda untuk penulisannya di URL image.

Sebagai contohnya, berikut ini URL image Blogger dengan hosting terbaru.

https://blogger.googleusercontent.com/img/a/AVvXsEghAQEHHYnk7NuLycYBxX9Hf5L_n-91Aoyp36aI0yoPX6tpU-1CLwj1hSZnoM3W11rr2JqOG-5eu-tDVyWYNhK1afYAPgLFBbFwDcJ2sEkSbHNgM2REnV1x5ysuGJyr0Qf_qOamMJiYM49opALTQW8CZhwSZJgOezli3vVVAdzf9XXd6M6d1JwpUXRK

URL image di atas menampilkan gambar dengan ukuran dimensi dan size gambar aslinya. Terlihat pada URL image tersebut kini tidak menggunakan nama dan type file gambar.

Nah, untuk parameter modifikasi gambar bisa kita tambahkan di ujung URL dengan kode = seperti berikut ini.

https://blogger.googleusercontent.com/img/a/AVvXsEghAQEHHYnk7NuLycYBxX9Hf5L_n-91Aoyp36aI0yoPX6tpU-1CLwj1hSZnoM3W11rr2JqOG-5eu-tDVyWYNhK1afYAPgLFBbFwDcJ2sEkSbHNgM2REnV1x5ysuGJyr0Qf_qOamMJiYM49opALTQW8CZhwSZJgOezli3vVVAdzf9XXd6M6d1JwpUXRK=s1280

atau

https://blogger.googleusercontent.com/img/a/AVvXsEghAQEHHYnk7NuLycYBxX9Hf5L_n-91Aoyp36aI0yoPX6tpU-1CLwj1hSZnoM3W11rr2JqOG-5eu-tDVyWYNhK1afYAPgLFBbFwDcJ2sEkSbHNgM2REnV1x5ysuGJyr0Qf_qOamMJiYM49opALTQW8CZhwSZJgOezli3vVVAdzf9XXd6M6d1JwpUXRK=w680-h382-p-k-no-nu

Nah, dengan begitu kita bisa melakukan resize image untuk hosting terbaru pada kode data:post.firstImageUrl seperti ini

data:post.firstImageUrl + "=s1280"

atau

data:post.firstImageUrl + "=w680-h382-p-k-no-nu"

Jadi untuk mengatasi gambar thumbnail yang tidak muncul, selengkapnya seperti berikut. Kemungkinan kode untuk thumbnail homepage setiap tema blog berbeda-beda, jadi Anda harus dapat menyesuaikannya dengan kode yang digunakan pada tema Anda. Di sini saya mengambil contoh dari tema Kompi Flexible.

Dan saran saya, untuk URL gambar dengan hosting terbaru sebaiknya hapus atau jangan gunakan param resize image yang di ujung URL seperti =s320 atau lainnya agar kita bisa menambahkan kode parameter resize image pada kode data:post.firstImageUrl

Sebagai contoh, misalnya kode thumbnail homepage sebelumnya seperti berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>

        <div class='posts-thumb'>

          <b:if cond='data:post.thumbnailUrl'>

            <img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 300, &quot;16:9&quot;)' expr:title='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>

<b:else/>

<img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkppwrKLfWJfcCa_9rz7mEEwut6xqnKjy6F3s2cBxahzHnKoUxrDaq8yJvrGjR01R-9xixxzcPyf1vdhG1-K5Q91qtl6MbTWq5LqwI0Zs7DN4UICSwYSCFEhBDx-GuRTRXYdOhLZGqK0/w300-h168-p-k-no-nu/no-thumbnail.jpg' expr:alt='data:post.title' expr:title='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>

          </b:if>

        </div>

</b:if>

Silahkan ganti dengan ini

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>

        <div class='posts-thumb'>

          <b:if cond='data:post.thumbnailUrl'>

            <img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 680, &quot;16:9&quot;)' expr:title='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>

            <b:else/>

            <b:if cond='data:post.firstImageUrl'>

              <img class='lazyload' expr:alt='data:post.title' expr:data-src='data:post.firstImageUrl + &quot;=w680-h382-p-k-no-nu&quot;' expr:title='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>

              <b:else/>

                <img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkppwrKLfWJfcCa_9rz7mEEwut6xqnKjy6F3s2cBxahzHnKoUxrDaq8yJvrGjR01R-9xixxzcPyf1vdhG1-K5Q91qtl6MbTWq5LqwI0Zs7DN4UICSwYSCFEhBDx-GuRTRXYdOhLZGqK0/w680-h382-p-k-no-nu/no-thumbnail.jpg' expr:alt='data:post.title' expr:title='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>

              </b:if>

              </b:if>

        </div>

</b:if>

Perhatikan kode yang ditandai, itu yang saya maksud sebagai kode follback. Untuk resizeImage dan parameter resize silahkan sesuaikan dengan tema Anda.

Jadi jika kode di atas dibaca seperti berikut: Ambil gambar dengan URL thumbnail, jika tidak ada maka ambil gambar dengan URL image dari gambar pertama postingan atau dari gambar thumbnail video Youtube, jika tidak ada maka gunakan gambar no-thumbnail.jpg

Demikian, semoga bermanfaat. Jika ada yang kurang dipahami, bisa kita diskusikan di kolom komentar.