(1) Modul yang Diperlukan (Versi: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Pasang Modul
Di Drupal7 Anda dapat menginstal modul dari bagian admin, tetapi saya masih merasa fitur baru ini tidak memiliki arti, karena kita harus mencari tautan modul di situs Druapl dan kemudian menyalin paste ke area pemasangan modul admin, sungguh gila. Itu akan sangat baik jika mereka akan membuat sesuatu seperti wordpress menjadi pesta pencarian kecil. Pokoknya saya hanya akan mengunduh dan istall dengan cara lama (saya masih merekomendasikan cara lama ini).
Unduh semua modul dari situs Drupal dan instal di direktori namamu hak / situs / semua / modul. Buka http://www.yoursitename.com/node#overlay=admin/modules dan aktifkan modul-modul ini seperti di bawah ini;
(1) Tampilan (2) Tampilan UI (3) Tampilan Tayangan slide (4) Tampilan Slideshow: Siklus (5) Alat kekacauan (6) Tautan (7) Perpustakaan (8) Token (Opsional) (3) Buat Cache Gambar
Dalam Drupal7 imagecache adalah bagian dari modul inti dan dinamai sebagai gaya gambar. Jadi mari kita buat dua cache gambar dari sini, satu untuk gambar slider ukuran penuh dan lainnya untuk gambar thumbnail. Dalam tutorial ini saya menggunakan dimensi 935x293 (piksel) untuk gambar slider ukuran penuh dan 210x100 (piksel) untuk gambar thumbnail. Catatan: Konfigurasi ini dapat ditunda tergantung pada kebutuhan Anda.
- Fullsize pengaturan gambar Slider
Pergi ke http://www.yoursitename.com/node#overlay=admin/config/media/image-styles dan klik tautan tambahkan gaya baru (1) Beri nama gaya Gambar dan klik tombol buat gaya baru (2) ) Pada layar konfigurasi berikutnya pilih gaya baru yang Anda inginkan dan kemudian klik tombol tambah (Dalam tutorial ini saya memilih ukuran ulang gaya) (3) Pada layar berikutnya atur lebar dan tinggi dan klik tombol tambahkan efek. (Pengaturan dapat bervariasi tergantung pada gaya yang Anda pilih). Saya menetapkan lebar 935 dan tinggi 293 piksel.
Lakukan proses yang sama untuk gambar thumbnail juga. (untuk dimensi gambar thumbnail, saya menetapkan lebar 210 dan tinggi 100 piksel.) (4) Buat Jenis Konten Baru
Mari kita buat tipe konten baru, Dari bilah menu dasbor, klik Struktur dan kemudian tipe konten lalu klik tautan tambahkan tipe konten baru.
(1) Berikan nama yang dapat dibaca manusia, saya menamainya sebagai Featured Slider (nama machiine akan dibuat secara otomatis berdasarkan nama yang dapat dibaca manusia) (2) Berikan deskripsi singkat dan relevan (3) Pengaturan formulir pengiriman, saya biarkan sebagai pengaturan default (4) Opsi penerbitan, saya memeriksa hanya diterbitkan (semua pengaturan lain tidak dicentang) (5) Pengaturan tampilan, saya telah menghapus centang pada authour dan info tanggal. (6) Pengaturan komentar, saya atur tersembunyi (dinonaktifkan) (7) Pengaturan menu, saya tinggalkan sebagai pengaturan default. (8) Klik Simpan dan tambahkan bidang. Tombol (5) Buat Bidang Baru
Di sini, dalam contoh ini saya hanya membuat dua arsip, dan itu adalah bidang gambar dan bidang tautan. Kami akan menggunakan bidang gambar untuk mengunggah gambar slider dan bidang tautan kami untuk membuat tautan khusus tempat kami ingin slider kami ditautkan.
Pengaturan Bidang Gambar
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
Saya mengatur bidang ini seperti yang diperlukan, saya menambahkan nama direktur file bernama slider-image sehingga gambar ini akan diatur secara sperately dari gambar lain. Anda dapat mengatur ukuran dan resolusi unggahan maksimum di sini, saya telah mengaktifkan bidang alt dan judul dan akhirnya mengklik tombol Simpan pengaturan.
Dengan menggunakan metode yang sama buat bidang tautan juga.
Pengaturan Bidang Tautan (1) Label: Tautan Penggeser (2) Bidang: slider_link (3) Jenis bidang: tautan (4) Widget (elemen formulir): tautan (5) Klik tombol Simpan, Untuk konfigurasi bidang tautan biarkan evrything ke pengaturan default . Saya telah mengatur ulang bidang seperti yang ditunjukkan di bawah ini; Bidang judul Bidang gambar Bidang tautan Bidang tubuh (Anda bahkan dapat menghapus bidang ini jika tidak perlu) Kelola Tampilan Pada tab kelola tampilan Anda dapat mengonfigurasikan bagaimana tampilan lapangan yang akan diputar. Saya telah menetapkan bidang tautan sebagai tersembunyi dan saya juga menetapkan label gambar sebagai tersembunyi Drupal7: kelola bidang (6) Buat Fitur Konten Penggeser
Saya telah membuat empat konten slider unggulan untuk tutorial ini.
(1) Klik tautan tambahkan konten (2) Buat konten Slider Unggulan (3) Beri nama judul yang tepat (4) Unggah gambar slider (5) Beri alt dan nama bidang judul (6) Beri judul tautan dan url di tempat yang Anda inginkan bilah geser yang akan ditautkan (7) Biarkan semua pengaturan lain sebagai default kecuali untuk bidang jalur jika Anda mau, Anda dapat memberikan alias URL yang ramah SEO. (8) Simpan konten.
Cara yang sama membuat lebih banyak konten Fitur Slider (Saya telah membuat empat konten) (7) Buat Tampilan Baru
Sekarang saatnya membuat tampilan Slideshow baru. Dari menu Dashboard klik pada Struktur dan kemudian klik pada Views.
(1) Klik tambahkan tautan tampilan baru (2) Beri nama tampilan, saya telah menamakannya Feature Slider (nama machiine akan dibuat secara otomatis) (3) Berikan deskripsi tampilan yang sesuai (4) Pilih Tampilkan Konten dari jenis Slider Pilihan (konten Anda) ketik nama). (5) Hapus centang Buat Pge dan centang Buat blok (6) Ketik judul Blok dan pilih format tampilan sebagai "Slideshow" dari "bidang" item per halaman 5 (Anda dapat memasukkan jumlah item yang ingin Anda tampilkan) (7 ) Klik tombol "Lanjutkan & sunting" Pengaturan Bidang Tampilan Pertama, mari kita tambahkan bidang tautan (tautan harus merupakan bidang pertama agar dapat bekerja dengan baik) jadi klik pada ikon tambahkan dan dari filter Grup pilih Konten Tambahkan Konten: Tautan, Klik "Tambahkan & konfigurasikan tombol" di jendela kofigurasi berikutnya hapus centang "Buat label". "Memeriksa" Kecualikan dari tampilan. Klik "tombol Terapkan"
Selanjutnya mari kita tambahkan bidang gambar, jadi klik pada ikon add dan dari filter Grup pilih konten Tambahkan Konten: bidang gambar (Catatan: pastikan Anda memilih bidang gambar yang kami krerasikan hanya untuk jenis konten slider ini.) Klik "Tambah & konfigurasi tombol "di jendela kofigurasi berikutnya hapus centang" Buat label ".
Formatter: Gambar (jika Anda telah menginstal Colorbox atau lightbox Anda dapat memilihnya di sini!) Gaya Gambar: Fullsize (Pilih imagecache yang telah Anda buat pada langkah di atas) Tautkan gambar ke: Tidak Ada Pengaturan Gaya: Tinggalkan pengaturan default Tidak ada perilaku hasil: Tinggalkan pengaturan default Tulis ulang Hasil: Periksa Output bidang ini sebagai tautan Jalur tautan: [view_node] (Catatan: Gulir sedikit dow dan Anda dapat melihat pola penggantian yang dibuat oleh modul Core Token, (jika kami tidak menyetel bidang tautan seperti pertama kali kami tidak dapat melihat opsi bidang tautan di sini) salin saja [view_node] kemudian gulir ke atas dan tempel di bidang jalur tautan.) Klik "Terapkan tombol"
Terakhir kita perlu satu bidang lagi untuk gambar mini, jadi mari klik ikon add dan dari filter Grup pilih Konten Tambahkan Konten: bidang gambar (Catatan: pastikan Anda memilih bidang gambar yang kami krerasikan hanya untuk jenis konten slider ini.) Klik "Tambahkan & konfigurasikan tombol" di jendela kofigurasi berikutnya hapus centang "Buat label" dan PERIKSA KECUALI DARI DISPLAY, Formatter: Gambar (jika Anda telah menginstal Colorbox atau lightbox, Anda dapat memilihnya di sini!) Anda telah membuat pada langkah di atas) Tautkan gambar ke: Tidak Ada Pengaturan Gaya: Tinggalkan pengaturan default Tidak ada perilaku hasil: Tinggalkan pengaturan default Tulis ulang Hasil: Periksa Keluarkan bidang ini sebagai tautan Jalur tautan: [view_node] (Catatan: Gulir sedikit dow dan Anda dapat melihat pola penggantian yang dibuat oleh modul Core Token, (jika kami tidakt setel bidang tautan sebagai yang pertama kita tidak bisa melihat opsi bidang tautan di sini) salin saja [view_node] kemudian gulir ke atas dan tempel di bidang jalur tautan.) Klik "Terapkan tombol"
Pengaturan Filter Tampilan
Dalam views3, filter dibuat di awal sementara kami memilih jenis konten dan pengaturan lainnya! Jika Anda membutuhkan pengarsipan tambahan, Anda dapat membuatnya di sini!
Pengaturan Gaya Tampilan
Klik pada Format Slideshow Slide | settigs dan pada jendela configuratioin berikutnya ditetapkan seperti di bawah ini; (1) Jenis daftar: Daftar tidak berurutan (2) Kelas pembungkus: Biarkan pengaturan default (3) Gaya> Skin: deafult (4) Slide> Jenis rangkai salindia: siklus (5) Opsi siklus Anda perlu mengunduh plugin siklus jQuery dan menyalin jquery. cycle.all.min.js ke situs / all / libraries / jquery.cycle Anda dapat menemukan plugin di http://malsup.com/jquery/cycle .
DALAM BAHASA INGGRIS SEDERHANA Buat folder bernama "libraries" di situs / semua direktori dan kemudian buat folder lain bernama "jquery.cycle" di direktori itu dan akhirnya salin dan tempel hanya "jquery.cycle.all.min.js" ke dalam direktori ini.
(6) Transittion: Fade (7) Action: pause on hover (8) Internet Explorer Tweaks: default (9) Widget: Anda dapat memilih salah satu atau keduanya Atas dan Bawah (saya memilih bagian bawah di sini, dan pengaturan lanjutan seperti di bawah;) (10) Widget Bawah> Pager> Jenis halaman: Bidang (11) Bidang halaman: Konten: Gambar (Catatan: yang terakhir kami tambahkan untuk ibu jari, jangan salah karena kedua bidang akan dinamai sama.) (12) Aktifkan Slide dan Jeda pada Pager Hove: dicentang, kontrol dan penghitung bilah geser tidak dicentang. (13) Klik tombol Terapkan.
Format Tampilkan Pengaturan Bidang
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Buat Daerah Kustom (langkah opsional)
(1) Di folder tema Anda, buka file your_theme_name.info dan tambahkan wilayah baru seperti ini di bawah ini; region [Featured_slider] = Featured Slider dan simpan file .info. (2) Buka file theme.tpl.php tema Anda dan tambahkan kode ini di mana Anda ingin slide Anda ditampilkan seperti yang ditunjukkan di bawah ini;
Anda bahkan dapat membuat templat halaman depan khusus seperti halaman - front.tpl.php sehingga Anda tidak perlu melakukan perubahan apa pun pada templat default halaman.tpl.php. [9] Aktifkan & konfigurasikan Blokir
Sekarang blok ini akan terlihat di area blok yang dinonaktifkan, jadi dari menu Dashboard, buka Struktur> Blok dan aktifkan blok ke kawasan default tema atau wilayah khusus yang kami buat (Featured_slider). (Wilayah bervariasi tergantung pada tema yang Anda gunakan.)
Blokir Pengaturan Konfigurasi Setelah mengaktifkan blok, Anda mendapatkan tautan untuk mengonfigurasi blok, jadi klik tautan Konfigurasikan dan pada bagian pengaturan yang ditetapkan seperti di bawah ini;
(1) Blok judul (jika Anda tidak ingin judul blobk ditampilkan ketik saja) (2) Sekali lagi Anda mendapatkan semua pengaturan Wilayah khusus tema yang diaktifkan. Pada pengaturan visibilitas (3) Halaman> Tampilkan blok pada halaman tertentu: pilih Hanya halaman yang terdaftar dan ketik sehingga blok ini hanya akan ditampilkan di halaman depan. TIPS CSS UNTUK MENAMPILKAN THUMBNAIL INLINE
Tambahkan kode CSS ini ke lembar gaya tema Anda untuk menampilkan thumbnail sebaris. .views-slideshow-kontrol-bawah .views-slideshow-pager-bidang-item {float: left; margin: 20px 6px; } Buat penyesuaian yang diperlukan.
Lihatlah podcast Mustardeed Media ini: Views Slideshow Theming .
Selama podcast, Bob menjalankan beberapa dasar-dasar Tampilan Slideshow serta bagaimana tema output. Ini berbasis di sekitar Drupal 6, tapi saya percaya sebagian besar dasar dan pelajaran akan sama. Dengan hanya sedikit CSS, slide dapat terlihat ton yang lebih baik. Saya sangat merekomendasikan menonton podcast ini jika Anda ingin tampilan slide yang terlihat bagus.
sumber
Jika Anda ingin tahu lebih banyak tentang tampilan slide (misalnya dengan thumbnail) Anda harus melihat tutorial yang bagus ini: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7
sumber