Membuat Artikel Tampilan Thumbnails Memakai Module Views Bootstrap

Disini Saya akan mencoba membuat salah halaman/page yang menampilkan artikel dengan tampilan thumbnails memakai salah satu module yaitu Views Bootstrap. Module Views Bootstrap ialah salah satu module Drupal yang memerlukan proteksi template Bootstrap, jadi kalau ingin mencoba tampilan artikel dengan thumbnails pada website Drupal Anda, maka Anda perlu memakai template Bootstrap terlebih lampau.

Dukungan :
Instalasi dan Konfigurasi Template Bootstrap Pada Drupal 7

Dalam module Views Boostrap Anda dapat menentukan beberapa tampilan/view, salah satunya yaitu tampilan Bootstrap thumbnails.  Berikut yaitu cara Membuat Artikel Tampilan Thumbnails Menggunakan Module Views Bootstrap.

1. Klik Structure > Views > Add new views 
   
2. Pada view name isi nama viewnya, pada bab show arahkan ke bab konten dan pada bab type pilih content type yang akan ditampilkan pada thumbnails misal disini yaitu Article 
3. Centang pada bab Create a page, kemudian pada display atur formatnya ke Bootstrap Thumbnails dan ke fields, sedangkan pada items to display Anda dapat menentukan jumlah item per page yang ingin ditampilkan 
4. Klik Continue and Edit dan Anda akan pribadi dihadapkan pada tampilan diberikut 
   
5. Pada bab Field klik add kemudian ketik body pada kolom pencarian selanjutnya klik Apply 
   
6. Masih pada bab Body, kemudian Anda atur berapa huruf pada tampilan body thumbnails yang akan ditampilkan, hilangkan tanda centang pada create label kemudian scrol kebawah dan klik REWRITE RESULT sehingga muncul tampilan diberikut 
   
7. Pada maximun length Anda dapat menampilkan berapa jumlah huruf yang ingin ditampilkan pada thumbnails. Jangan lupa centang Strip HTML tags dan Remove whitespace 
8. Langkah selanjutnya ulangi langkah nomor 5, namun yang dimenambahkan kali ini yaitu konten gambar thumbnailsnya. Klik Add, ketik image dan pilih kemudian klik Apply sehingga nanti akan muncul tampilan diberikut 
   
9. Pada bab formater pilih image dan pada bab image style pilih Medium 
10. Pada tahap selanjutnya Anda harus setting pada bab FORMAT 
11. Pada bab show klik field dan rubah menjadi Bootsrap Thumbnails kemudian settings menjadi ibarat ini, kalau sudah selesai klik  Apply 
    
12. Kemudian pada bab Format,  Bootsrap thumbnails klik settings, atur  ibarat dibawah ini, kalau sudah selesai klik Apply 
    
13. Maka nanti secara keseluruhan settings  Bootstrap Thumbnails akan terlihat ibarat dibawah ini 
    
14. Supaya page article dengan tampilan thumbnails tersebut ditampilkan pada main menu, pada PAGE SETTINGS Menu: Tab : Thumbnails di klik kemudian atur dan tempatkan di main sajian ibarat yang terlihat pada gambar dibawah ini 
    
15. Terakhir klik save untuk menyimpan pengaturan tampilan secara keseluruhan

Sampai disini proses pembuatan tampilan thumbnails pada halaman artikel sudah selesai dan nanti menunya akan ditampilkan pada main menu  atau navbar. Walaupun pembuatannya sudah selesai tapi kalau dilihat tampilannya kurang rapih dan akan terlihat ibarat gambar dibawah ini

Supaya tampilannya rata kita perlu memakai class col col-md. Buka file views-bootstrap-thumbnail-plugin-style-tpl.php pada direktori sites > all > modules > views bootstrap > templates > thumbnail

Edit file tersebut, rubah class yang tadinya col col-lg menjadi col col-md. Untuk lebih terperinci perhatikan gambar dibawah ini

Bila sudah selesai klik save dan lihat kembali halaman page artikel thumbnailnya. Tampilanny kurang lebih nanti akan terlihat ibarat diberikut

Terlihat pada gambar diatas bahwa tampilannya masih kurang rapih, tampilan ukuran gambarnya tidak sama rata. Untuk membuat tampilan thumbnails gambarnya sama rata Anda perlu membuat Image Style gres dengan effect scale and crop, untuk pembuatan image style gres dengan effek tersebut Anda dapat melihat panduannya pada Artikel Create New Image Style In Drupal

Bila pembuatan style gres sudah selesai dibentuk maka langkah diberikutnya Anda membuka kembali pengaturan Views Thumbnails yang Anda buat, kemudian atur bab image/gambarnya dan pilih/rubah image style dengan yang gres dengan effek scale and cropp


Sampai disini pembuatan halaman artikel dengan tampilan thumbnails sudah selesai sepenuhnya dan tampilan thumbnailsnya akan jauh lebih rapih dari pada yang sebelumnya 

Video Membuat Layout Thumbnail

 

Share :