Script untuk mengatasi gambar postingan blog yang tidak muncul di Blogger

Semenjak beberapa bulan yang lalu, gambar postingan di blog yang dihost di Blogger mendadak error atau banyak yang menyebutnya tidak muncul. Hal ini bertepatan dengan update yang dilakukan oleh Google pada beberapa produknya.

Sebagai informasi bahwa update Google berimbas tidak hanya pada Blogger melainkan juga Search Console yang kebiasaannya berubah menjadi aneh, banyak memberikan peringatan error terhadap blog, padahal salah satu dari sekian banyak error tersebut disebabkan oleh produk Google sendiri yaitu script Adsense. Lainnya adalah error server 5xx yang selama 5 tahun Blogizty berkarir di Blogger, baru kali ini mendapati error tersebut.

Pun sama halnya dengan Youtube, banyak yang mengatakan bahwa Google sedang melakukan razia pembersihan besar-besaran sehingga banyak akun dibanned maupun hanya dismon. Itu karena dalam updatenya Google telah menerapkan 'sesuatu' yang baru yang membuat mereka dapat dengan mudah memilih konten yang tidak sesuai pedoman komunitas.

Sedangkan untuk gambar postingan yang tidak muncul di Blogger, Blogizty masih ragu seandainya ini disebabkan oleh efek update.

Itu karena pada saat kejadian ini muncul pertama kali, Blogizty tidak mengalami hal ini sementara orang lain mengalaminya. Namun setelah beberapa waktu kemudian, barulah hal itu terjadi bahkan pada 5 blog yang dikelola.

Sebelumnya, beberapa orang mengatakan bahwa hal ini hanya berlaku ketika mereka menggunakan jaringan dari provider seluler Telkomsel. Setelah mereka mengganti provider, masalah selesai. Namun seiring waktu, masalah tersebut selesai dengan sendirinya bahkan tidak berganti provider pun.

Sekarang, masalah tersebut muncul ketika kita menggunakan jaringan dari provider seluler 3 (Tri/Three) Hutchison. Hal yang mereka nyatakan, sama dengan yang Blogizty alami ketika mengakses blog melalui handphone. Sedangkan di komputer melalui hotspot seluler dengan jaringan yang sama, semuanya baik-baik saja.

Sebaliknya, pengguna jaringan seluler dari provider lain tidak mengalami masalah, gambar postingan muncul, baik di handphone maupun komputer.

Keraguan Blogizty akan efek update terhadap masalah ini juga diperkuat oleh gagalnya onerror event yang diterapkan pada gambar di mana seharusnya ketika browser gagal memuat gambar, maka gambar lain yang dirender oleh onerror event muncul. Tapi justru tidak, dan ini membuktikan bahwa kesalahan bukan pada browser.

Anehnya, tidak semua gambar mengalami error karena sebagian lainnya muncul. Lalu ketika dilakukan inspeksi, ternyata sumber gambar di bp.blogspot.com dengan prefix 1 saja yang mengalami error, sementara lainnya tidak.

Jadi kemungkinan, sumber gambar telah diblokir oleh provider seluler yang bersangkutan. Bahkan di forum Google juga ada yang menyebutkan bahwa khusus di Indonesia, url 1.bp.blogspot.com telah diblokir oleh pemerintah setempat.

Namun, saat ini provider seluler lain sudah dapat mengakses url dan menampilkan gambar kecuali Tri. Jika demikian, maka Tri belum membuka blokir.

Jadi, solusi untuk masalah ini adalah dengan tidak menggunakan jaringan dari provider seluler Tri. Tapi masalahnya, bagaimana dengan para pengunjung blog? Apakah kita harus menyuruh mereka untuk tidak menggunakan Tri hanya supaya dapat melihat gambar di blog kita dengan cara menampilkan peringatan?

Cara efektif adalah dengan mengelolanya sendiri yaitu dengan mengubah prefix subdomain menjadi selain 1, misalnya 2, 3 atau 4. Dan hasilnya akan menjadi seperti ini :

https://2.bp.blogspot.com/pathname.jpg

Atau boleh juga mengganti nama hostnya menjadi lh3.googleusercontent.com sehingga hasilnya akan menjadi seperti ini :

https://lh3.googleusercontent.com/pathname.jpg

Itu artinya kita harus mengedit setiap postingan dan mengubahnya menjadi selain 1.bp.blogspot.com. Tapi masalahnya, bagaimana jika postingannya banyak melebihi 100? Atau bahkan 200? Butuh berapa lama jika kita mengeditnya satu persatu? Di situlah kita perlu menggunakan cara otomatis yaitu dengan menggunakan script.

Okay, jika memang blog kalian memiliki postingan lebih dari 100 maka boleh coba gunakan script ini. Namun bila kurang, maka akan lebih baik diedit satu persatu.

Namun sebelumnya, pastikan dulu apa penyebab gambar postingan tidak muncul di blog. Jika itu disebabkan oleh pemblokiran provider maka silakan gunakan script ini.

<script>
//<![CDATA[
/*! RefreshImages - refresh Blogger images by Ale Hardiana */
var prevHost=/[1]+.bp.blogspot.com/;
var nextHost='2.bp.blogspot.com';
function refreshImages(){var errorImages=document.getElementsByTagName('img');for(var i=0;i<errorImages.length;i++){refresh=errorImages[i].src.replace(prevHost,nextHost);errorImages[i].src=refresh;}};window.addEventListener('load',refreshImages);
//]]>
</script>

Modifikasi script

var prevHost adalah untuk nama host gambar yang akan diubah, sedangkan var nextHost adalah untuk nama host gambar yang akan mengubah/menggantikan.

Secara default, script ini hanya akan mengubah nama host dari 1.bp.blogspot menjadi 2.bp.blogspot, sehingga apabila ingin mengubah semua prefix bp.blogspot maka kalian boleh mengubah angka 1 dari nilai variabel prevHost menjadi seperti ini :

var prevHost=/[1-4]+.bp.blogspot.com/;

Sedangkan apabila ingin mengubahnya menjadi 3.bp.blogspot maupun lh3.googleusercontent maka kalian boleh mengubah nilai variabel nextHost menjadi seperti ini :

var nextHost='lh3.googleusercontent.com';

Deskripsi script

Di luar sana banyak yang membagikan script untuk mengatasi gambar postingan tidak muncul, terbanyak di antaranya merupakan script yang sama seperti ini :

<script>//<![CDATA[

    var img = document.getElementsByTagName('img');

    for(var i=0;i<img.length;i++) {

        img[i].src = img[i].src.replace(/[0-9]+.bp.blogspot.com/,"3.bp.blogspot.com");

    }

//]]></script>

Script tersebut lebih sederhana dan juga dapat berfungsi. Namun tidak menggunakan event, yang artinya ketika browser memuat halaman maka script langsung mengeksekusi perintah tanpa menunggu seluruh konten DOM termuat sepenuhnya.

Sementara itu, konten seperti gambar dan video sejatinya dimuat di akhir loading oleh browser sehingga script yang memanipulasi gambar dan video tanpa menggunakan event biasanya tidak bekerja dengan baik, alias hanya berhasil pada sebagian gambar khususnya yang berada di bagian atas saja.

Untuk itulah pada script ini Blogizty menggunakan onload event yang cara kerjanya yaitu ketika seluruh halaman selesai dimuat, termasuk gambar dan video, kemudian script mulai mengeksekusi perintah.

Sehingga ketika browser masih melakukan loading, gambar masih tetap error dan tidak muncul. Namun setelah loading selesai, script mulai bekerja memperbarui gambar dengan memanipulasi url. Itu sebabnya script ini dinamakan Refresh Images.

Terkecuali, jika proses loading mengalami interupt atau dihentikan secara manual oleh pengguna browser maka script akan gagal. Hal seperti itu tidak hanya berlaku untuk script ini saja melainkan juga untuk script lainnya.

Selain itu, script ini juga tidak akan bentrok dengan LazyLoad buatan Afarkas di mana sumber gambar dimuat dalam attribute data-src karena cara kerja LazyLoad tersebut adalah dengan mengubah attribute data-src menjadi src setelah seluruh konten DOM dimuat.

Sehingga apabila tidak menggunakan onload event, maka sumber gambar yang masih memiliki attribute data-src akan gagal diubah karena script dengan menggunakan metode replace, mengubah value dari attribute src.

Sebagai saran, apabila gambar postingan di blog hanya sedikit maka dengan menggunakan script yang dibagikan di luar sana, itu sudah cukup efektif. Sebaliknya, jika banyak maka silakan bandingkan script tersebut dengan script Refresh Images ini.

Tips menghindari gambar error di masa depan

Setelah menambahkan gambar pada artikel saat membuat postingan, baiknya periksa alamat gambar.

Untuk blogger pemula, ubah mode penulisan menjadi Tampilan HTML. Kemudian cari tag <img yang diikuti oleh beberapa attribute lainnya. Tak perlu pusing, fokus saja di tag tersebut untuk kemudian cari attribute seperti ini :

src="https://1.bp.blogspot.com/

Ubah angka 1 menjadi 2, 3 atau 4 karena bp.blogspot.com hanya menyediakan prefix hingga 4. Atau boleh juga dengan mengubah nama host seperti yang telah dijelaskan di atas.

Catatan

Masalah gambar postingan error yang terjadi saat ini boleh jadi akan teratasi dengan sendirinya ketika pemblokiran dibatalkan oleh provider. Namun masalahnya, hingga kapan kita akan menunggu?

Tak hanya itu, dengan menggunakan script untuk memanipulasi url gambar, itu artinya kita dapat mencegah pemblokiran yang sama terhadap url lain di masa mendatang.

© Blogizty