Direkt zum Inhalt
Bild
a1-opensenselabs-banner.jpg

HowTo: Colorbox-Modul in Drupal 8 verwenden

AI-Translated
article publisher

Bikash

Drupal

Der Microsoft Picture Manager zeigt Bilder an, ebenso wie Picasa von Google. Ich denke aber, die meisten von uns werden zustimmen, dass Picasa die Benutzerfreundlichkeit enorm verbessert, und zwar durch die Art und Weise, wie die Bilder dem Benutzer präsentiert werden. Auch das Standard-Drupal wird der Art und Weise, wie die Bilder angezeigt werden, nicht gerecht. Die Animation ist im Vergleich dazu etwas eintönig und bietet nicht viele Funktionen.

Optional können wir in Drupal 8 Colorbox verwenden, eine schlanke, anpassbare Lightbox für Entitäten und Views-Formatierer. Es wird verwendet, um die jQuery-JavaScript-Bibliothek zu erweitern und zusätzliche Funktionen in ein HTML-Dokument einzubinden. Wir können Bildergalerien erstellen und verschiedene Effekte auf die von uns hochgeladenen Bilder anwenden.

Die Verwendung von Colorbox beschränkt sich jedoch nicht nur auf die ansprechende Darstellung hochgeladener Bilder. Es kann auch zusammen mit dem Colorbox-Load-Modul verwendet werden, um Knotenseiten, Benutzerseiten, View-Seiten, Webformulare usw. innerhalb von Colorbox anzuzeigen.

In diesem Artikel werden wir erörtern, wie wir Colorbox verwenden können, um unsere Websites eleganter und intuitiver zu gestalten.

Wie verwende ich das Drupal Colorbox-Modul?

Installation des Moduls - mit Composer

composer require drupal/colorbox

Mit Drush

Drush dl colorbox

Aktivieren Sie dann das Modul mit

Drush -y en   colorbox

Sie können es mit Drush installieren

Drush colorbox-plugin

Dadurch wird das Colorbox-Plugin in Ihrem Bibliotheksordner installiert. Oder Sie können die Bibliothek über diesen Link herunterladen

https://github.com/jackmoore/colorbox/archive/1.x.zip

Benennen Sie den Ordner in Colorbox um und legen Sie ihn im Bibliotheksordner ab.

Danach können Sie das Colorbox-Modul verwenden.

Nach der Installation des Moduls können Sie die Effekte und Stiloptionen von Colorbox ändern, indem Sie zu Konfiguration > Medien > Colorbox-Einstellungen gehen.

Admin-Oberfläche der Colorbox-Einstellungen mit vielen Blöcken

Die Bibliothek ist erforderlich, damit das Colorbox-Modul funktioniert.

Beginnen wir also mit der Erstellung einer Bildergalerie.

  1. Nach dem Herunterladen und Installieren des Colorbox-Moduls zusammen mit den erforderlichen Bibliotheken gehen wir zum Colorbox-Konfigurationsmenü, indem wir Struktur/Inhaltstypen/Felder verwalten aufrufen.

    Wählen Sie im Dropdown-Menü ein Bildfeld aus, wählen Sie einen Beschriftungsnamen und klicken Sie auf Speichern und Fortfahren.
    Hinzufügen eines neuen Bildfelds
    Hinzufügen eines neuen Bildfelds
  2. Im folgenden Bildschirm können Sie die Feldeinstellungen konfigurieren. Wir können ein Standardbild festlegen, wenn keine Bilder hochgeladen werden. Ein alternativer Text für die Barrierefreiheit und ein Titel. 
    Bildfeldkonfiguration
    Bildfeldkonfiguration
  3. Die Einstellung "Zulässige Anzahl von Werten" bestimmt die maximale Anzahl von Dateien, die hochgeladen werden können. Um sie festzulegen, wählen Sie die gewünschte Option aus dem Dropdown-Menü aus.

    Klicken Sie auf "Feldeinstellungen speichern".
     
  4. Im nächsten Fenster scrollen wir nach unten und legen die unterstützten Bildformate fest. Das Dateiverzeichnis definiert, wo die hochgeladenen Bilder gespeichert werden. Standardmäßig speichert Drupal sie in Ordnern, die nach Monaten kategorisiert sind. Wir können auch die maximale und minimale Auflösung und die Größe konfigurieren, die ein Benutzer hochladen darf. 
    Einstellungen für die hochgeladenen Bilder.
    Einstellungen für die hochgeladenen Bilder
    TIPP: Um eine Pixelbildung der Bilder zu vermeiden, legen Sie die minimale zulässige Auflösung auf einen respektablen Wert fest.
     
  5. Nun navigieren wir zu Struktur/Inhaltstypen/Anzeige verwalten und scrollen nach unten zu dem Feld, das für die Verwendung von Colorbox erstellt wurde, und wählen im Dropdown-Menü "Format" die Option "Colorbox" aus.

    Wenn Sie auf das Zahnrad neben der Formatoption klicken, können Sie anpassen, wie das Bild angezeigt wird, welche Effekte angewendet werden, wie das Bild in Colorbox gerendert wird, welche Beschriftung angezeigt wird usw. Nachdem Sie alle Informationen mit den gewünschten Optionen aktualisiert haben, müssen Sie auf "Aktualisieren" und dann auf "Speichern" klicken, damit die Konfigurationen wirksam werden.
    Das Menü erscheint nach dem Klicken auf das Zahnradsymbol
    Das Menü erscheint nach dem Klicken auf das Zahnradsymbol
  6. Schließlich können wir Inhalte hinzufügen, indem wir auf "Inhalte hinzufügen" klicken. Um Bilder zur Galerie hinzuzufügen, müssen wir nach unten scrollen und Bilder hinzufügen. Wir können die Reihenfolge der Bilder ändern, indem wir die Gewichtungen ändern, die standardmäßig aufsteigend nummeriert sind. 
     
  7. Klicken Sie auf "Speichern" und kehren Sie zur Website zurück. Gefällt Ihnen, was Sie sehen? Ich wette, das tut es.
    Bildergalerie
    Bildergalerie
  8. Nun, das ist noch nicht alles. Colorbox kann auch verwendet werden, um verknüpfte Objekte als Popups mit Colorbox Inline anzuzeigen. 

Verwenden von Colorbox Inline

Um Colorbox Inline zu verwenden, um verknüpfte Elemente als Popups anzuzeigen, benötigen wir auch das IMCE-Modul.

  1. Nach der Installation der erforderlichen Module navigieren Sie zu Konfiguration/Inhaltserstellung/Textformate und -editoren.

    Scrollen Sie nach unten, um die Zeile "Vollständiges HTML" zu suchen, und klicken Sie auf "Konfigurieren", wie in der Abbildung unten gezeigt.
    Vollständige HTML-Zeile
    Die vollständige HTML-Zeile
  2. Navigieren Sie zu "Toolbar-Konfiguration" und ziehen Sie die IMCE-Linkmanager- und Bildmanager-Symbole von den verfügbaren Schaltflächen in die aktive Toolbar. Klicken Sie nach dem Konfigurationsprozess auf die Schaltfläche "Konfiguration speichern".
    Hervorhebung der IMCE-Linkmanager- und Bildmanager-Symbole
    Hervorhebung der IMCE-Linkmanager- und Bildmanager-Symbole
  3. Nun können wir beginnen, Inhalte hinzuzufügen, indem wir zum Menü "Inhalt hinzufügen" gehen. Wenn wir uns im CKEditor befinden, müssen wir das Textformat von "Basic HTML" in "Full HTML" ändern (in der Abbildung unten grün hervorgehoben).
    CKEditor, in dem Änderungen in den hervorgehobenen Bereichen vorgenommen werden.
    Der CKEditor, in dem Änderungen in den hervorgehobenen Bereichen vorgenommen werden.
  4. Um ein Bild einzufügen, müssen wir auf das Symbol Bild einfügen klicken. Dadurch wird das IMCE-Dateimanager-Menü aufgerufen. Wenn Sie auf das Upload-Symbol klicken, öffnet sich ein Fenster, in dem Sie die gewünschten Dateien zum Hochladen auswählen können. Wenn der Upload abgeschlossen ist, sollte die hochgeladene Datei im CKEditor angezeigt werden. Wir klicken auf die Datei und klicken auf das Symbol "Link einfügen", wodurch sich erneut der IMCE-Dateimanager öffnet.
     
  5. Befolgen Sie das oben beschriebene Upload-Verfahren, um die zu verknüpfende Datei auszuwählen. Schließlich müssen wir class="colorbox" direkt vor dem href-Tag im HTML-Code hinzufügen (in der Abbildung oben gelb hervorgehoben), der durch Klicken auf das Quellcode-Symbol (in der Abbildung oben blau hervorgehoben) angezeigt werden kann.
    Colorbox Inline in Aktion
    Colorbox Inline in Aktion

Verwenden von Colorbox Load

Das Colorbox Load Modul benötigt das NG Lightbox Modul als Abhängigkeit. Dieses kann jede Art von Inhalt, Knoten, Formular usw. in ein Colorbox-Modul laden. Die Einrichtung dieses Moduls ist recht schnell und einfach. Man muss lediglich zu Konfiguration/Medien/NG Lightbox gehen. Dadurch öffnet sich ein Fenster, in dem Sie den Pfad der gewünschten Entitäten einfügen können, z. B. /user/node 7, und auf "Speichern" klicken. Wenn nun auf den Knoten 7 zugegriffen wird, sollte er sich in Colorbox öffnen, anstatt in einem neuen Tab.

Elegante Animationen verbessern definitiv die Benutzerfreundlichkeit. Benutzer werden weniger wahrscheinlich verwirrt, wenn die Inhalte zu ähnlich sind. Um durch Bilder zu scrollen, ist eine Colorbox-Galerie viel besser, da ein Benutzer das aktuelle Fenster nicht verlassen muss, um das nächste Bild zu laden, was mit den Navigationspfeilen möglich ist.

Zusätzliche Informationen über Bilder können angezeigt werden, indem Bilder mit der Informationsdatei verknüpft werden. Der Komfortfaktor wird durch die Verwendung des Colorbox-Moduls definitiv erhöht.

TIPP: Das Leeren des Caches löst viele Probleme.

Integrieren von Colorbox in Drupal Views

In einigen Fällen möchten Sie möglicherweise die Bilder Ihres Artikels mit einem bestimmten Inhaltstyp auflisten. Dies ist nur mit Hilfe von Views möglich. Hier erfahren Sie, wie Sie das Colorbox-Modul in Views integrieren können.

  1. Gehen Sie zu Struktur > Views > Neue View hinzufügen
  2. Wählen Sie den Inhaltstyp aus. Hier wähle ich die Basisseite. Wählen Sie aus, ob Sie Ihren Block oder Ihre Seite als View ausgeben möchten, oder Sie können je nach Bedarf beides auswählen.
  3. Fügen Sie das Feld für das Bild hinzu. Und konfigurieren Sie es dann (das Feld), indem Sie darauf klicken.
  4. Dadurch öffnet sich ein Fenster wie in der Abbildung unten. Admin-Oberfläche mit sechs Feldern
  5. Aktualisieren Sie den "Formatierer" auf "Colorbox" und fügen Sie den Bildstil nach Ihrer Wahl hinzu.
  6. Klicken Sie auf "Speichern" und Ihre Colorbox-Galerie ist fertig.

Abonnieren

Ready to start your digital transformation journey with us?

Verwandte Blogs

Zurück von der DrupalCon Atlanta 2025: Ein Meilenstein für OpenSense Labs

DrupalCon Atlanta 2025 OpenSense Labs

„Fit. Schnell. Für die Ewigkeit gebaut.“ Das war nicht nur ein Slogan, sondern die Denkweise, mit der wir zur DrupalCon…

Erklärbare KI-Tools: SHAPs Stärke in der KI

Explainable AI tools Explainable AI And SHAP OpenSense Labs

Wissen Sie, was erklärbare KI-Tools sind? Erklärbare KI-Tools sind Programme, die zeigen, wie eine KI ihre Entscheidungen…

KI-Chatbots: Präzision und Persönlichkeit in Perfektion

Creating AI Chatbot OpenSense Labs

In der Welt der künstlichen Intelligenz ist die Entwicklung eines KI-Chatbots, der nicht nur akkurate Informationen liefert…