Membuat Layout Bootstrap Custom Grid di Drupal

Masih melanjutkan artikel tentang cara mudah membuat website cantik dengan drupal & bootstrap, sebelumnya saya pernah menjelaskan tentang tata cara membuat layout bootstrap grid, dalam pembuatan layout tersebut ketika class small screen col-sm-6 ditambahkan ke layout grid ternyata tampilannya sedikit kurang responsive ada konten yang mengantung, konten tidak terbagi secara rata

Untuk mengatasi hal tersebut kita bisa menggunakan module equalHeight dan module equalHeight membutuhkan module libraries. Selanjutnya sesuai dengan dokumentasi yang terdapat pada module equalHeight kita perlu menambahkan pugin imageloaded dan ditaruh di sites/all/libraries/

Installation
------------
Starting with 7.x-2.x, equalheights module requires Libraries API 2.x. and imagesloaded plugin. If you have drush installed
on your machine, it's going to download required libraries. Otherwise, procede with the manual installation.

Installing required libraries manually.
-------------------------------------
Before installing equalheights module, download imagesloaded plugin from https://github.com/desandro/imagesloaded/releases/tag/v2.1.2.
You need two files: jquery.imagesloaded.js and jquery.imagesloaded.min.js. They should be copied to sites/all/libraries/imagesloaded.
You can also use git to clone the repository from the github.

Membuat Layout Custom Grid Bootstrap di Drupal

1. Instal module EqualHeight dan Libraries
2. Kemudian download dan ekstrak plugin imageloaded ke sites/all/libraries
3. Aktifkan module librari dan equalheight kemudian lakukan seting untuk media query equalheight, buat class kemudian tambahkan misal min-width:768px, shingga pada kondisi screen minimal 768px, class equalheight diaktifkan
   
   
   
4. Clone view page layout grid, kemudian lakukan pengaturan seperti berikut
   
5. Pada format atur menjadi unformatted list nanti tambahkan class col untuk smal screnn dan medium screen, selanjutnya tambahkan class equalheight yang sebelumnya sudah dibuat. Contoh : col col-sm-6 col-md-4 equalHeight
6. Atur semua konten view custom grid seperti yang terlihat pada pengaturan diatas, terkahir simpan/save

Untuk lebih lengkapnya Anda bisa melihat video pembuatan layout bootstrap custom grid pada playlist Cara Membuat Website Cantik Dengan Drupal & Bootstrap yang terdapat pada channel youtube Saya

Video Membuat Layout Bootstrap Custom Grid di Drupal

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