Membuat Halaman Foto Galeri Dengan Bootstrap Modal di Drupal

Setelah sebelumnya berhasil melakukan kolaborasi module Display suite, Bootstrap Tabs dengan field Group, maka selanjutnya pada projek membuat website cantik dengan drupal & bootstrap ini kita akan menambahkan halaman foto galeri dengan bootstrap modal.

Sebelumnya perlu dibuat dulu sebuah block foto galeri menggunakan bantuan view, setelah itu block foto galeri tersebut ditambahkan kedalam display suite yang mana konten dari foto galeri tersebut akan berada di bawah bootstrap tabs. Bila ada yang belum paham tentang apa itu bootstrap modal, silahkan lihat dokumentasinya di getbootstrap.com

Membuat Halaman Foto Galeri Dengan Bootstrap Modal di Drupal

#1 Buatlah Sebuah Block Galeri Dengan View
Buat sebuah Block menggunakan view, kemudian aturlah kontennya seperti berikut

Penambah View Block untuk Foto galeri Bootstrap Modal

Pada unformmated list klik setting, hilangkan tanda centang pada Add views row classes dan Add striping (odd/even), first/last row classes, lalu pada row class tambahkan col col-sm-6 col-md-4

Tambahka View result content

Tambahkan field galeri dengan pengaturan sebagai berikut, Create label dicentang, pada kolom label masukan “hidden” kemudian centang exclude from display, pada formatter pilih Image URL -> Absolute, image stylenya pilih Large. Selanjutnya hilangkan tanda centang pada Display all values in the same row di multiple field setting

Tambahkan kembali konten Galeri, kali ini hilangkan tanda centang pada create label maupun exlude from display, pada formater gunakan Image Url -> Absoulte, dan untuk image stylenya pilih Bootstrap Thumbnail. Selanjutnya hilangkan tanda centang pada Display all values in the same row di multiple field setting

Terakhir masih di konten Galeri, pada rewrite result gunakan bootstrap modal seperti berikut

<!-- Button trigger modal -->
<a type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-[counter]">
  <img src="[field_galeri]" class="img-responsive">
</a>

<!-- Modal -->
<div class="modal fade" id="myModal-[counter]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <a type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
        <h4 class="modal-title" id="myModalLabel">[field_galeri-title]</h4>
      </div>
      <div class="modal-body">
         <img src="[field_galeri_1]" class="img-responsive">
      </div>
      <div class="modal-footer">
        <a type="button" class="btn btn-default" data-dismiss="modal">Close</a>
             </div>
    </div>
  </div>
</div>

#2 Tambahkan Block Galeri ke Display Suite

Klik salah satu artikel kemudian klik Manage Display > Custom fields > Add a block field. Nanti selanjutnya centang node, kemudian pada limit field masukan article|default

Pada block, pilihlah block yang sudah dibuat sebelumnya, yaitu Block Galeri Modal

Pada Layout pilih “show only block content”

Terakhir simpan pemngaturan tersebut, lalu tambahkan ke bagian field footer dibawah tabs galeri, namun sebelum itu non aktifkan (disable) dulu field galeri yang sebelumnya.

Bila berhasil maka tampilan foto galeri akan terlihat seperti berikut

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