Tutorial Komprehensif tentang Modul ColorBox untuk Drupal 9 (Dan cara memperluasnya)

Gambar memainkan peran penting dalam meningkatkan pengalaman pengguna situs web. Sebuah penelitian menunjukkan bahwa 90% dari informasi yang kita sampaikan ke otak kita adalah visual. Banyak situs web bekerja di sekitar teori ini sendirian dan membombardir pengguna dengan banyak media kaya seperti gambar dan file video. Kebanyakan dari mereka mengabaikan aspek presentasi dari file media ini dan berakhir dengan pengalaman pengguna yang mengecewakan. Yang mereka butuhkan adalah alat seperti ColorBox yang merupakan plugin jQuery yang sangat ringan yang memungkinkan Anda menampilkan gambar secara elegan dan intuitif. Gaya dan fungsionalitas sangat dapat disesuaikan melalui CSS dan Javascript. Modul Drupal ColorBox kompatibel dengan Drupal 6, 7, 8, dan sekarang juga Drupal 9! Dalam artikel ini, Anda akan mempelajari cara mengonfigurasi, mengimplementasikan, dan memperluas modul ColorBox untuk Drupal 9.

Kotak Warna untuk Drupal

Modul ColorBox terintegrasi dengan plugin ColorBox jQuery ke Drupal. Plugin ini adalah lightbox ringan yang dapat disesuaikan untuk jQuery. Di antara modul "kotak" pesaing lainnya yang digunakan untuk tujuan serupa (Thickbox, Lightbox2, Shadowbox, Greybox, dll.), modul ColorBox adalah yang paling populer dan memiliki jumlah pemasangan tertinggi. Penggunaan Drupal ColorBox tidak hanya berakhir dengan menampilkan gambar yang diunggah dengan indah. Ini juga mendukung gaya untuk video seperti, pdf, simpul, taksonomi, formulir web, konten iframe dan banyak lagi. Penataannya dapat dikontrol melalui CSS sehingga tampilannya sangat dapat disesuaikan. Fungsionalitasnya juga mudah disesuaikan melalui file JS tanpa perlu menyentuh HTML. Ini mendukung pengelompokan foto juga dan memuat gambar yang akan datang

Langkah-langkah untuk Menginstal Modul ColorBox

1.Instal modul ColorBox dengan composer.

 composer require 'drupal/colorbox:^1.6'
composer require 'drupal/colorbox:^1.6'

2. Unduh plugin ColorBox 1.x.
1. Menggunakan perintah Drush
(Catatan: Jika Anda menggunakan perintah drush untuk menginstal plugin ColorBox, Anda harus mengaktifkan modul dan kemudian menjalankan perintah di bawah ini)

 drush colorbox-plugin
drush colorbox-plugin

2. Unduh plugin ColorBox secara manual
Unduh plugin Colorbox dan buka paket di /libraries. Pastikan jalur ke file plugin terlihat seperti:

 “/libraries/colorbox/jquery.colorbox-min.js”
“/libraries/colorbox/jquery.colorbox-min.js”

3. Aktifkan modul Drupal ColorBox.

 drush en -y colorbox
drush en -y colorbox

Selamat! Anda sekarang siap untuk menggunakan fitur modul ColorBox.

Mengonfigurasi Modul ColorBox

Konfigurasikan modul Drupal ColorBox dengan menavigasi ke Configuration -> Media -> Colorbox settings .

Cara Membuat Galeri Gambar Menggunakan ColorBox

1. Untuk membuat galeri gambar, pertama-tama kita perlu menambahkan bidang gambar untuk salah satu jenis konten. Pilih nama label dan kemudian klik tombol simpan dan lanjutkan.

2. Langkah selanjutnya adalah mengkonfigurasi pengaturan bidang. Kami dapat menambahkan gambar default ketika tidak ada gambar yang diunggah. Teks alternatif untuk tujuan aksesibilitas dan judul. Jumlah pengaturan nilai yang diizinkan mengatakan batas unggahan maksimum untuk suatu bidang. Pilih opsi yang diinginkan dan kemudian klik tombol simpan pengaturan bidang.

3. Kemudian kita akan mengatur konfigurasi lain untuk bidang gambar ini seperti Ekstensi file yang diizinkan, Direktori file, Resolusi gambar Maksimum dan Minimum, Ukuran unggahan maksimum, alt dan judul untuk gambar, lalu klik simpan pengaturan.

4. Sekarang, kita sudah selesai melakukan konfigurasi bidang gambar. Mari kita atur opsi pemformatan untuk bidang gambar yang dibuat untuk ColorBox. Arahkan ke Kelola tampilan tipe konten dan kemudian atur opsi format dari dropdown sebagai ColorBox. Mengklik roda gigi di sebelah opsi format memungkinkan kita untuk menyesuaikan gambar yang ditampilkan. Setelah semua opsi diperbarui, klik tombol perbarui dan kemudian klik opsi simpan.

5. Sekarang mari tambahkan beberapa konten ke galeri gambar ColorBox dengan mengklik Tambah konten. Kami dapat mengubah urutan gambar yang diunggah berdasarkan bobot gambar. Dan kemudian klik tombol simpan. Tampilan kontennya akan terlihat seperti di bawah ini.

6. Terakhir, mengklik salah satu gambar akan menampilkan gambar di dalam modal ColorBox seperti yang ditunjukkan di bawah ini.

Anda juga dapat melakukan hal yang sama dengan bidang video yang disematkan.

Bagaimana Mengintegrasikan dengan Modul Inline ColorBox

Modul Colorbox Inline memungkinkan pengguna untuk membuka konten yang sudah ada di halaman dalam ColorBox.

1. Instal modul inline kotak warna

 composer require 'drupal/colorbox_inline:^1.2'
composer require 'drupal/colorbox_inline:^1.2'

2. Aktifkan modul menggunakan perintah drush / Aktifkan secara manual melalui drupal UI

 drush en -y colorbox_inline
drush en -y colorbox_inline

3. Buka gambar dalam modal ColorBox yang ada di halaman menggunakan tautan

4. Navigasikan untuk menambahkan konten -> Jenis konten apa pun yang memiliki bidang tubuh

Ubah formatter teks dari html dasar menjadi html lengkap

6. Kemudian klik tombol simpan.

Di sini, di contoh di atas, atribut data-colorbox-inline dari tag anchor juga dapat berisi nama kelas alih-alih id. lihat gambar adalah tautan yang membuka gambar yang sudah ada di halaman (ubah perubahan sesuai dengan kebutuhan proyek Anda). Kita dapat menggunakan modul ini untuk merender konten apa pun - video, formulir web, dll., dengan cara yang serupa.

Saat melihat halaman ini, Anda dapat melihat tautan dengan gambar. Dan pada klik link view image, popup ColorBox akan muncul seperti yang ditunjukkan pada gambar di bawah ini.

Bagaimana Mengintegrasikan ColorBox Dengan Modul Beban ColorBox

Modul ColorBox Load memungkinkan pengguna untuk memuat konten ke dalam ColorBox menggunakan Ajax. Dengan modul ini, pengguna dapat menentukan serangkaian jalur yang ketika dirender akan membuka ColorBox dengan konten. Itu tergantung pada modul NG Lightbox untuk antarmuka admin jalur. Metode ini dapat digunakan untuk merender node, halaman, formulir web, dan lainnya.
Instal modul beban kotak warna

 composer require 'drupal/colorbox_load:^1.2'
composer require 'drupal/colorbox_load:^1.2'

Aktifkan modul menggunakan perintah drush / Aktifkan secara manual melalui drupal UI

 drush en -y colorbox_load
drush en -y colorbox_load

Menerapkan popup login menggunakan modul ColorBox Load .

1. Konfigurasi modul ColorBox Load dengan menavigasi ke Konfigurasi -> Ng Lightbox (Di Bawah Media). Kita dapat mengonfigurasi jalur yang ingin kita berikan tampilan modal ColorBox, lebar modal ColorBox, kelas untuk modal lightbox dan opsi renderer. (Pilih opsi Anda sesuai keinginan).

2. Sekarang kita dapat melihat modal Drupal ColorBox yang diimplementasikan untuk halaman login dengan mengklik tombol login di beranda.

Bagaimana Mengintegrasikan ColorBox dengan Tampilan Drupal

Untuk beberapa situs web, kami mungkin memerlukan fitur yang dapat menampilkan modal ColorBox untuk daftar gambar. Ini dapat dilakukan dengan bantuan modul Views.
1. Buka struktur -> tampilan -> tambahkan tampilan.
2. Tambahkan bidang gambar untuk melihat dan mengonfigurasi formatter ke ColorBox dan pengaturan lain yang sesuai, lalu simpan tampilan.

3. Sekarang lihat tampilan yang baru saja Anda buat (Dalam kasus saya, saya telah membuat tampilan sebagai halaman). Anda dapat melihat daftar gambar dan ketika Anda mengklik salah satunya, gambar individual ditampilkan di jendela popup ColorBox.