» » » Membuat Artikel Tampilan Thumbnails Menggunakan Module Views Bootstrap

Membuat Artikel Tampilan Thumbnails Menggunakan Module Views Bootstrap

, Edit
Disini Saya akan mencoba membuat salah halaman/page yang menampilkan artikel dengan tampilan thumbnails menggunakan salah satu module yaitu Views Bootstrap. Module Views Bootstrap merupakan salah satu module Drupal yang memerlukan dukungan template Bootstrap, jadi bila ingin mencoba tampilan artikel dengan thumbnails pada website Drupal Anda, maka Anda perlu menggunakan template Bootstrap terlebih dahulu.

Dukungan :
Bootstrap
Views Bootstrap
Views

Instalasi
Instalasi dan Konfigurasi Template Bootstrap Pada Drupal 7

Dalam module Views Boostrap Anda bisa memilih beberapa tampilan/view, salah satunya adalah tampilan Bootstrap thumbnails.  Berikut adalah cara Membuat Artikel Tampilan Thumbnails Menggunakan Module Views Bootstrap.
  1. Klik Structure > Views > Add new views 
    proses pembuatan tampilan thumbnails pertama
  2. Pada view name isi nama viewnya, pada bagian show arahkan ke bagian konten dan pada bagian type pilih content type yang akan ditampilkan pada thumbnails misal disini adalah Article 
  3. Centang pada bagian Create a page, kemudian pada display atur formatnya ke Bootstrap Thumbnails dan ke fields, sedangkan pada items to display Anda bisa menentukan jumlah item per page yang ingin ditampilkan 
  4. Klik Continue and Edit dan Anda akan langsung dihadapkan pada tampilan berikut 
    tahapan kedua pembuatan thumbnails
  5. Pada bagian Field klik add lalu ketik body pada kolom pencarian selanjutnya klik Apply 
    penambahan komponen body pada thumbnails
  6. Masih pada bagian Body, kemudian Anda atur berapa karakter pada tampilan body thumbnails yang akan ditampilkan, hilangkan tanda centang pada create label lalu scrol kebawah dan klik REWRITE RESULT sehingga muncul tampilan berikut 
    pengaturan rewrite result pada body
  7. Pada maximun length Anda bisa menampilkan berapa jumlah karakter yang ingin ditampilkan pada thumbnails. Jangan lupa centang Strip HTML tags dan Remove whitespace 
  8. Langkah selanjutnya ulangi langkah nomor 5, namun yang ditambahkan kali ini adalah konten gambar thumbnailsnya. Klik Add, ketik image dan pilih lalu klik Apply sehingga nanti akan muncul tampilan berikut 
    menambahkan gambar pada thumbnails
  9. Pada bagian formater pilih image dan pada bagian image style pilih Medium 
  10. Pada tahap selanjutnya Anda harus setting pada bagian FORMAT 
  11. Pada bagian show klik field dan rubah menjadi Bootsrap Thumbnails lalu settings menjadi seperti ini, bila sudah selesai klik  Apply 
    mengatur urutan thumbnails
  12. Kemudian pada bagian Format,  Bootsrap thumbnails klik settings, atur  seperti dibawah ini, bila sudah selesai klik Apply 
    mengatur tampilan horizontal vertical thumbnails
  13. Maka nanti secara keseluruhan settings  Bootstrap Thumbnails akan terlihat seperti dibawah ini 
    tampilan settings secara keseluruhan yang sudah selesai
  14. Supaya page article dengan tampilan thumbnails tersebut ditampilkan pada main menu, pada PAGE SETTINGS Menu: Tab : Thumbnails di klik lalu atur dan tempatkan di main menu seperti yang terlihat pada gambar dibawah ini 
    menambahkan page thumbnails ke main menu
  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 bila dilihat tampilannya kurang rapih dan akan terlihat seperti gambar dibawah ini
tampilan thumbnails yang masih kurang rapi


Supaya tampilannya rata kita perlu menggunakan 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 jelas perhatikan gambar dibawah ini

merubah class lg jadi md

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

tampilan thumbnails yang masih belum rapih
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 baru dengan effect scale and crop, untuk pembuatan image style baru dengan effek tersebut Anda bisa melihat panduannya pada Artikel Create New Image Style In Drupal

Bila pembuatan style baru sudah selesai dibuat maka langkah berikutnya Anda membuka kembali pengaturan Views Thumbnails yang Anda buat, lalu atur bagian image/gambarnya dan pilih/rubah image style dengan yang baru 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 

tampilan thumbnails sudah selesai dan sempurna

 

8 Responses to "Membuat Artikel Tampilan Thumbnails Menggunakan Module Views Bootstrap"

  1. Kreasikan Group5 November 2016 at 17:01

    ini buat drupal ya kang, atau blogger juga bisa ?

    ReplyDelete
    Replies

    1. drupal om, bukan blogger, yang mau ngewebsite hosting atau offlane bisa manfaatkan drupal

      Delete

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

Subscribe to: Post Comments (Atom)
Virgobet88lotre4dBandar Lotre4DGama69RajajagoGama69GAMA69RajajagoRajaJagohttps://linkr.bio/gama69https://mez.ink/rajajagohokiToto Slot 4D Lotre4DRajajago Rajajago Lotre4D Onlinevirgobet88 daftarRajajago GameVirgobet88Slot Virgobet88Linkr Virgobet88Virgobet88strategi harian mahjong ways untuk menentukan waktu emas spin dengan akurasi tinggipanduan mahjong ways membaca pola spin dan keberuntungan berdasarkan ritme harianteknik pro mahjong ways mengelola spin beruntun agar peluang jackpot lebih besarhasil analisis mahjong ways terkait ritme dan tempo spin yang paling efektifrahasia mahjong ways menyesuaikan kecepatan spin untuk hasil stabil dan menguntungkanstrategi pemain berpengalaman menentukan ritme spin berdasarkan waktu hokipola spin harian yang sering digunakan pemain pro untuk meningkatkan peluangpanduan membaca perubahan tempo spin agar lebih konsisten dalam bermainhasil riset terbaru tentang ritme spin dan korelasi keberuntungan pemainteknik pro menentukan jadwal spin harian yang paling efektif untuk stabilitasstrategi harian pemain pro menentukan waktu spin berdasarkan perubahan keberuntunganpanduan membaca ritme dan tempo spin untuk meningkatkan peluang jackpotteknik pemain berpengalaman mengatur kecepatan spin dan menentukan jam hokihasil analisis spin harian berdasarkan pola ritme dan frekuensi kemenanganrahasia pemain pro dalam menentukan momen emas spin yang paling efektifvirgobet88 bagikan strategi spin terbaru dengan analisis waktu hoki yang terbuktitips efektif dari virgobet88 untuk membaca pola spin dan perubahan keberuntunganvirgobet88 ungkap rahasia spin harian berdasarkan data dan kebiasaan pemainpanduan virgobet88 menentukan ritme spin yang konsisten untuk hasil stabilstrategi hoki virgobet88 memanfaatkan waktu tepat spin dan kecepatan bermainstrategi harian pemain pro menentukan pola spin berdasarkan ritme dan keberuntunganpanduan efektif membaca waktu emas spin agar peluang kemenangan meningkathasil penelitian tentang ritme dan tempo spin yang mempengaruhi peluang jackpotrahasia pemain berpengalaman memanfaatkan perubahan tempo spin untuk hasil stabilteknik pro menentukan jam hoki spin dan pola beruntun yang paling efektifstrategi harian mahjong ways dalam memanfaatkan ritme spin dan perubahan keberuntunganpanduan mahjong ways menentukan waktu hoki spin agar peluang jackpot meningkatanalisis mahjong ways terkait tempo spin dan konsistensi kemenangan pemainrahasia pro mahjong ways dalam mengatur spin beruntun dan kecepatan hariantips efektif mahjong ways menyesuaikan ritme dan frekuensi spin untuk hasil optimalstrategi harian pemain pro memanfaatkan ritme dan frekuensi spin untuk meningkatkan bonuspola spin efektif yang digunakan pemain berpengalaman saat perubahan tempo hariananalisis waktu hoki dalam menentukan momen tepat spin agar keuntungan maksimalteknik berlapis spin harian untuk membangun pola beruntun dan peluang jackpotrahasia pemain berhasil mengatur kecepatan spin dan menang lebih konsistenpetimas88 ungkap strategi berlapis spin dan pola hoki untuk bonus lebih seringpetimas88 bagikan cara menentukan jam emas spin agar peluang kemenangan meningkatpetimas88 analisis pola spin harian yang sering memberi keuntungan besarteknik spin pro dari petimas88 dalam mengelola tempo dan frekuensi bermainpetimas88 tips mengatur ritme spin dan meningkatkan stabilitas kemenanganstrategi pemain pro membaca ritme dan waktu emas spin agar peluang bonus naik drastisanalisis ritme spin harian dan cara menentukan momen hoki untuk kemenangan stabilpanduan lengkap mengenali pola spin berirama yang sering munculkan bonus besarrahasia waktu hoki dalam spin harian yang sering digunakan pemain berpengalamantips membaca pola dan kecepatan spin agar tidak kehilangan peluang jackpotstrategi spin mahjong ways membaca perubahan tempo dan menang lebih konsistenpanduan mahjong ways menentukan jam emas spin dan meningkatkan hoki harianteknik pemain pro mahjong ways mengatur ritme spin untuk hasil lebih stabilanalisis mahjong ways terhadap pola spin berlapis yang bisa bikin peluang jackpot naikrahasia mahjong ways memanfaatkan perubahan tempo spin dalam mencapai maxwinstrategi spin harian memanfaatkan ritme dan waktu hoki untuk peluang bonus lebih besarrahasia pemain pro menentukan tempo spin yang sering munculkan kemenangan beruntunpanduan lengkap memilih waktu emas spin agar peluang menang naik drastisanalisis perubahan ritme spin dan pengaruhnya terhadap hasil kemenangan hariantrik pemain berpengalaman mengatur kecepatan spin demi hasil stabil dan menguntungkanstrategi mahjong ways mengatur tempo dan waktu spin untuk meningkatkan keberuntunganpanduan pro mahjong ways membaca pola dan kecepatan spin agar peluang jackpot lebih besaranalisis pola spin mahjong ways dalam menentukan momen emas untuk menang konsistenrahasia mahjong ways memanfaatkan ritme harian spin dan perubahan keberuntunganteknik efektif mahjong ways menyesuaikan kecepatan spin untuk mendapatkan maxwinpanduan membaca ritme dan frekuensi spin harian untuk meningkatkan peluang jackpotstrategi pemain pro menentukan tempo spin harian dan waktu hoki paling menguntungkananalisis ritme spin berdasarkan perubahan keberuntungan dan pola pergerakan hariantrik mengatur kecepatan spin demi kemenangan stabil dalam sesi bermain harianrahasia pemain berhasil menemukan pola spin harian yang sering memberi hasil positifvirgobet88 ungkap hasil analisis ritme spin harian yang berpengaruh pada peluang maxwinstrategi virgobet88 memanfaatkan frekuensi dan ritme spin untuk meningkatkan peluang kemenanganvirgobet88 bagikan teknik mengatur tempo spin dan waktu emas agar hasil lebih stabilhasil riset virgobet88 tentang perubahan ritme spin dan pengaruhnya terhadap keberuntunganpanduan virgobet88 menentukan ritme dan frekuensi spin optimal untuk hasil maksimalstrategi pemain pro membaca pola spin berdasarkan ritme dan waktu hariananalisis ritme spin dan frekuensi keberuntungan yang sering digunakan pemain ahlipanduan mengenali waktu emas spin dan momen hoki dalam setiap permainanrahasia pola spin harian yang mampu meningkatkan kesempatan jackpot besartips mengatur tempo dan kecepatan spin agar keberuntungan lebih stabilstrategi mahjong ways memanfaatkan ritme dan perubahan spin untuk peluang maksimalrahasia pemain pro mahjong ways menentukan waktu hoki dari pola ritme hariananalisis mahjong ways terkait pola dan frekuensi spin beruntun yang menguntungkanpanduan harian mahjong ways menyesuaikan tempo spin dengan perubahan keberuntungantips pro mahjong ways mengatur ritme spin dan membaca pola hoki setiap sesistrategi pemain pro membaca pola spin harian untuk memaksimalkan keberuntungananalisis ritme dan frekuensi spin yang sering dipakai pemain ahli untuk jackpotrahasia spin berirama dan pengaturan tempo yang efektif untuk hasil stabilpanduan harian memanfaatkan waktu emas spin dalam meningkatkan peluang menangtips pemain berpengalaman menentukan jam hoki dan tempo spin paling menguntungkanpetimas88 bagikan strategi spin harian dengan pola dan ritme beruntun yang terujiteknik petimas88 menentukan perubahan tempo spin untuk hasil lebih menguntungkanpetimas88 ungkap rahasia pola spin berirama yang sering berbuah kemenangan besarpanduan lengkap petimas88 membaca perubahan spin harian berdasarkan data keberuntunganpetimas88 strategi bermain dengan analisis ritme spin dan pola keberuntungan terbaruanalisis pola ritme spin malam hari yang sering dipakai pemain untuk menang besarstrategi pemain pro memanfaatkan jam hoki malam untuk peluang jackpot lebih tinggistudi terbaru tentang pengaruh tempo spin malam terhadap tingkat kemenanganpanduan harian mengenali waktu emas spin pada malam hari agar lebih menguntungkanrahasia pemain berpengalaman mengelola spin malam dengan pola beruntun efektifstrategi spin mahjong ways di malam hari yang sering menghasilkan keberuntungan besarpanduan membaca pola mahjong ways malam hari untuk meningkatkan peluang jphasil observasi pemain pro terhadap ritme spin mahjong ways di jam hokianalisis waktu terbaik spin mahjong ways malam hari berdasarkan data pemain berhasilrahasia pola mahjong ways malam hari yang sering memicu kemenangan beruntunfreelancer canva dapat bonus harian berkat tips bermain mahjong ways 3 konsistenibu laundry medan cuan dari scatter spiral mahjong ways 2 di jam 10 pagipenjual nasi kuning cuan lewat tips bermain turbo spiral mahjong ways 3 manualibu warung di sidoarjo menang game lewat kombinasi spiral spiral di mahjong ways 2tukang cukur pakai mahjong ways 2 dan dapat rp1 1 juta dari spiral manual 5xpenjual tahu gejrot main spiral turbo jam 7 pagi lewat mahjong ways 3 manualmahasiswi manajemen sukses ulang pola spin turbo mahjong ways 2 untuk bonusmahasiswi psikologi pakai scatter jam 9 di mahjong ways 3 dan balik modal cepatpegawai fotokopi di depok main mahjong ways 2 dan menang lewat pola spiral lamapenjaga minimarket menang game setelah coba tips bermain mahjong ways 3mahasiswa teknik industri bongkar cara menang spiral spiral mahjong ways 2 manualpenjual kue lapis dapat rp1 2 juta karena pola spin turbo pagi mahjong ways 3mahasiswa arsitektur dapat rp1 4 juta dari kombinasi scatter mahjong ways 2 subuhibu rumah tangga di cimahi menang game karena turbo spiral mahjong ways 3 jam 6mahasiswi ilmu komunikasi ungkap pola spin rahasia mahjong ways 3 hari rabupenjual lontong sayur dapat tambahan dari mahjong ways 3 berkat scatter subuhsupir ojek online palembang menang game karena scatter spiral mahjong ways 2freelancer jasa posting sosmed cuan lewat tips bermain mahjong ways 2 jam pagisupir pangkalan cuan karena spin turbo 3 detik mahjong ways 3 konsistenmahasiswa desain produk pakai mahjong ways 2 untuk menang lewat scatter delaymahasiswa informatika coba spiral ganjil genap dan cuan dari mahjong ways 2penjaga toko bangunan menang game setelah coba pola spiral turbo mahjong ways 3supir truk banjarmasin dapat rp1 juta dari spiral spiral mahjong ways 2 hari libursupir angkot bekasi main scatter ganjil genap dan menang mahjong ways 2 jam subuhpenjual es teh manis menang game karena spiral mahjong ways 3 delay pola ganjilsupir truk antar kota pakai mahjong ways 2 untuk menang game lewat scatter spiralpenjual bakso di solo ungkap cara menang spiral spiral mahjong ways 3 tanpa resetibu warteg jakarta cuan dari pola spiral mahjong ways 3 setiap hari seninpenjual sate klathak di jogja menang game karena pola spin turbo mahjong ways 3ibu penjual bubur ayam dapat tambahan uang dari spiral spiral mahjong ways 2
analisis nilai mahjong ways untuk peningkatan disiplin kerjaimplementasi mahjong ways dalam dunia bisnis modernimplementasi filosofi mahjong ways dalam pelatihan layanan publikmahasiswa ekonomi belajar strategi bisnis dari mahjong waysnilai edukatif mahjong ways bagi pekerja sosialnilai edukatif mahjong ways untuk profesi arsitek mudanilai filosofi mahjong ways untuk profesi penelitinilai filosofis mahjong ways pada pendidikan guru paudnilai ketelitian mahjong ways untuk profesi editor bukunilai kesabaran dalam mahjong ways bagi profesi sopir angkot