Kolaborasi Module Display Suite, Bootstrap Tabs Dengan Field Group

Untuk dapat menggunakan Bootstrap Tabs Anda perlu menginstal Module Bootstrap field group, karena bootstrap tabs itu sendiri adalah bagian dari bootstrap field group. Selanjutnya perlu ditambahkan juga yang namanya module field group.

Dari namanya saja sudah bisa ditebak bahwa field group ini digunakan untuk mengelompokan field – field tertentu yang terdapat pada sebuah content type. Kalau yang saya pahami seperti itu, tapi untuk lebih jelasnya silahkan pahami dokumentasi modulenya drupal.org.

Projek ini tentunya masih bagian dari cara mudah membuat website cantik dengan drupal & bootstrap, sehingga Anda harus mempelajarinya dari awal supaya bisa memahami semuanya dengan lebih jelas.

Setelah sebelumnya berhasil melakukan instalasi dan konfigurasi module display suite maka sekarang saatnya mengkolaborasikan module tersebut dengan bootstrap tabs, setiap field yang telah dibagi kedalam display layout akan disimpan ke dalam tabs, sehingga diharapkan nanti tampilannya akan lebih rapih.

Kolaborasi Module Display Suite, Bootstrap Tabs Dengan Field Group


  1. Download dan Instal Module Bootstrap field group dan field group 
  2. Klik Structure > Content Types > Article > Manage Display 
  3. Nanti scroll ke bawah, pada bagian kolom Add new group tambahkan field baru, yaitu field tabs dengan format Bootstrap nav : tabs/pills 
  4. Selanjutnya setelah itu tambahkan juga field baru lainnya diantaranya, field full story, galeri dan video dengan format Bootstrap nav : item 
  5. Kemudian tempatkan konten – konten tersebut diatas field – field yang yang bersangkutan, misal field body dibawah full story, galeri dibawah galeri dan youtube dibawah video 
  6. Sehingga nanti kurang lebih nanti pengaturannya akan terlihat seperti berikut 
    format pengaturan untuk tabs

  7. Terakhir klik save, bila berhasil maka nanti content article akan terlihat seperti berikut
    hasil bootstrap tabs


Supaya Tabs Full strory otomatis dalam keadaan aktif pada saat konten diakases, maka Anda nanti bisa melakukan pengaturan dengan mengklik roda gigi pada bagian full story kemudian tambahkan class ‘active’ sehingga hal tersebut akan membuat field full story aktif secara otomatis ketika konten pertama kali diakses, langkah berikutnya adalah membuat halaman foto galeri dengan bootstrap modal



2 Responses to "Kolaborasi Module Display Suite, Bootstrap Tabs Dengan Field Group"

  1. Ora mudeng mas :D
    Oiya mohon maaf lahir batin ya. Long time no bw nih

    ReplyDelete
    Replies
    1. saya juga mas cari artikl yang sekiranya bisa komentar tapi gimana lagi nih. ora mudengn juga nih

      Delete

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