Un tutorial completo sul modulo ColorBox per Drupal 9 (e come estenderlo)

Le immagini svolgono un ruolo significativo nel migliorare l'esperienza utente di un sito web. Uno studio mostra che il 90% delle informazioni che trasmettiamo al nostro cervello è visivo. Molti siti Web aggirano questa teoria da soli e bombardano gli utenti con tonnellate di contenuti multimediali come immagini e file video. La maggior parte di essi trascura l'aspetto della presentazione di questi file multimediali e finisce con un'esperienza utente deludente. Quello di cui hanno bisogno è uno strumento come ColorBox che è un plug-in jQuery estremamente leggero che consente di visualizzare le immagini in modo elegante e intuitivo. Gli stili e le funzionalità sono altamente personalizzabili tramite CSS e Javascript. Il modulo Drupal ColorBox è compatibile con Drupal 6, 7, 8 e ora anche Drupal 9! In questo articolo imparerai come configurare, implementare ed estendere ulteriormente il modulo ColorBox per Drupal 9.

ColorBox per Drupal

Il modulo ColorBox si integra con il plugin jQuery ColorBox in Drupal. Il plugin è un lightbox personalizzabile leggero per jQuery. Tra gli altri moduli “box” della concorrenza che vengono utilizzati per scopi simili (Thickbox, Lightbox2, Shadowbox, Greybox, ecc.), il modulo ColorBox è il più popolare e ha il maggior numero di installazioni. L'utilizzo di Drupal ColorBox non si limita solo alla visualizzazione meravigliosa delle immagini caricate. Supporta anche lo stile per video, pdf, nodi, tassonomia, moduli web, contenuti iframe e altro ancora. Lo stile può essere controllato tramite il CSS, quindi l'aspetto è altamente personalizzabile. La funzionalità è anche facilmente personalizzabile tramite il file JS senza dover toccare l'HTML. Supporta anche il raggruppamento di foto e precarica le immagini in arrivo

Passaggi per installare il modulo ColorBox

1.Installa il modulo ColorBox con il compositore.

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

2. Scarica il plugin ColorBox 1.x.
1. Utilizzo del comando Drush
(Nota: se stai usando il comando drush per installare il plugin ColorBox, devi abilitare il modulo e poi eseguire il comando seguente)

 drush colorbox-plugin
drush colorbox-plugin

2. Scarica manualmente il plugin ColorBox
Scarica il plug-in Colorbox e scompatta in /libraries. Assicurati che il percorso del file del plugin sia simile a:

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

3. Abilita il modulo Drupal ColorBox.

 drush en -y colorbox
drush en -y colorbox

Congratulazioni! Ora sei pronto per utilizzare le funzionalità del modulo ColorBox.

Configurazione del modulo ColorBox

Configura il modulo Drupal ColorBox navigando su Configurazione -> Media -> Impostazioni Colorbox .

Come creare una galleria di immagini usando ColorBox

1. Per creare una galleria di immagini, dobbiamo prima aggiungere un campo immagine per uno dei tipi di contenuto. Scegli il nome dell'etichetta, quindi fai clic sul pulsante Salva e continua.

2. Il passaggio successivo consiste nel configurare le impostazioni sul campo. Possiamo aggiungere l'immagine predefinita quando non ci sono immagini caricate. Un testo alternativo a scopo di accessibilità e un titolo. Il numero consentito di impostazioni di valori indica il limite massimo di caricamento per un campo. Selezionare l'opzione desiderata e quindi fare clic sul pulsante di salvataggio delle impostazioni del campo.

3. Quindi imposteremo le altre configurazioni per questi campi immagine come Estensioni file consentite, Directory file, Risoluzione massima e minima dell'immagine, Dimensione massima di caricamento, alt e titolo per l'immagine e quindi fare clic su Salva impostazioni.

4. Ora, abbiamo terminato la configurazione del campo immagine. Impostiamo l'opzione di formattazione per il campo immagine creato per ColorBox. Passare a Gestisci visualizzazione del tipo di contenuto e quindi impostare l'opzione di formato dal menu a discesa come ColorBox. Facendo clic sull'ingranaggio accanto all'opzione del formato, possiamo personalizzare l'immagine visualizzata. Una volta aggiornate tutte le opzioni, fare clic sul pulsante di aggiornamento e quindi fare clic sull'opzione di salvataggio.

5. Ora aggiungiamo del contenuto nella nostra galleria di immagini ColorBox facendo clic su Aggiungi contenuto. Possiamo modificare l'ordine delle immagini caricate in base al peso delle immagini. E quindi fare clic sul pulsante Salva. La visualizzazione del contenuto sarà la seguente.

6. Infine, facendo clic su una qualsiasi delle immagini viene visualizzata l'immagine all'interno della modale ColorBox come mostrato di seguito.

Puoi anche fare lo stesso con il campo video incorporato.

Come eseguire l'integrazione con il modulo in linea ColorBox

Il modulo Colorbox Inline consente all'utente di aprire il contenuto che è già sulla pagina all'interno di ColorBox.

1. Installa il modulo in linea colorbox

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

2. Abilita il modulo usando il comando drush / Abilita manualmente tramite drupal UI

 drush en -y colorbox_inline
drush en -y colorbox_inline

3. Apri l'immagine in modale ColorBox che si trova sulla pagina usando un link

4. Naviga per aggiungere contenuto -> Qualsiasi tipo di contenuto che ha il campo del corpo

Cambia il formattatore di testo da html di base a html completo

6. Quindi fare clic sul pulsante Salva.

Nell'esempio sopra, l'attributo data-colorbox-inline del tag anchor può anche contenere il nome della classe invece dell'id. visualizza immagine è un collegamento in cui apre un'immagine già esistente in una pagina (modifica le modifiche in base alle esigenze del tuo progetto). Possiamo usare questo modulo per rendere qualsiasi contenuto - video, webform, ecc., in modo simile.

Nella visualizzazione di questa pagina, è possibile vedere un collegamento con l'immagine. E facendo clic sul collegamento dell'immagine di visualizzazione, verrà visualizzato un popup ColorBox come mostrato nell'immagine sottostante.

Come integrare ColorBox con il modulo di caricamento ColorBox

Il modulo ColorBox Load consente agli utenti di caricare il contenuto in ColorBox utilizzando Ajax. Con questo modulo, gli utenti possono specificare una serie di percorsi che, una volta resi, apriranno un ColorBox con il contenuto. Dipende dal modulo NG Lightbox per l'interfaccia di amministrazione dei percorsi. Questo metodo può essere utilizzato per eseguire il rendering di nodi, pagine, moduli Web e altro.
Installa il modulo di caricamento colorbox

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

Abilita il modulo usando il comando drush / Abilita manualmente tramite drupal UI

 drush en -y colorbox_load
drush en -y colorbox_load

Implementazione di un popup di accesso utilizzando il modulo ColorBox Load .

1. Configurare il modulo di caricamento di ColorBox accedendo a Configurazione -> Ng Lightbox (sotto Media). Possiamo configurare i percorsi per i quali vogliamo fornire la visualizzazione modale ColorBox, la larghezza del modale ColorBox, la classe per le opzioni modali lightbox e renderer. (Scegli la tua opzione come desiderato).

2. Ora possiamo vedere la modalità Drupal ColorBox implementata per la pagina di accesso facendo clic sul pulsante di accesso nella home page.

Come integrare ColorBox con Drupal Views

Per alcuni siti Web, potremmo aver bisogno di una funzionalità in grado di visualizzare un modale ColorBox per un elenco di immagini. Questo può essere fatto con l'aiuto del modulo Viste.
1. Vai a struttura -> viste -> aggiungi vista.
2. Aggiungere il campo immagine per visualizzare e configurare il formattatore su ColorBox e altre impostazioni di conseguenza, quindi salvare la vista.

3. Ora dai un'occhiata alla vista che hai appena creato (nel mio caso ho creato una vista come una pagina). Puoi vedere un elenco di immagini e quando fai clic su una di esse, la singola immagine viene mostrata nella finestra a comparsa ColorBox.