Membuat Slider Gambar Yang Mengarah Ke Artikel Di Drupal

Pada sebuah halaman website biasanya kita sering sekali menjumpai slider gambar yang biasanya saat slider gambar tersebut diklik akan mengarah ke artikel tertentu. Kebanyakan konten slider tersebut biasanya dibentuk secara otomatis oleh sistem website, jadi saat membuat artikel gres maka artikel tersebut akan ditampilkan bersama konten gambar (bila ada)pada slider yang terdapat di halaman depan website. Biasanya memang slider gambar selalu ditampilkan pada halaman depan website, entah itu mengarah ke artikel atau spesialuntuk sebatas tampilan slider saja, tergantung dari cita-cita si pembuat website.

Kali ini Saya ingin sedikit membuktikan tentang bagimana membuat slider gambar pada website Drupal, dimana slider tersebut akan secara otomatis ada pada halaman depan website saat eksekutif membuat artikel/postingan baru, selain itu juga slider tersebut akan diarhakan ke artikel saat slider/gambar di klik oleh pengunjung.

Saya tidak akan membuktikan secara detail, Saya asumsikan bahwa Anda sudah paham dengan hal – hal fundamental terkena CMS Drupal. Ada beberapa hal yang perlu persiapkan sebelum membuat slider yang mengarah ke artikel diantaranya :

1. Template Bootstrap. Silahkan  untuk instalasinya baca pada halaman Instalasi dan Konfigurasi Template Bootstrap pada Drupal 
2. Module Administrastion Menu Drupal untuk mempergampang manajemen admin 
3. Module Empty Front Page untuk mengkosongkan default front page Drupal 
4. Module Views 
5. Module Ctools (chaos tools) 
6. Views Bootstrap
   

Selanjutnya tutorial ini akan dibagi kedalam beberapa tahap

A. Instalasi Module Views, Ctools dan Views Bootstrap
B. Membuat content type gres untuk slider depan
C. Membuat image style gres untuk slider
D. Membuat block dengan views bootstrap carousel
E. Menempatkan slider pada halaman depan website

A. Instalasi Module Views, Ctools dan Views Bootstrap

Silahkan download tiruana module views, ctools dan views bootstrap pada website resmi Drupal, Instal dan aktifkan menyerupai yang terlihat pada gambar dibawah ini.

 Tampilan diatas memakai Module Filter

 B. Membuat Content Type Baru untuk slider depan

1. Klik Structure > Content types > Add Content type. Silahkan lihat konfigurasinya dibawah ini, klik Save and add fileds 
   
2. Pada halaman selanjutnya lakukan konfigurasi menyerupai gambar dibawah ini 
   
3. Pada mange Field masukan content image gres menyerupai terlihat pada gambar dibawah ini. Klik Save 
   
4. Klik manage display dan lakukan konfigurasi yang sama menyerupai terlihat pada gambar dibawah ini 
   
5. Bila sudah simpulan klik save.
   

Sampai disini pembuatan content type gres untuk slider sudah selesai. Anda tinggal menambahkan artikel/content gres yang dilengkapi dengan gambar. Klik Content  > Add content > Berita, menambahkan konten pada diberita yang gres sebanyak - banyaknya

C. Membuat image style gres untuk slider

Tujuan pembuatan image style gres ini ialah untuk  ukuran slider/gambar  halaman depan, jadi saat tampil ukuran gambar/slider tiruananya akan otomatis punya ukuran yang sama.

1. Klik Configuration  > Media > Image styles 
2. Masukan nama style barunya dengan nama slider 
3. Selanjutnya pada Effect pilih Scale and crop kemudian klik Add 
   
4. Lalu masukan ukuran slidernya misal 1500 (width) 475 (height). Klik Update Effect 

Sampai disini proses pembuatan Image style sudah selesai, selanjutnya kita tinggal membuat block dengan views bootstrap carousel

E. Membuat block dengan views bootstrap carousel

Tahap terkahir ialah menampilkan slider pada blok bab depan website dengan views carousel bootstrap

1. Klik  Structure > Views > Add new view 
2. Lakukan konfigurasi menyerupai yang terlihat pada gambar dibawah ini 
   
3. Continue & edit kemudian lakukan atur konfigurasinya menyerupai yang terlihat pada gambar dibawah ini 
   
4. Atur dulu bab FIELDSnya, menambahkan konten body dan image. Klik Add 
   
5. Selanjutnya akan muncul tampilan menyerupai diberikut 
   
6. Hilangkan tanda centang pada create label,  kemudian scrol kebawah dan buka bab Rewrite results dan atur menyerupai yang terlihat pada gambar diatas. Klik Apply 
7. Selanjutnya klik add dan menambahkan konten image. Tekniknya menyerupai pada poin 4 
   
8. Pada formatter atur ke image, image style ke slider dan Link image to Content. Klik Apply 
9. Langkah selanjutnya ialah mengatur bab FORMAT. Klik setings pada bab format dan atur menyerupai gambar dibawah ini 
   
10. Masih pada bab FORMAT, Pada show atur menjadi Bootstrap Carousel selanjutnya klik settings dan atur menyerupai gambar dibawah ini
    
    
    

Sampai disini proses pembuatan slider depan selesai. Proses selanjutnya ialah mengatur biar blok tersebut tampil pada halaman depan.

E. Menempatkan slider di halaman depan Website

1. Klik Sturucture > Blocks, kemudian tempatkan view diberita pada bab content menyerupai yang terlihat pada gambar dibawah ini. Klik Save blocks 
   
2. Klik Configure, nanti akan muncul tampilan diberikut 
   
3. Pada Block title masukan <none> kemudian pada bagian  Page klik “Only the listed pages” dan masukan <front>. Save blocks
   

Sampai disini proses pembuatan slider dan menampilkan slider pada halaman depan website sudah selesai. Bila berhasil nanti akan ada slider yang ditampilkan spesialuntuk pada halaman depan saja. Setiap kali Anda membuat content diberita, maka akan secara otomatis muncul pada halaman slider depan, kemudian kalau di klik slider tersebut akan mengarah ke artikel/ konten diberita yang sudah dibentuk sebelumnya.

 

Bila Anda mengalami dilema slider yang tidak secara otomatis (harus diklik dulu navigasi slidernya '>' ) saat halaman page sudah simpulan di load, Silahkan coba baca cara mengatasinya pada artikel Mengatasi Module Views Bootstrap Carousel Yang Tidak Jalan Secara Otomatis

 

Share :