Lightbox für Gutenberg

Lightbox für den Gutenberg-Editor

Veröffentlicht am 20. September 2022
Kategorie:

Ich habe das Tutorial auf www.OXYGEN4FUN.supadezign.com gefunden, denn dies ist die beste Möglichkeit, in Gutenberg eine Lightbox zu aktivieren, ohne extra ein Plugin zu installieren.

Die Anleitung ist gemacht für jene, welche das Plugin Advanced Script haben, dieses ist aber nicht kostenlos und auch nur für jene, die nicht auf die DSGVO achten müssen.

Da ich aber aus Österreich bin, brauche ich eine bessere Lösung. Matthias Altmann hat mir dabei geholfen den Code zu ändern, damit man Lokal die Datei laden kann, anstelle des CDN. Und der weitere Vorteil ist, dass man den Code nur noch 1:1 dann in den CodeSnippet (kostenloses Plugin) kopieren muss.
Hier ist auch noch darauf zu achten, die Dateien per FTP hochzuladen, oder mit eine File-Manager Plugin. Bei mir hat es nicht gut funktioniert und habe es dann per FTP erledigt.

Hier ist die Anleitung

1) CodeSnippet installieren

https://codesnippets.pro/

2) Code herunterladen

https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css

https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js

3) Am Server speichern

Ich habe es z.B unter "/wp-content/uploads/GLightbox" gespeichert. Die URL im Code ist dann bitte noch zu ändern.

Da ich WorpPress 6.0.2 zum jetzigen Zeitpunkt verwende, musste die Klasse im Code angepasst werden, da diese sich durch ein Update von WordPress geändert hat. Hierbei hat Matthias auch wieder sehr gute Arbeit geleistet!

4) Code in CodeSnippet aktivieren

Die URL für die JS und CSS Datei muss noch auf deine URL geändert werden. Dann bist du fertig,

function GLightbox_init() {
?>
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"/>
<script>
var lightbox = GLightbox({ selector: '.wp-block-gallery .wp-block-image a' });
</script>
<?php
}
add_action('wp_footer','GLightbox_init');

5) Galerie in Gutenberg erstellen

Hier muss IMMER darauf geachtet werden, dass die Bilder zu Mediendatei verweisen, denn es ist standardgemäß auf KEINE eingestellt.

Hier ist der ursprüngliche Beitrag von OXYGEN4FUN:

https://oxygen4fun.supadezign.com/tutorials/how-to-add-a-lightbox-to-the-gutenberg-gallery-block/?fbclid=IwAR0QhC4skBQbGxaNdszK0mV2GamF8eMTSRg6rmJqXPpcQwcPRhQbOVHIx88

Hier finden Sie weitere Beiträge

Ausblenden
pencilmagic-wandflagbookcartphone-handsetcodecrossmenuarrow-uparrow-downquestion-circle
  linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram