Drupal 9 için ColorBox Modülü hakkında Kapsamlı bir eğitim (Ve nasıl genişletilir)
Yayınlanan: 2020-09-29Görseller, bir web sitesinin kullanıcı deneyimini iyileştirmede önemli bir rol oynar. Bir araştırma, beynimize ilettiğimiz bilgilerin %90'ının görsel olduğunu gösteriyor. Birçok web sitesi yalnızca bu teori etrafında çalışır ve kullanıcıları resim ve video dosyaları gibi tonlarca zengin medyayla bombalar. Çoğu, bu medya dosyalarının sunum yönünü gözden kaçırır ve hayal kırıklığı yaratan bir kullanıcı deneyimi ile sonuçlanır. İhtiyaç duydukları şey, görüntüleri zarif ve sezgisel bir şekilde görüntülemenizi sağlayan, son derece hafif bir jQuery eklentisi olan ColorBox gibi bir araçtır. Stiller ve işlevler, CSS ve Javascript aracılığıyla son derece özelleştirilebilir. Drupal ColorBox modülü, Drupal 6, 7, 8 ve şimdi de Drupal 9 ile uyumludur! Bu makalede, Drupal 9 için ColorBox modülünü nasıl yapılandıracağınızı, uygulayacağınızı ve daha da genişleteceğinizi öğreneceksiniz.
Drupal için ColorBox
ColorBox modülü, ColorBox jQuery eklentisi ile Drupal'a entegre olur. Eklenti, jQuery için hafif, özelleştirilebilir bir ışık kutusudur. Benzer amaçlarla kullanılan diğer rakip “box” modülleri (Thickbox, Lightbox2, Shadowbox, Greybox vb.) arasında ColorBox modülü en popüler ve en yüksek kurulum sayısına sahiptir. Drupal ColorBox'ın kullanımı, yüklenen görüntüleri güzel bir şekilde görüntülemekle bitmez. Ayrıca benzer videolar, pdf'ler, düğüm, sınıflandırma, web formları, iframe'li içerik ve daha fazlası için stil oluşturmayı destekler. Stil, CSS aracılığıyla kontrol edilebilir, böylece görünüm son derece özelleştirilebilir. İşlevsellik, HTML'ye dokunmaya gerek kalmadan JS dosyası aracılığıyla kolayca özelleştirilebilir. Fotoğraf gruplandırmayı da destekler ve yaklaşan görüntüleri önceden yükler
ColorBox Modülünü Kurma Adımları
1.ColorBox modülünü besteci ile kurun.
composer require 'drupal/colorbox:^1.6'composer require 'drupal/colorbox:^1.6'
2. ColorBox eklentisi 1.x'i indirin.
1. Drush komutunu kullanma
(Not: ColorBox eklentisini kurmak için drush komutunu kullanıyorsanız, modülü etkinleştirmeniz ve ardından aşağıdaki komutu çalıştırmanız gerekir)
drush colorbox-plugindrush colorbox-plugin
2. ColorBox eklentisini manuel olarak indirin
Colorbox eklentisini indirin ve /libraries'de paketi açın. Eklenti dosyasına giden yolun şöyle göründüğünden emin olun:
“/libraries/colorbox/jquery.colorbox-min.js”“/libraries/colorbox/jquery.colorbox-min.js”
3. Drupal ColorBox modülünü etkinleştirin.
drush en -y colorboxdrush en -y colorbox
Tebrikler! Artık ColorBox modülünün özelliklerini kullanmaya hazırsınız.
ColorBox Modülünü Yapılandırma
Configuration -> Media -> Colorbox settings seçeneğine giderek Drupal ColorBox modülünü yapılandırın .
ColorBox Kullanarak Bir Resim Galerisi Nasıl Oluşturulur
1. Bir resim galerisi yapmak için öncelikle içerik türlerinden biri için bir resim alanı eklememiz gerekiyor. Etiket adını seçin ve ardından kaydet ve devam et düğmesine tıklayın.
2. Sonraki adım, saha ayarlarının yapılandırılmasıdır. Yüklenen resim olmadığında varsayılan resmi ekleyebiliriz. Erişilebilirlik amacıyla alternatif bir metin ve bir başlık. İzin verilen değer sayısı ayarı, bir alan için maksimum yükleme limitini söylüyor. İstediğiniz seçeneği seçin ve ardından alan ayarlarını kaydet düğmesine tıklayın.
3. Ardından bu görüntü alanları için İzin verilen dosya uzantıları, Dosya dizini, Maksimum ve Minimum görüntü çözünürlüğü, Maksimum yükleme boyutu, görüntü için alt ve başlık gibi diğer yapılandırmaları ayarlayacağız ve ardından ayarları kaydet'e tıklayacağız.
4. Şimdi görüntü alanı yapılandırmasını bitirdik. ColorBox için oluşturulan görüntü alanı için biçimlendirme seçeneğini belirleyelim. İçerik türünün görünümünü yönet'e gidin ve ardından açılır menüden format seçeneğini ColorBox olarak ayarlayın. Biçim seçeneğinin yanındaki dişliye tıklamak, görüntülenen resmi özelleştirmemize olanak tanır. Tüm seçenekler güncellendiğinde, güncelleme düğmesine tıklayın ve ardından kaydet seçeneğine tıklayın.
5. Şimdi İçerik ekle'ye tıklayarak ColorBox resim galerimize biraz içerik ekleyelim. Resim ağırlıklarına göre yüklenen resimlerin sırasını değiştirebiliriz. Ve sonra kaydet düğmesine tıklayın. İçeriğin görüntüsü aşağıdaki gibi görünecektir.
6. Son olarak, resimlerden herhangi birine tıklamak, resmi aşağıda gösterildiği gibi ColorBox kipi içinde görüntüler.
Aynı şeyi video gömülü alanla da yapabilirsiniz.
ColorBox Satır İçi Modülü ile Nasıl Entegrasyon
Colorbox Inline modülü, kullanıcının ColorBox içinde zaten sayfada bulunan içeriği açmasına izin verir.
1. colorbox satır içi modülünü kurun
composer require 'drupal/colorbox_inline:^1.2'composer require 'drupal/colorbox_inline:^1.2'
2. Modülü drush komutunu kullanarak etkinleştirin / drupal UI aracılığıyla manuel olarak etkinleştirin
drush en -y colorbox_inlinedrush en -y colorbox_inline
3. Resmi, bir bağlantı kullanarak sayfada bulunan ColorBox modunda açın
4. İçerik eklemek için gezinin -> Gövde alanına sahip herhangi bir içerik türü
Metin biçimlendiriciyi temel html'den tam html'ye değiştirin
6. Ardından kaydet düğmesine tıklayın.
Burada, yukarıdaki örnekte, bağlantı etiketinin data-colorbox-inline özniteliği, id yerine sınıf adını da içerebilir. resmi görüntüle, bir sayfada zaten var olan bir resmi açtığı bir bağlantıdır (değişiklikleri proje gereksinimlerinize göre değiştirin). Bu modülü, herhangi bir içeriği - video, web formu vb. - benzer şekilde oluşturmak için kullanabiliriz.
Bu sayfayı görüntülerken, resim ile bir bağlantı görebilirsiniz. Ve resmi görüntüle bağlantısına tıklandığında, aşağıdaki resimde gösterildiği gibi bir ColorBox açılır penceresi görünecektir.
ColorBox, ColorBox Yükleme Modülüyle Nasıl Entegre Edilir?
ColorBox Load modülü, kullanıcıların içeriği Ajax kullanarak ColorBox'a yüklemesine olanak tanır. Bu modül ile kullanıcılar, oluşturulduğunda içerikle birlikte bir ColorBox açacak bir dizi yol belirtebilir. Yollar yönetici arayüzü için NG Lightbox modülüne bağlıdır. Bu yöntem, düğümleri, sayfaları, web formlarını ve daha fazlasını oluşturmak için kullanılabilir.
colorbox yük modülünü kurun
composer require 'drupal/colorbox_load:^1.2'composer require 'drupal/colorbox_load:^1.2'
Modülü drush komutunu kullanarak etkinleştirin / drupal UI aracılığıyla manuel olarak etkinleştirin
drush en -y colorbox_loaddrush en -y colorbox_load
ColorBox Load modülünü kullanarak bir oturum açma açılır penceresinin uygulanması .
1. Yapılandırma -> Ng Lightbox (Medya Altında) seçeneğine giderek ColorBox Yükleme modülünü yapılandırın . ColorBox modal görüntüsünü sağlamak istediğimiz yolları, ColorBox modunun genişliğini, lightbox modal için sınıfı ve oluşturucu seçeneklerini yapılandırabiliriz. (İstediğiniz seçeneği seçin).
2. Şimdi ana sayfadaki giriş düğmesine tıklayarak giriş sayfası için uygulanan Drupal ColorBox modunu görebiliriz.
Drupal Görünümler ile ColorBox Nasıl Entegre Edilir
Bazı web siteleri için, bir resim listesi için bir ColorBox modeli görüntüleyebilen bir özelliğe ihtiyacımız olabilir. Bu, Views modülü yardımıyla yapılabilir.
1. Yapı -> görünümler -> görünüm ekle'ye gidin.
2. Biçimlendiriciyi ColorBox ve diğer ayarlara göre görüntülemek ve yapılandırmak için görüntü alanını ekleyin ve ardından görünümü kaydedin.
3. Şimdi az önce oluşturduğunuz görünüme bir göz atın (Benim durumumda bir sayfa olarak bir görünüm oluşturdum). Bir görüntü listesi görebilirsiniz ve bunlardan birine tıkladığınızda, ColorBox açılır penceresinde tek tek görüntü gösterilir.
