Bagi kamu yang memiliki web atau blog mungkin pernah terkendala karena storage penuh, atau tidak bisa menampilkan gambar karena terkendala masalah dalam mengupload gambar. Sebenarnya, kita bisa menggunakan gambar yang ada di google drive. Berikut ini, saya akan membuatkan contoh script untuk menggenerate url gambar yang tersimpan di google drive supaya bisa diakses melalui pada html atau css.

Pastikan url gambar yang Anda miliki sudah bersifat public dan link shareable nya sudah on. Konsep dasar pada script yang saya buat adalah memformat url drive menjadi url image supaya bisa diakses melalui html. Ikuti step berikut ini :

1. Buka akun google drive Anda
2. Upload gambar (apabila belum ada)
3. Buat link shareable nya on, seperti pada gambar 1

4. copy id yang ada pada url dan masukkan ke dalam url ini (setelah id), sehingga menjadi seperti demikian

https://drive.google.com/uc?export=view&id=0B8sh1vFlFstUTWJIMjVFSTU4Z2c

5. Masukkan url yang baru ke dalam HTML, misal pada tag <img src=""> atau bisa juga ke dalam css.

Kemudian, untuk script nya saya menggunakan jquery. Proses nya, Anda copy semua url yang ada, kemudian masukkan ke dalam form input dengan id yang sudah saya buat. Script ini bisa anda lampirkan juga pada konfigurasi web anda, sehingga menjadi plugin sederhana untuk mempermudah dalam menampilkan gambar.

<script>
    $( "#idevDrivetoImage" ).keyup(function() {
        var url_drive = $(this).val();
        var new_url_drive = "";

        if(url_drive.includes('https://drive.google.com/file/d/')){
            let r = Math.random().toString(36).substring(7);

            new_url_drive = url_drive.replace("https://drive.google.com/file/d/", "https://drive.google.com/uc?export=view&id=").replace("/view?usp=sharing", "").replace("/view", "");
            $("#idevResult").html("<h5>Result : </h5> &lt;img src='"+new_url_drive+"' width='100%' alt='"+r+"' &gt;");

        }else{
            $("#idevResult").html("<h5>Result : </h5><span class='text-danger'> Url is not valid! </span>");
        }
    });

</script>

Kemudian untuk inputannya atur saja sebagai input text sebagai berikut ini:

<input id="idevDrivetoImage" type="text">
<div id="idevResult"></div>

Bila kita menjalankan script ini, maka akan menggenerate tag html seperti demikian:

Selamat mencoba, lumayan lho ada quota 15GB gratis dari google per akun. Kalau ingin lebih banyak lagi, tinggal buat akun baru saja.