Mencari Image Hosting - Cloudinary dot com

Pendahulan

Blog ini di-design dengan prinsip low resource. Untuk itu perlu pemilihan program dan service yang sesuai.

  • Software Sculpin dipilih sebagai Static Generator alih-alih menggunakan CMS.

  • Software Git untuk menyimpan revisi dan Github sebagai repository-nya.

  • Web service CDNJS dot com dipilih sebagai CDN library Javascript alih-alih self-hosting.

  • Web service Google Analytics dipilih untuk analisis dan statistik pengunjung.

  • Web service Disqus dipilih untuk engine diskusi/komentar.

Sampai dengan tulisan ini dibuat, blog ini belum memiliki artikel yang terdapat gambar didalamnya.

Alih-alih menyimpan image di server sendiri, akan lebih baik jika image di-host oleh pihak ketiga.

Sesuai dengan prinsip low resource. Pencarian web service untuk image hosting pun dimulai.

Mengapa Cloudinary dot com

Berawal dari keinginan untuk "mengupload gambar ke Image Hosting secara programming".

Googling dengan query "image hosting with upload api" didapat hasil dua teratas:

Cloudinary dot com akhirnya menjadi pilihan untuk Image Hosting setelah menyimak diskusi di stackoverflow dan membedah API Cloudinary yang dihost di Github.

Kebutuhan akan upload API ini penting untuk bisnis pengembangan software dan web development kedepannya.

Bagaimana dengan harga?

Sampai tulisan ini dibuat, Cloudinary terdapat skema free untuk 75.000 files, 2 GB Managed Storage, dan 5 GB Monthly Banditwh.

Ini sudah lebih dari cukup untuk kebutuhan personal.

Storage yang dapat dimanage membuat kita bisa membuat subdirektori dan memanage file sesuai kebutuhan.

Integrasi dengan Sculpin

Saya mengupload gambar di Cloudinary didalam folder ijortengab.id bernama screenshot.509.png.

Setelah meng-upload terdapat keterangan diantaranya URL dan fungsi dalam beberapa bahasa pemrograman.

Yang menarik ternyata juga ada fungsi jQuery yakni $.cloudinary.image("ijortengab.id/screenshot.509.png")

Setelah membaca dokumentasi Cloudinary - jQuery integration, saya melakukan sedikit hacking agar dapat memasukkan gambar didalam article dengan cara yang berbeda.

Alih-alih menggunakan full URL, saya menciptakan sendiri attribute cloudinary yang berisi path internal file didalam Cloudinary.

Javascript (jQuery) yang akan menggenerate image berdasarkan informasi dari attribute tag tersebut.

Kekurangan cara ini ialah gambar kemungkinan besar tidak bisa di-retrieve oleh mesin pencari (search engine) semacam Google.

Hacking

Edit file sculpin_site.yml dan tambahkan informasi cloudinary sebagai berikut:

cloudinary:
  cloud_name: ijortengab
  api_key: 675184379558338

Pada layout utama (default.html), saya menambahkan baris code sebagai berikut:

{% if site.cloudinary %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.1.9/cloudinary-jquery-file-upload.min.js"></script>
<script>
$.cloudinary.config({ cloud_name: '{{site.cloudinary.cloud_name}}', api_key: '{{site.cloudinary.api_key}}'})
$('img[cloudinary]').each(function () {
    var cloudinaryPath = this.attributes.cloudinary.value;    
    var $newImage = $.cloudinary.image(cloudinaryPath);
    // Copy attributes.
    $.each(this.attributes, function() {        
        if (this.specified) {
            if (this.name != 'src' && this.name != 'cloudinary') {
                $newImage.attr(this.name, this.value);
            }      
        }
    });
    // Replace.
    $(this).replaceWith($newImage);
});
</script>
{% endif %}

Untuk setiap artikel, memasukkan gambar cukup dengan pola sebagai berikut:

<img cloudinary="$path_internal">

Contoh Hasil

Hasil dari code ini:

<img cloudinary="ijortengab.id/screenshot.509.png" alt="Screenshot hasil googling dengan query &quot;image hosting with upload api&quot;">

adalah gambar dibawah ini:

Screenshot hasil googling dengan query "image hosting with upload api"

Penutup

Cloudinary dot com adalah pilihan yang tepat (setidaknya untuk saat ini) untuk image hosting dengan fitur upload image programatically.