Membuat Tampilan Grid Gallery Tanpa Menggunakan Plugin di WordPress

Membuat gambar berbentuk grid atau grid gallery tidak lah susah. Namun, tidak semua orang dapat membuatnya, karena diperlukan pengetahuan tentang HTML dan CSS. Biasanya, seseorang akan mencari plugin tertentu yang memungkinkan dia untuk membuat tampilan grid gallery di postingannya.

Oh iya, bagi yang belum tahu tentang grid gallery, grid gallery adalah tampilan beberapa gambar yang tertata rapi berbentuk kotak-kotak. Salah satu contoh grid gallery pernah saya buat pada post di sini. Pada post tersebut dapat Anda lihat 4 buah gambar yang disusun dalam bentuk grid. Rapi kan? Nah, pada post ini akan saya jelaskan bagaimana membuat tampilan grid gallery tanpa menggunakan plugin di WordPress.

Membuat Tampilan Grid Gallery Tanpa Menggunakan Plugin di WordPress

Membuat tampilan grid gallery sebenarnya tidak susah, asalkan kita paham sedikit CSS dan HTML, maka kita dapat membuatnya dengan mudah. Caranya yaitu ketika kita menulis artikel (tampilan teks editor WordPress), pindahlah dari tab Visual ke tab Text. Setelah itu ketikkan kode HTML sebagai berikut:

<div id="picture-grid-gallery">
    <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
    <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
    <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
    <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
    <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
    <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
</div>

Setelah itu, masih pada teks editor WordPress. Ketikkan kode CSS sebagai berikut:

<style>
#picture-grid-gallery {
    max-width:600px;
}
.grid-gallery {
    height: 320px;
    width: 160px;
    display:inline-block;
}
</style>

Selain disatukan pada teks di artikel, kode CSS juga dapat dimasukkan di Editor CSS WordPress. Lokasinya ada di Appearance >> Edit CSS. Jika dimasukkan di Editor CSS, maka Anda tidak perlu menuliskan tag <style> … </style>

Saya sendiri lebih suka jika kode CSS ditaruh di Edit CSS, karena supaya dapat digunakan di post manapun. Tetapi kekurangannya adalah ketika kita mengubah theme, maka kode tersebut juga akan ikut hilang. Jadi jangan lupa back up!

Untuk id dan class di atas (yang ada tanda # dan . ), pastikan tidak ada yang duplikat dengan CSS bawaan theme WordPress yang kita gunakan. Oleh karenanya kita dapat memberinya nama yang unik, misanya: picture-grid-gallery menjadi picture-grid-gallery-keren, dan sebagainya.

Sesuaikan dengan Theme WordPress Anda

Oh iya, kode di atas masih berupa kerangkanya saja, artinya meskipun sudah tampil berupa grid, tapi mungkin saja kita harus menyesuaikan dengan theme WordPress yang kita gunakan. Alternatif kode jika ternyata tidak berhasil, kita dapat memanfaatkan tag table sehingga menjadi sebagai berikut:

<div id="picture-grid-gallery">
<table>
<tr>
     <td>
         <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
     </td>
     <td>
         <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
     </td>
</tr>
<tr>
     <td>
         <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
     </td>
     <td>
         <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/>
     </td>
</tr>
</table>
</div>

Kode CSS nya pun bisa jadi berubah mengingat tabel memiliki border yang mungkin saja mengganggu tampilan grid gallery kita. Berikut ini contoh CSS nya jika kita menggunakan table.

#picture-grid-gallery {
	max-width: 600px;
}

#picture-grid-gallery table {
	border: none; /* menghilangkan border di tag table */
}

#picture-grid-gallery td {
	border: none; /* menghilangkan border di tag td */
}

.grid-gallery {
	display: inline-block;
	width: 300px;
}

Berikut ini adalah beberapa contoh tampilan ketika kita berhasil membuat tampilan gallery grid.

Sekian tutorial untuk membuat grid gallery di WordPress, semoga bermanfaat.