Pontianak Web & Open Source

Jasa Buat Website Pontianak. Pontianak Web & Open Source

Membuat Galeri Gambar Menggunakan Views

Kam, 2013-05-16 16:55 -- mbahlol

Kali ini mau buat catatan tentang cara membuat galeri foto dengan menggunakan views. Jadi ceritanya ada sebuah Content yang mempunyai field gambar, nah field gambar ini akan tampil seperti katalog atau galeri foto.

 

Dalam catatan kali ini aku instal Drupal versi 7.22.

 

Pertama buat dulu sebuah Content type Galeri dengan konfigurasi seperti dibawah. Buatnya ada di admin/structure/types/add

 

Membuat Galeri Gambar Menggunakan Views

 

Bisa dilihat diatas konfigurasinya adalah:

Name : Galeri (machine name otomatis jadi galeri)

Description : Cuman keterangan fungsi dari content type tersebut saat user menambah node

Display settings : Don't display post information.

Comment : Closed

 

Setelah itu Save and add fields untuk menambah field gambar.

 

Pada gambar dibawah aku menambah field gambar dengan isi sebagai berikut:

Label : Gambar (ni judul fieldnya)

Machine Name : field_gambar (enak udah otomatis isinya hehehe)

Field Type : Image

Widget : Image.

 

Membuat galeri dengan views

 

Setelah itu klik tombol Save dan masuk ke layar konfigurasi dari field Gambar

 

Membuat galeri gambar dengan views

 

Klik Save field settings untuk masuk ke layar selanjutnya.

 

Pada bagian Galeri settings banyak yang mesti dipahami, tapi disini aku cuman ubah yang aku butuhkan saja

Required field : Ceklist

File directory : gambar (biar semua file masuk di folder sites/gambar. Kalo pake module Token dan File Field Paths pengaturan folder bisa lebih rapi lagi)

Enable Alt field : Ceklist

Enable Title field : Ceklist

Number of values : 1 (jumlah gambarnya)

 

Membuat galeri gambar dengan views

 

Membuat galeri gambar dengan views

 

Kalo udah klik tombol Save settings. Berikut hasilnya

 

Membuat galeri gambar dengan views

 

Field Gambar sudah ada dan sekarang buat node Galeri tersebut node/add/galeri

 

Membuat galeri dengan views

 

Setelah menambah node Galeri seperti diatas. Sekarang saatnya buat Views. Sebelumnya pastikan module Chaos tools, views dan views UI sudah terpasang

 

Buat views baru di admin/structure/views pilih Add new view

 

Membuat galeri gambar dengan views

 

Gambar dibawah menunjukkan konfigurasi views yang aku buat

View name : Galeri gambar (nama views disini machine name akan terisi otomatis

Show : Content. Of type : Galeri (hanya menampilkan content type galeri saja)

Page Title : Galeri Gambar (judul dari halaman galeri)

Path : galeri (Galeri gambar bisa diakses pada halaman /galeri)

Display format : Grid of fields

 

Membuat galeri gambar dengan views

 

Jika sudah klik tombol Continue & edit untuk konfigurasi lebih lanjut.

 

Berikut tampilan layar selanjutnya

 

Membuat galeri gambar dengan views

 

Jika dilihat pada preview tampil satu judul node dari content type Galeri. Karena pinginnya hanya tampil gambar saja maka pada Field – Content: Title aku klik dan remove field title tersebut. Kalo muncul pesan error merah dibawah seperti Display “Master” …... tenang saja karena memang belum  ada field yang dipilih untuk ditampilkan.

 

Membuat galeri gambar dengan views

 

Nah untuk memilih field gambar tersebut klik tombol Add pada bagian Fields

Pada layar berikutnya isi "gambar" pada kotak Search dan pilih Content: Gambar.

 

Membuat galeri gambar dengan views

 

Klik Apply (all display) dimana layar berikutnya adalah konfigurasi untuk tampilan field Gambar. Konfigurasi yang aku lakukan adalah:

Create a label : tidak dipilih

Image style : thumbnail (ini bisa disesuaikan di bagian admin/config/media/image-styles)

Link image to : Content (supaya kalo gambarnya diklik masuk ke node tersebut)

 

Membuat galeri gambar dengan views

 

Kalo udah klik tombol Apply (all display). Bisa dilihat pada preview sudah muncul node yang dibuat. Tidak kelihatan seperti galeri karena baru satu gambar.

 

Membuat galeri gambar dengan views

 

Jangan lupa klik tombol save diatas. Setelah itu coba akses halaman galeri tersebut kalo aku bukanya di http://localhost/drupal/galeri

 

Membuat galeri gambar dengan views

 

Contoh dengan beberapa gambar

 

Membuat galery gambar dengan views

 

Nah berikutnya hanyalah konfigurasi tambahan saja. Misal mau ubah berapa gambar tampil dalam satu baris bisa di klik Settings pada Format: Grid | Settings.

 

Membuat galeri gambar dengan views

 

Angka 4 pada Number of columns menentukan jumlah gambar dalam satu baris

 

Membuat galeri gambar dengan views

 

Kalo mau galeri tersebut jadi halaman depan bisa diubah di Site Information, admin/config/system/site-information. Pada bagian Default front page tinggal sesuaikan dengan url galeri.

 

Sumber: Googling | Buku Using Drupal (mantap ni buku)

Kategori Blog: