Un tutorial cuprinzător despre modulul ColorBox pentru Drupal 9 (și cum să-l extinzi)

Imaginile joacă un rol semnificativ în îmbunătățirea experienței utilizatorului unui site web. Un studiu arată că 90% din informațiile pe care le transmitem creierului nostru sunt vizuale. Multe site-uri web lucrează numai în jurul acestei teorii și bombardează utilizatorii cu tone de conținut media bogat, cum ar fi imagini și fișiere video. Majoritatea dintre ele trec cu vederea aspectul de prezentare al acestor fișiere media și ajung la o experiență dezamăgitoare pentru utilizator. Ceea ce au nevoie este un instrument precum ColorBox, care este un plugin jQuery extrem de ușor, care vă permite să afișați imagini elegant și intuitiv. Stilurile și funcționalitățile sunt extrem de personalizabile prin CSS și Javascript. Modulul Drupal ColorBox este compatibil cu Drupal 6, 7, 8 și acum și cu Drupal 9! În acest articol, veți învăța cum să configurați, să implementați și să extindeți în continuare modulul ColorBox pentru Drupal 9.

ColorBox pentru Drupal

Modulul ColorBox se integrează cu pluginul ColorBox jQuery în Drupal. Pluginul este o casetă lightbox personalizabilă ușoară pentru jQuery. Dintre celelalte module „box” concurente care sunt folosite în scopuri similare (Thickbox, Lightbox2, Shadowbox, Greybox etc.), modulul ColorBox este cel mai popular și are cel mai mare număr de instalări. Utilizarea Drupal ColorBox nu se termină doar cu afișarea frumos a imaginilor încărcate. De asemenea, acceptă stilul pentru videoclipuri, pdf-uri, nod, taxonomie, formulare web, conținut iframed și multe altele. Stilul poate fi controlat prin CSS, astfel încât aspectul este extrem de personalizabil. Funcționalitatea este, de asemenea, ușor de personalizat prin fișierul JS, fără a fi nevoie să atingeți HTML. Acceptă și gruparea fotografiilor și preîncarcă imaginile viitoare

Pași pentru a instala modulul ColorBox

1.Instalați modulul ColorBox cu compozitor.

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

2. Descărcați pluginul ColorBox 1.x.
1. Folosind comanda Drush
(Notă: dacă utilizați comanda drush pentru a instala pluginul ColorBox, trebuie să activați modulul și apoi să rulați comanda de mai jos)

 drush colorbox-plugin
drush colorbox-plugin

2. Descărcați manual pluginul ColorBox
Descărcați pluginul Colorbox și despachetați în /libraries. Asigurați-vă că calea către fișierul plugin arată astfel:

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

3. Activați modulul Drupal ColorBox.

 drush en -y colorbox
drush en -y colorbox

Felicitări! Acum sunteți gata să utilizați funcțiile modulului ColorBox.

Configurarea modulului ColorBox

Configurați modulul Drupal ColorBox navigând la Configurare -> Media -> Setări Colorbox .

Cum se creează o galerie de imagini folosind ColorBox

1. Pentru a realiza o galerie de imagini, trebuie mai întâi să adăugăm un câmp de imagine pentru unul dintre tipurile de conținut. Alegeți numele etichetei și apoi faceți clic pe butonul Salvați și continuați.

2. Următorul pas este configurarea setărilor de teren. Putem adăuga imaginea implicită atunci când nu există imagini încărcate. Un text alternativ pentru accesibilitate și un titlu. Numărul permis de setări de valori indică limita maximă de încărcare pentru un câmp. Selectați opțiunea dorită și apoi faceți clic pe butonul de salvare a setărilor câmpului.

3. Apoi vom seta celelalte configurații pentru câmpurile acestei imagini precum Extensii de fișiere permise, Director de fișiere, Rezoluția maximă și minimă a imaginii, Dimensiunea maximă de încărcare, alt și titlul pentru imagine și apoi faceți clic pe Salvare setări.

4. Acum am terminat configurarea câmpului de imagine. Să setăm opțiunea de formatare pentru câmpul de imagine creat pentru ColorBox. Navigați la Gestionați afișarea tipului de conținut și apoi setați opțiunea de format din meniul drop-down ca ColorBox. Făcând clic pe roata din dreptul opțiunii de format, ne permite să personalizăm imaginea afișată. Odată ce toate opțiunile sunt actualizate, faceți clic pe butonul de actualizare și apoi pe opțiunea de salvare.

5. Acum să adăugăm ceva conținut în galeria noastră de imagini ColorBox făcând clic pe Adăugați conținut. Putem schimba ordinea imaginilor încărcate în funcție de greutatea imaginii. Și apoi faceți clic pe butonul de salvare. Afișarea conținutului va arăta ca mai jos.

6. În cele din urmă, făcând clic pe oricare dintre imagini, se afișează imaginea în modalul ColorBox, așa cum se arată mai jos.

Puteți face același lucru și cu câmpul video încorporat.

Cum se integrează cu modulul inline ColorBox

Modulul Colorbox Inline permite utilizatorului să deschidă conținutul care este deja pe pagina din ColorBox.

1. Instalați modulul inline colorbox

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

2. Activați modulul utilizând comanda drush / Activați manual prin interfața de utilizare drupal

 drush en -y colorbox_inline
drush en -y colorbox_inline

3. Deschideți imaginea în modal ColorBox care se află pe pagină folosind un link

4. Navigați pentru a adăuga conținut -> Orice tip de conținut care are un câmp de corp

Schimbați formatarea textului de la html de bază la html complet

6. Apoi faceți clic pe butonul de salvare.

Aici, în exemplul de mai sus, atributul data-colorbox-inline al etichetei ancora poate conține și numele clasei în loc de id. vizualizare imagine este un link prin care deschide o imagine deja existentă într-o pagină (modificați modificările în funcție de cerințele proiectului). Putem folosi acest modul pentru a reda orice conținut - video, formular web etc., într-o manieră similară.

La vizualizarea acestei pagini, puteți vedea un link cu imaginea. Și la clic pe linkul de vizualizare a imaginii, va apărea un pop-up ColorBox, așa cum se arată în imaginea de mai jos.

Cum se integrează ColorBox cu modulul de încărcare ColorBox

Modulul ColorBox Load permite utilizatorilor să încarce conținutul în ColorBox folosind Ajax. Cu acest modul, utilizatorii pot specifica o serie de căi care, atunci când sunt randate, vor deschide un ColorBox cu conținutul. Depinde de modulul NG Lightbox pentru interfața de administrare a căilor. Această metodă poate fi folosită pentru a reda noduri, pagini, formulare web și multe altele.
Instalați modulul de încărcare colorbox

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

Activați modulul utilizând comanda drush / Activați manual prin interfața de utilizare drupal

 drush en -y colorbox_load
drush en -y colorbox_load

Implementarea unui pop-up de conectare folosind modulul ColorBox Load .

1. Configurați modulul ColorBox Load navigând la Configuration -> Ng Lightbox (Under Media). Putem configura căile pentru care dorim să oferim afișajul modal ColorBox, lățimea modalului ColorBox, clasa pentru modulul lightbox și opțiunile de randare. (Alegeți opțiunea după cum doriți).

2. Acum putem vedea modalul Drupal ColorBox implementat pentru pagina de autentificare făcând clic pe butonul de conectare de pe pagina de start.

Cum se integrează ColorBox cu Drupal Views

Pentru unele site-uri web, este posibil să avem nevoie de o funcție care să poată afișa un modal ColorBox pentru o listă de imagini. Acest lucru se poate face cu ajutorul modulului Vizualizări.
1. Accesați structură -> vizualizări -> adăugați vizualizare.
2. Adăugați câmpul de imagine pentru a vizualiza și configura formatatorul la ColorBox și alte setări în consecință și apoi salvați vizualizarea.

3. Acum aruncați o privire la vizualizarea pe care tocmai ați creat-o (În cazul meu, am creat o vizualizare ca pagină). Puteți vedea o listă de imagini și când faceți clic pe una dintre ele, imaginea individuală este afișată în fereastra pop-up ColorBox.