Membuat Layout Grid Bootstrap Di Drupal

Artikel ini adalah penggalan dari artikel Teknik cepatdangampang Membuat Website Cantik melaluiataubersamaini Drupal & Bootstrap, sehingga nanti kalau ingin memperlajarinya, perlu dipelajari dulu artikelnya dari awal

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

Dalam pembuatan layout/view grid kali ini Saya akan mencoba melaksanakan penambahan module Image URL Formater, sehingga nanti format url imagenya memakai image urtl Formatter, bahwasanya dapat saja tanpa memakai module tambahan, spesialuntuk saja sebagai pembelajaran kita akan mencoba memakai module tersebut untuk path image/gambar dari layout grid yang akan kita buat. Makara nanti download dan instal module Image URL Formater terlebih lampau

Membuat Layout Grid Bootstrap di Drupal

1. Clone terlebih lampau 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, kemudian centang create a class, dan masukan class, misal “desk” 
6. Begitupun pada image, lakukan hal yang sama menyerupai pada body, gunakan element DIV, kemudian 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, semoga mempergampang kalau ada yang perlu diperbaiki 
8. Tambah field gres yaitu NID, ini dilakukan untuk mengambil atau ngelink ke konten yang bersangkutan, sebab disini kita akan mencoba memakai module Image URL Formater, sehingga nanti perlu dibentuk 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 diberikut <a href=”/node/[nid]”><img src=”[field_image]” class=”img-responsive”></a>
    

Sampai disini bahwasanya pembuatan layout grid sudah berhasil, spesialuntuk saja style dari layoutnya mungkin terlalu besar, sebab memakai class col col-lg-, untuk itu kita perlu melaksanakan theming dan mereplace style dari layout grid tersebut. Jika sebelumnya dalam pembuatan layout thumbnail kita mengatasinya dengan eksklusif mengedit pada modulenya, kini kita melaksanakan theming nya sesuai dengan hukum yaitu dengan menambahkan custom themingnya pada file template kemudian melaksanakan rescan template, sehingga secara otomatis nanti akan mereplace file dengan file custom yang kita gunakan. Nanti Anda dapat 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 gampang.

Share :