Membuat Halaman Foto Galeri Dengan Bootstrap Modal Di Drupal

Sesudah sebelumnya berhasil melaksanakan kolaborasi module Display suite, Bootstrap Tabs dengan field Group, maka selanjutnya pada projek menciptakan website bagus dengan drupal & bootstrap ini kita akan menambahkan halaman foto galeri dengan bootstrap modal.

Sebelumnya perlu dibentuk dulu sebuah block foto galeri memakai menolongan view, sehabis itu block foto galeri tersebut dimenambahkan kedalam display suite yang mana konten dari  foto galeri tersebut akan berada di bawah bootstrap tabs. Bila ada yang belum paham ihwal apa itu bootstrap modal, silahkan lihat dokumentasinya di getbootstrap.com

Membuat Halaman Foto Galeri melaluiataubersamaini Bootstrap Modal di Drupal

#1 Buatlah Sebuah Block Galeri melaluiataubersamaini View
Buat sebuah Block memakai view, kemudian aturlah kontennya menyerupai diberikut

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, kemudian pada row class menambahkan col col-sm-6 col-md-4
2. Tambahka View result content
3. Tambahkan field galeri dengan pengaturan sebagai diberikut, 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 menyerupai diberikut
   
   

   <!-- 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 dibentuk sebelumnya, ialah Block Galeri Modal
3. Pada Layout pilih “show only block content”
4.  Terakhir simpan pemngaturan tersebut, kemudian menambahkan ke bab 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 menyerupai diberikut
   

   

Share :