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

layout grid tidak responsive


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

    pengaturan module equalheight
  4. Clone view page layout grid, kemudian lakukan pengaturan seperti berikut
    pengaturan view custom grid
  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


4 Responses to "Membuat Layout Bootstrap Custom Grid di Drupal"

  1. Kalau sudah pake bahasa english mah lieur kang.. urusannya mbah google lagi nih, translate, translate...

    ReplyDelete
    Replies
    1. makanya belajar bahasa ingris dong...kaya sayah nih

      Delete
    2. saya juga masih pake google translate mang..

      Delete
  2. custum grid di drupal sangatlah penting dan sering dibutuhkan ketika kita memposting artikel yang berbentuk grid, maka hayo...kita lakukan membuat layoutnyah

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...