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

pengaturan view untuk galeri
Penambah View Block untuk Foto galeri Bootstrap Modal

  1. 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
  2. Tambahka View result content
  3. 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
  4. 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
  5. 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 
  1. 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
  2. Pada block, pilihlah block yang sudah dibuat sebelumnya, yaitu Block Galeri Modal
  3. Pada Layout pilih “show only block content”
  4.  Terakhir simpan pemngaturan tersebut, lalu tambahkan ke bagian field footer dibawah tabs galeri, namun sebelum itu non aktifkan (disable) dulu field galeri yang sebelumnya.
  5. Bila berhasil maka tampilan foto galeri akan terlihat seperti berikut
    foto galeri dengan modal berhasil ditambahkan

   

3 Responses to "Membuat Halaman Foto Galeri Dengan Bootstrap Modal di Drupal"

  1. Hasilnya keren ya kang, foto kita tampak seperti ada dalam web profesional.

    ReplyDelete
  2. Kebetulan nih saya suka banget ngoprek koding :D
    saya save dah panduannya om dan semoga bisa seahli om dalam hal ginian wkwk

    ReplyDelete

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