SegalaHal.com - Menerapkan Gambar Dummy Pada Aplikasi Web

Menerapkan Gambar Dummy Pada Aplikasi Web

Diposting pada 747 views

Hola, pembaca SegalaHal! Pada tulisan ini saya akan membahas mengenai bagaimana menerapkan gambar dummy pada aplikasi web. Yuk, kita mulai saja pembahasan tulisan ini ya.

Mengapa Menerapkan Gambar Dummy?

Saat proses mengembangkan aplikasi web biasanya kita melakukan desain atau templating mengatur layout / tata letak terlebih dahulu sehingga mengesampingkan konten asli web-nya. Dengan begitu kita bisa lebih fokus menciptakan desain tata letak atau layoutnya, tanpa terdistraksi dari konten asli.

Selain itu, pada sebuah contoh kasus lain misalnya kita ingin membuat sebuah desain blog atau web berita, namun pada awal pembuatannya tentu kita belum memiliki konten artikelnya kan? Meskipun konten aslinya belum ada, tapi kita tetap harus membuat desain yang nantinya dapat menampilkan konten dengan menarik.

Nah untuk mengerjakan proses desain tersebut, teks dan gambarnya bisa kita ganti dengan konten tiruan atau biasa kita sebut dummy. Konten berupa teks (misalnya judul dan artikel) umumnya kita ganti menggunakan teks Lorem Ipsum seperti ini:

See the Pen Desain Web – Lorem Ipsum by Yusuf Sugiono (@Yusuf-Sugiono) on CodePen.

Lalu bagaimana dengan konten berupa gambar, misalnya untuk thumbnail atau galeri gambar?

Umumnya kita harus memiliki berkas gambarnya dahulu agar dapat kita masukkan ke dalam aplikasi web yang akan kita buat. Namun ada kemungkinan bahwa gambar asli yang kita butuhkan belum tersedia pada tahap desain ini, misalnya seperti pada contoh kasus web berita atau blog yang saya ceritakan tadi.

Untungnya dengan menggunakan gambar dummy kita tidak perlu memiliki berkas gambarnya, bahkan tidak perlu men-download-nya. Gambar dummy biasanya dapat kita masukkan dalam bentuk link saja.

Lalu bagaimana caranya?

Dynamic Dummy Image Generator

Salah satu penyedia gambar dummy yang sering saya gunakan adalah Dynamic Dummy Image Generator. Situs penyedia gambar dummy yang satu ini adalah buatan Russel Heimlich. Kalian bisa akses Dummy Image Generator melalui laman resminya https://dummyimage.com/ .

Untuk format link gambarnya dapat ditulis seperti berikut:

https://dummyimage.com/600x400/000/fff.jpg&text=SegalaHal

  • 600 merupakan ukuran lebar gambar.
  • 400 merupakan ukuran tinggi gambar. Bagian ini bisa dikosongi jika menginginkan gambar dengan ukuran tingginya sama dengan lebar (berbentuk persegi / rasio 1:1). Contohnya: https://dummyimage.com/600/000/fff.jpg&text=SegalaHal
  • 000 merupakan kode warna background hitam. Bisa diubah dengan menggunakan color picker yang ada pada kolom di laman webnya. Bagian ini tidak wajib kita isi, untuk default-nya akan berwarna abu-abu (ccc)
  • fff merupakan kode warna foreground atau warna teks pada gambarnya. Dalam hal ini fff akan memberikan warna putih. Bagian ini juga tidak wajib kita isi. Default-nya akan berwarna hitam (000).
  • .jpg adalah format gambar yang akan kita gunakan. Bagian ini bisa kita isi dengan jpg , jpeg, atau gif. Bagian ini dapat kita biarkan kosong, defaultnya akan menjadi gambar gif.
  • &text=SegalaHal kita gunakan untuk memodifikasi teks yang akan kita tampilkan pada gambarnya. Jika kita tidak menuliskan bagian ini maka yang tampil adalah ukuran gambarnya (contoh jika bagian ini dihapus maka yang tampil adalah teks 600×400 ).

Dokumentasi lebih lengkapnya bisa kalian baca sendiri pada laman Dynamic Dummy Image Generator ya.. ( https://dummyimage.com )

Link gambar pada contoh di atas jika kita akses maka akan menghasilkan gambar seperti berikut:

Untuk contoh penggunaannya pada aplikasi web bisa seperti potongan kode berikut ini:

See the Pen Untitled by Yusuf Sugiono (@Yusuf-Sugiono) on CodePen.

Kalian tidak suka dengan gambar yang terlalu polos? Eits, masih ada opsi lain yang bisa kalian coba selain Dynamic Dummy Image Generator, yaitu Lorem Picsum yang lebih menarik!

Lorem Picsum

Satu lagi opsi penyedia gambar dummy yang sering saya gunakan adalah Lorem Picsum. Situs web ini dibuat oleh David Marby & Nijiko Yonskai dan dapat kita akses melalui https://picsum.photos .

Gambar yang dapat kita buat dengan Lorem Picsum adalah gambar nyata secara acak dan tentunya lebih berwarna daripada Dynamic Dummy Image Generator. Lorem Picsum ini lebih cocok untuk mendesain web yang menampilkan semacam galeri foto.

Cara menggunakannya pun sangat mudah, yang paling sederhana bisa dengan menuliskan seperti ini saja: https://picsum.photos/200 . Angka 200 pada bagian belakang linknya bertujuan untuk membuat gambar yang memiliki ukuran panjang dan lebar 200 piksel.

Jika menghendaki untuk membuat gambar yang bentuknya tidak persegi maka bisa tambahkan lagi ukuran tingginya ( https://picsum.photos/200/300 )

Bahkan kita bisa memilih apakah ingin menggunakan filter blur ataupun hitam putih, apakah ingin menampilkan gambar yang berbeda-beda ataukah gambar yang sama, apakah ingin gambar tetap atau gambar yang acak, dan masih banyak lagi pilihan fiturnya. Lebih lengkapnya kalian bisa coba ulik dan baca di web resminya ya.. Berikut saya langsung tampilkan saja contoh implementasinya pada kode desain aplikasi web.

See the Pen Untitled by Yusuf Sugiono (@Yusuf-Sugiono) on CodePen.

Bagaimana? Mudah, kan? Mungkin masih banyak lagi penyedia gambar dummy lainnya yang tidak dapat saya bahas semua pada tulisan ini. Kalau kalian biasanya menggunakan gambar dummy yang mana nih? Share melalui kolom komentar ya 🙂

Mungkin cukup sekian dulu tulisan kali ini. Terimakasih telah membaca hingga akhir, semoga bermanfaat ya!! Sampai ketemu pada tulisan berikutnya. 🙂