Membuat Layout Grid Bootstrap di Drupal

Artikel ini merupakan bagian dari artikel Cara Mudah Membuat Website Cantik Dengan Drupal & Bootstrap, sehingga nanti jika ingin memperlajarinya, perlu dipelajari dulu artikelnya dari awal

Sebelumnya saya sudah membuat layout thumbnail,  pada tahap selanjutnya kita akan mencoba membuat layout Grid. Sebenarnya proses pembuatan layout Grid ini sama sama saja seperti pembuatan layout thumbnail, sehingga nanti Anda hanya perlu mengclone (kloning) view untuk thumbnailnya.

Dalam pembuatan layout/view grid kali ini Saya akan mencoba melakukan penambahan module Image URL Formater, sehingga nanti format url imagenya menggunakan image urtl Formatter, sebenarnya bisa saja tanpa menggunakan module tambahan, hanya saja sebagai pembelajaran kita akan mencoba menggunakan module tersebut untuk path image/gambar dari layout grid yang akan kita buat. Jadi nanti download dan instal module Image URL Formater terlebih dahulu

Membuat Layout Grid Bootstrap di Drupal

1. Clone terlebih dahulu layout yang dibuat 
2. Selanjutnya pada Formatnya nanti pilih format Bootstrap Grid, kemudian pada format view nya pilih FIELD 
3. Selanjutnya pada FIELDS Title, Body, dan Image, nanti hapus default classnya, buat class sendriri 
4. Nanti pada Style setting centang “Costumize field HTML”, untuk HTML element title gunakan H3 
5. Pada pengaturan body nanti juga atur Costumize filed HTML dan gunakan element DIV, lalu centang create a class, dan masukan class, misal “desk” 
6. Begitupun pada image, lakukan hal yang sama seperti pada body, gunakan element DIV, lalu nanti buat class khusus untuk image nya, misal classnya “rimage”, dalam video Saya lupa menambahkan class untuk imagenya, 
7. Pembuatan class tersebut nanti untuk custom grid, supaya mempermudah jika ada yang perlu diperbaiki 
8. Tambah field baru yaitu NID, ini dilakukan untuk mengambil atau ngelink ke konten yang bersangkutan, karena disini kita akan mencoba menggunakan module Image URL Formater, sehingga nanti perlu dibuat NID 
9. Selanjutnya nanti pada image aktifkan Image URL, dan pilih path “Absolute” 
10. Kemudian masih pada image, aktifkan dan centang Rewrite results nya selanjutnya tulis baris baris berikut <a href=”/node/[nid]”><img src=”[field_image]” class=”img-responsive”></a>
    

Sampai disini sebenarnya pembuatan layout grid sudah berhasil, hanya saja style dari layoutnya mungkin terlalu besar, karena menggunakan class col col-lg-, untuk itu kita perlu melakukan theming dan mereplace style dari layout grid tersebut. Jika sebelumnya dalam pembuatan layout thumbnail kita mengatasinya dengan langsung mengedit pada modulenya, sekarang kita melakukan theming nya sesuai dengan aturan yaitu dengan menambahkan custom themingnya pada file template kemudian melakukan rescan template, sehingga secara otomatis nanti akan mereplace file dengan file custom yang kita gunakan. Nanti Anda bisa membuat class col col-lg menjadi class col col-md tanpa harus merubah dari modulnya secara langsung, sehingga dengan begitu proses theming akan jadi lebih mudah.

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple