PHP WordPress 6.5+ Lightbox Gutenberg

[truetone]

Hi Leute,

ich habe mehrere WordPress Seiten am laufen. Seit Version 6.5 kann man im Gutenberg Editor bei Bildern eine lightbox aktivieren (Bild anklicken > auf die Büroklammer > Vollbild bei klick). Das sieht schick aus und funktioniert wunderbar.

Wie kann ich auf diese Lightbox im Code zugreifen? Ich habe ein kleines Plugin geschrieben und möchte dort auch das ein oder andere Bild so schick öffnen lassen aber finde im Netz einfach nichts dazu.

Hat da jemand einen Tipp für mich?
Vielleicht suche ich auch nur falsch?

Ich möchte KEIN extra Plugin dafür, das habe ich nämlich bereits und will dadurch jetzt Code reduzieren und alles einheitlich machen, da das Plugin anders aussieht und ich quasi jetzt 2 verschiedene habe 😂

Vielen Dank

 

[MrStools]

Probier es mal mit https://github.com/search?q=repo:WordPress/gutenberg Lightbox&type=code

 

[Miximus]

Ich möchte KEIN extra Plugin dafür

Dann bist du bei diesem Wordpress Zeug falsch.

 

[truetone]

Probier es mal mit https://github.com/search?q=repo:WordPress/gutenberg Lightbox&type=code

so wirklich habe ich es noch nicht hin bekommen

Dann bist du bei diesem Wordpress Zeug falsch.

Weil?
Hast du den Satz danach auch gelesen? Ich möchte das vorhandene loswerden, um ein einheitliches Aussehen zu erhalten... Dein Beitrag bringt mich leider 0 weiter. Hast du vielleicht eine Idee?

 

[MaverickM]

Dann bist du bei diesem Wordpress Zeug falsch.

Son Quatsch. Das ist nichts, was sich nich mit ein wenig PHP im Theme selber lösen lässt. Je nachdem wie das gelöst wurde, reicht vielleicht sogar schon einfaches HTML aus, sprich eine Anpassung der Ausgabe des Quelltexts, der dann die gleichen Funktionen im JavaScript triggert.

@truetone
Sieh dir einfach mal den ausgegebenen Quelltext an. Ich gehe mal davon aus, dass die Lightbox wie bei fast allen anderen Lightbox Lösungen auch über ein Attribut getriggert wird. Du musst dann im Theme nur noch irgendwo einbauen, dass dieses automatisch immer hinzugefügt wird, an den Stellen, wo Du das haben willst.

Nachtrag: Genau wie gedacht, der Aufruf geschieht via JavaScript und einem Attribut, das an das img Tag angehängt wird, siehe die Gutenberg Dokumentation.

Nachtrag 2: Vergiss nicht, dass Du Änderungen am Quellcode des Themes am besten in ein Child Theme packst, sonst sind die Änderungen weg, sobald das Theme vom Autor (Sofern es nicht dein eigenes ist) aktualisiert wird.

 

[truetone]

@truetone
Sieh dir einfach mal den ausgegebenen Quelltext an. Ich gehe mal davon aus, dass die Lightbox wie bei fast allen anderen Lightbox Lösungen auch über ein Attribut getriggert wird. Du musst dann im Theme nur noch irgendwo einbauen, dass dieses automatisch immer hinzugefügt wird, an den Stellen, wo Du das haben willst.

Das habe ich bereits. Selbst wenn ich einen Beitrag erstelle mit dem Code vom Gutenberg und kopiere mit den HTML-Code davon und füge ihn bei mir ein (egal ob in meinem Plugin oder in einem anderen Beitrag mit dem Block "HTML") ist die Funktion nicht am Start.

<figure data-wp-context="{&quot;imageId&quot;:&quot;67esa5f722e70&quot;}" data-wp-interactive="core/image" class="alignright size-medium wp-lightbox-container"><img fetchpriority="high" decoding="async" width="280" height="300" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="https://127.0.0.1/wp-content/uploads/2025/03/Schaefers-Brandt-280x300.jpg" alt="" class="wp-image-495" srcset="https://127.0.0.1/wp-content/uploads/2025/03/Schaefers-Brandt-280x300.jpg 280w, https://127.0.0.1/wp-content/uploads/2025/03/Schaefers-Brandt.jpg 560w" sizes="(max-width: 280px) 100vw, 280px"><button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Bild vergrößern" data-wp-init="callbacks.initTriggerButton" data-wp-on-async--click="actions.showLightbox" data-wp-style--right="state.imageButtonRight" data-wp-style--top="state.imageButtonTop" style="right: 16px; top: 16px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
        <path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
    </svg>
</button><figcaption class="wp-element-caption">Test</figcaption></figure>

 

[MaverickM]

@truetone
Werden denn die entsprechenden .js Bibliotheken auf der Seite geladen?

 

[truetone]

Weiß nicht 100% in welcher Datei es steht, im Code finde ich nie etwas mit Lightbox (auch da wo es geht). Mit folgendem Code habe ich es aber erzwungen

function enable_gutenberg_lightbox()
{
    add_filter('wp_image_lightbox_enabled', '__return_true');
}
add_action('after_setup_theme', 'enable_gutenberg_lightbox');

Brachte bisher leider keine Änderung. Selbst auf der selben Seite, wenn ich das 1 zu 1 dupliziere geht das nicht. Also irgendwo wird noch etwas registriert/gespeichert oder so was ich noch nicht gefunden habe

Habe auch schon das gefunden aber das geht auch nicht

<a href="'.$pics.'" data-wp-lightbox="true">
    <img src="'.$pics.'" style="max-width: 100%; cursor: pointer;">
</a>

Danke für deine Hilfe!

Ergänzung (27. März 2025)

Wenn ich den Quellcode von einem Bild kopiere und direkt darunter auf der selben Seite einfüge, gibt es folgenden Error. Beide gehen dann nicht mehr.

 

[MaverickM]

@truetone
Ich würde mal einfach vergleichen, welche Dateien auf einer Seite mit funktionierender Lightbox geladen werden, die auf einer Seite ohne Lightbox evtl. fehlen. In den Firefox Dev-Tools ist die Stilbearbeitung und die Laufzeitanalyse dafür recht hilfreich.

Funktioniert es denn, wenn Du bspw. den HTML-Output auf einer Seite eines Bildes mit funktionierender Lightbox an eine andere Stelle kopierst? Also mit allen Attributen etc.

Ansonsten müsste man mal dem TypeError nachgehen, die Links in den Klammern sollten dich ja zur entsprechenden Code-Stelle führen.