Ein umfassendes Tutorial zum ColorBox-Modul für Drupal 9 (und wie man es erweitert)
Veröffentlicht: 2020-09-29Bilder spielen eine wichtige Rolle bei der Verbesserung der Benutzerfreundlichkeit einer Website. Eine Studie zeigt, dass 90% der Informationen, die wir an unser Gehirn weitergeben, visuell sind. Viele Websites umgehen diese Theorie allein und bombardieren die Benutzer mit Tonnen von Rich Media wie Bildern und Videodateien. Die meisten von ihnen übersehen den Präsentationsaspekt dieser Mediendateien und enden mit einer enttäuschenden Benutzererfahrung. Was sie brauchen, ist ein Tool wie ColorBox, ein extrem leichtes jQuery-Plugin, mit dem Sie Bilder elegant und intuitiv anzeigen können. Die Stile und Funktionalitäten sind über CSS und Javascript hochgradig anpassbar. Das Drupal ColorBox-Modul ist mit Drupal 6, 7, 8 und jetzt auch mit Drupal 9 kompatibel! In diesem Artikel erfahren Sie, wie Sie das ColorBox-Modul für Drupal 9 konfigurieren, implementieren und weiter ausbauen.
ColorBox für Drupal
Das ColorBox-Modul lässt sich mit dem ColorBox jQuery-Plugin in Drupal integrieren. Das Plugin ist eine leichte anpassbare Lightbox für jQuery. Unter den anderen „box“-Modulen, die für ähnliche Zwecke verwendet werden (Thickbox, Lightbox2, Shadowbox, Greybox usw.), ist das ColorBox-Modul das beliebteste und weist die meisten Installationen auf. Die Verwendung von Drupal ColorBox endet nicht nur mit der schönen Anzeige hochgeladener Bilder. Es unterstützt auch das Styling für Videos, PDFs, Knoten, Taxonomien, Webformulare, iframe-Inhalte und mehr. Das Styling kann über das CSS gesteuert werden, sodass das Erscheinungsbild hochgradig anpassbar ist. Die Funktionalität ist auch über die JS-Datei leicht anpassbar, ohne dass Sie den HTML-Code berühren müssen. Es unterstützt auch das Gruppieren von Fotos und lädt kommende Bilder vorab.
Schritte zur Installation des ColorBox-Moduls
1.Installieren Sie das ColorBox-Modul mit Composer.
composer require 'drupal/colorbox:^1.6'composer require 'drupal/colorbox:^1.6'
2. Laden Sie das ColorBox-Plugin 1.x herunter.
1. Verwenden des Drush-Befehls
(Hinweis: Wenn Sie den Befehl drush verwenden, um das ColorBox-Plugin zu installieren, müssen Sie das Modul aktivieren und dann den folgenden Befehl ausführen)
drush colorbox-plugindrush colorbox-plugin
2. ColorBox-Plugin manuell herunterladen
Laden Sie das Colorbox-Plugin herunter und entpacken Sie es in /libraries. Stellen Sie sicher, dass der Pfad zur Plugin-Datei wie folgt aussieht:
“/libraries/colorbox/jquery.colorbox-min.js”“/libraries/colorbox/jquery.colorbox-min.js”
3. Aktivieren Sie das Drupal ColorBox-Modul.
drush en -y colorboxdrush en -y colorbox
Herzliche Glückwünsche! Sie können nun die Funktionen des ColorBox-Moduls nutzen.
Konfigurieren des ColorBox-Moduls
Konfigurieren Sie das Drupal ColorBox-Modul, indem Sie zu Konfiguration -> Medien -> Colorbox-Einstellungen navigieren .
So erstellen Sie eine Bildergalerie mit ColorBox
1. Um eine Bildergalerie zu erstellen, müssen wir zunächst ein Bildfeld für einen der Inhaltstypen hinzufügen. Wählen Sie den Etikettennamen und klicken Sie dann auf die Schaltfläche Speichern und fortfahren.
2. Der nächste Schritt besteht darin, die Feldeinstellungen zu konfigurieren. Wir können das Standardbild hinzufügen, wenn keine Bilder hochgeladen wurden. Ein alternativer Text aus Gründen der Barrierefreiheit und ein Titel. Die zulässige Anzahl von Werteeinstellungen gibt das maximale Upload-Limit für ein Feld an. Wählen Sie die gewünschte Option und klicken Sie dann auf die Schaltfläche Feldeinstellungen speichern.
3. Dann werden wir die anderen Konfigurationen für diese Bildfelder wie Erlaubte Dateierweiterungen, Dateiverzeichnis, Maximale und minimale Bildauflösung, Maximale Uploadgröße, Alt und Titel für das Bild festlegen und dann auf Einstellungen speichern klicken.
4. Jetzt sind wir mit der Bildfeldkonfiguration fertig. Legen wir die Formatierungsoption für das für ColorBox erstellte Bildfeld fest. Navigieren Sie zu Anzeige des Inhaltstyps verwalten und legen Sie dann die Formatoption aus der Dropdown-Liste als ColorBox fest. Durch Klicken auf das Zahnrad neben der Formatoption können wir das angezeigte Bild anpassen. Sobald alle Optionen aktualisiert sind, klicken Sie auf die Schaltfläche „Aktualisieren“ und dann auf die Option „Speichern“.
5. Nun fügen wir unserer ColorBox-Bildergalerie einige Inhalte hinzu, indem wir auf Inhalt hinzufügen klicken. Wir können die Reihenfolge der hochgeladenen Bilder basierend auf den Bildgewichten ändern. Und dann auf den Speichern-Button klicken. Die Anzeige des Inhalts sieht wie folgt aus.
6. Wenn Sie schließlich auf eines der Bilder klicken, wird das Bild im ColorBox-Modal angezeigt, wie unten gezeigt.
Dasselbe können Sie auch mit dem eingebetteten Videofeld tun.
So integrieren Sie das ColorBox Inline-Modul
Das Colorbox Inline-Modul ermöglicht es dem Benutzer, den Inhalt, der sich bereits auf der Seite befindet, innerhalb der ColorBox zu öffnen.
1. Installieren Sie das Colorbox-Inline-Modul
composer require 'drupal/colorbox_inline:^1.2'composer require 'drupal/colorbox_inline:^1.2'
2. Aktivieren Sie das Modul mit dem Drush-Befehl / Manuell über die Drupal-Benutzeroberfläche aktivieren
drush en -y colorbox_inlinedrush en -y colorbox_inline
3. Öffnen Sie das Bild im ColorBox-Modal, das sich auf der Seite befindet, über einen Link
4. Navigieren Sie zu Inhalt hinzufügen -> Jeder Inhaltstyp, der ein Textfeld hat
Ändern Sie den Textformatierer von Basic-HTML in Full-HTML
6. Klicken Sie anschließend auf die Schaltfläche Speichern.
Hier im obigen Beispiel kann das data-colorbox-inline-Attribut des Anker-Tags auch den Klassennamen anstelle der ID enthalten. Bild anzeigen ist ein Link, über den ein bereits vorhandenes Bild auf einer Seite geöffnet wird (Ändern Sie die Änderungen entsprechend Ihren Projektanforderungen). Wir können dieses Modul verwenden, um beliebige Inhalte - Videos, Webformulare usw. - auf ähnliche Weise zu rendern.
Wenn Sie diese Seite anzeigen, sehen Sie einen Link mit dem Bild. Und wenn Sie auf den Link zum Anzeigen des Bildes klicken, wird ein ColorBox-Popup angezeigt, wie im folgenden Bild gezeigt.
So integrieren Sie ColorBox in das ColorBox-Lademodul
Das ColorBox Load-Modul ermöglicht es Benutzern, den Inhalt mit Ajax in ColorBox zu laden. Mit diesem Modul können Benutzer eine Reihe von Pfaden angeben, die beim Rendern eine ColorBox mit dem Inhalt öffnen. Es hängt vom NG Lightbox-Modul für die Pfadverwaltungsschnittstelle ab. Diese Methode kann zum Rendern von Knoten, Seiten, Webformularen und mehr verwendet werden.
Installieren Sie das Colorbox-Lademodul
composer require 'drupal/colorbox_load:^1.2'composer require 'drupal/colorbox_load:^1.2'
Aktivieren Sie das Modul mit dem Drush-Befehl / Manuell über die Drupal-Benutzeroberfläche aktivieren
drush en -y colorbox_loaddrush en -y colorbox_load
Implementieren eines Login-Popups mit dem ColorBox Load-Modul .
1. Konfigurieren Sie das ColorBox-Lademodul, indem Sie zu Konfiguration -> Ng Lightbox (unter Medien) navigieren. Wir können die Pfade konfigurieren, für die wir die modale Anzeige der ColorBox bereitstellen möchten, die Breite der modalen ColorBox, die Klasse für das modale Lightbox und die Renderer-Optionen. (Wählen Sie Ihre Option wie gewünscht).
2. Jetzt können wir das für die Login-Seite implementierte Drupal ColorBox-Modal sehen, indem wir auf die Login-Schaltfläche auf der Homepage klicken.
So integrieren Sie ColorBox in Drupal-Ansichten
Für einige Websites benötigen wir möglicherweise eine Funktion, die ein ColorBox-Modal für eine Liste von Bildern anzeigen kann. Dies kann mit Hilfe des Views-Moduls erfolgen.
1. Gehen Sie zu Struktur -> Ansichten -> Ansicht hinzufügen.
2. Fügen Sie das Bildfeld zum Anzeigen hinzu und konfigurieren Sie den Formatierer entsprechend zu ColorBox und anderen Einstellungen und speichern Sie dann die Ansicht.
3. Sehen Sie sich nun die soeben erstellte Ansicht an (In meinem Fall habe ich eine Ansicht als Seite erstellt). Sie sehen eine Liste von Bildern und wenn Sie eines davon anklicken, wird das einzelne Bild im ColorBox-Popup-Fenster angezeigt.
