WP Galerien: Responsive Lightbox & Gallery

Bei der Suche nach einem Ersatz für die Jetpack Galerien wurde zuerst Justified Gallery getestet – soweit prima. Aber: Bei Einzelbildern jedoch muss zuviel „hinterherprogrammiert“ werden, um diese ebenfalls in einem guten Design anzeigbar zu machen.

Darum neuer Test mit dem Plugin „Responsive Lightbox & Gallery“ – dies unterstützt sowohl Galerien als auch Einzelbildansichten und lässte sich recht einfach per CSS anpassen.

Aber egal, welche Galerie genutzt wird – bei älteren Projekten muss wahrscheinlich immer eine eigene Attachmentdatei für die vorher bereits eingefügten und mit einer Anhangseite verknüpften Bilder angelegt werden (und dann dem neuen Galeriedesign angepasst werden). Sonst erscheinen die alten Bilder, die mit „Anhang“ verknüpft waren, beim Anklicken immer nur als simple Bildanzeige, also ungestylt direkt im Browser. Geht auch, sieht aber doof aus. Dazu mehr weiter unten.

Installation

• Plugin installieren, dann Responsive Lightbox > Einstellungen
  https://de.wordpress.org/plugins/responsive-lightbox/
• Auswahl GLightbox, „Auch für Einzelbilder aktivieren“ anhaken
• Default Gallery: Basis Gitter
• Unter dem Tab „Lightboxen“ noch GLightbox nach Wunsch anpassen
• CSS Optimierung: siehe ganz unten hier auf der Seite

a) Test Galerie:

b) Test: Anhangseite

c) Noch ein Test

 

Einzelbilder: Standard für Bild-CSS-Klasse definieren

Damit auch Einzelbilder zu den Galerien passen (Aussehen, Hover-Effekt usw.), muss für Einzelbilder eine eigene CSS Klasse angelegt werden. Um diese aber nicht jedesmal beim Einfügen eines Einzelbildes miteingeben zu müssen, wird hierfür eine Standard-CSS-Klasse wie folgt definiert:

Individuelle CSS Klasse anlegen (Design > Anpassen > CSS) …

.standard-bild{
border: 2px solid #FFFFFF;
border-radius:6px;
transition: opacity .2s linear;
brightness(0.9)
transition:ease-in-out 2000ms;
&:hover { opacity:0.8; }
}

… und in der functions.php zufügen

function my_default_image_class( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
$classes = 'standard-bild'; // << NUR das hier ggf. anpassen, je nach Name der CSS Klasse

// Prüfen, ob die Klasse bereits vorhanden ist, um Duplikate zu vermeiden
if ( preg_match('/class=".*?"/', $html ) ) {
$html = preg_replace('/class="([^"]*)"/', 'class="$1 ' . $classes . '"', $html );
} else {
$html = preg_replace('/<img/', '<img class="' . $classes . '"', $html );
}
return $html;
}
add_filter( 'image_send_to_editor', 'my_default_image_class', 10, 8 );

Jetzt sollte (spätestens nach dem nächsten Cache-Refresh oder Logout/Login) beim Einfügen eines neuen Einzelbildes automatisch die CSS Klaae voreingestellt sein. Sie kann natürlich im Einzelfall auch entfernt oder mit einer anderen Klasse überschrieben werden:

Einzelbilder: Was passiert mit den alten „Anhangseiten“?

Solange Jetpack als Galerie genutzt wurde, war es praktisch, bei Einzelbildern die Option „Anhangseite“ zu nutzen, da dann auch einzelne Bilder bei Großansicht im selben Design wie die Galerie angezeigt wurden.

Ohne Jetpack fallen diese Bilder dann aber wieder zurück auf die (meist wenig hübsche) Standard- Anhangseite. Außerdem sind WordPress-Anhangseiten generell nicht unproblematisch. Also weg damit bzw. wieder zurückstellen auf „Medienseite“. Aber bitte so, dass nicht tausende von Bilder nachbearbeitet werden müssen … :-)

Beste Option

Alte Anhangseiten umstellen:

• Herausfinden, welche Bilder noch als Anhangseiten verlinkt sind
  https://antiblabla.de/test-list_all_images/ (Snippet dafür anlegen, siehe dort)
• Datenbank sichern, dann
  Plugin Better Search and Replace installieren
• Suchen nach https://antiblabla.de/
  Geben Sie hier den Wert ein, auf den Ihre Bilder derzeit verlinken (z. B. die URL der Anhangseite href="https://ihre-domain.de oder den Pfad zu Ihrer Anhangseite).
• Ersetzen durch https://antiblabla.de/antiblabla.de/wp-content/uploads
  Hier tragen Sie den Wert ein, der auf das Bild selbst verlinkt (z. B. den direkten Dateipfad oder Ihre Medien-URL).
• Tabellen: post und postmeta
• Testlauf
• Wenn ok, dann realer Lauf
• Danach nochmal die Imageseite aufrufen – hier dürfte jetzt keine Anhangverlinkungen mehr enthalten sein.
  https://antiblabla.de/test-list_all_images/

Standardeinstellungen für die Zukunft ändern:

• wp-admin/options.php > image_default_link_type > file

Getestet 1 – generell von „Anhang“ auf „Mediendatei“ umschalten

Hierfür gibt es mehrere Optionen. ABER:

Alle diese Optionen führen (korrekterweise) dazu, dass die Bilder, die auf „Anhangseite“ eingestellt sind (waren), dann lediglich das Bild AN SICH, also ohne Design „drumrum“, anzeigen. Das ist schon eine kleine Verbesserung gegenüber der Ansicht auf einer (häßlichen) Standard-Anhangseite, aber noch nicht 100% optiomal. Eigentlich sollte ja auch für die Bilder, die vorher auf „Anhang“ eingestellt waren, dieselbe schöne Seite wie für die neuen Galerie-Bilder erscheinen – egal, ob diese jetzt immer auf „Mediendatei“ oder eben früher auf „Anhangseite“ eingestellt waren. Darum ist das nur eine schnelle Übergangslösung.

a) via /wp-admins/options.php:

• nach wp_attachment_pages_enabled suchen und von 1 auf 0 stellen
• nach image_default_link_type suche und von post auf file stellen

b) Plugin Attachment Pages Redirect – einfach installieren, fertig,

c) Oder mit Code-Snippet (entweder am Ende der functions.php oder einfach in den Snippets einfügen und aktivieren)

// Disable attachment pages - entweder als Snippet oder direkt in der functions.php am Ende verwenden
function myredirect_attachment_page() {
if ( is_attachment() ) {
global $post;
if ( $post && $post->post_parent ) {
wp_redirect( esc_url( get_permalink( $post->post_parent ) ), 301 );
exit;
} else {
wp_redirect( esc_url( home_url( '/' ) ), 301 );
exit;
}
}
}
add_action( 'template_redirect', 'myredirect_attachment_page' );

Möglichkeit 2 – Datenbank anpassen

Die WordPress-Datenbankeinträge ist hinterlegt, ob eine Datei als Anhang oder Mediendatei aufgerufen wird. Also können diese Einträge „in einem Rutsch“ per Suchen & Ersetzen angepasst werden. Der Test ergab jedoch, dass selbst dann nur direkt auf die Mediendatei verlinkt wird, also dsa Design der Galerie-Einzelseite weiterhin ingoniert wird,

• Plugin Better Search Replace installieren
• Werkzeuge > Better Search Replace > Suchen nach: ?attachment_id= (oder alternativ den vollständigen Pfad der Anhang-Seite)
• Ersetzen durch: URL der direkten Mediendatei (zwingend spezifisch für die Domain, z.B. https://antiblabla.de)
• Tabellen auswählen: in der Regel wp_posts und eventuell wp_postmeta
• Testmodus starten (oder Deaktivieren und echten Run starten)

Ergebnis war nur leider, dass auch hiernach – genau wie bei Option 1 – die Bilder nicht auf die schick gestylte Galerieseite, sondern eben „nur als Mediendatei“ angezeigt werden.

Möglichkeit 3 – Individuelle Anhangseite

Wenn es also keine Option gibt, bei alten Projekten mit Hunderten von Bildern, diese direkt auf die neue, gestylte Galerieseite umzulenken, dann muss doch eine „individuelle Anhangseite“ her. Anleitungen:

• https://qodeinteractive.com/magazine/create-wordpress-single-post-templates/
• Googel / ChatGPT Antwort: „wie gestalte ich eine individuelle anhangseite für bilder in wordpress“

Kurzfassung:

• FTP öffnen, im Themeordner die single.php in attachment.php oder image.php umbenennen und anpassen.
• Tipp: Cache-Tool nutzen, um beim Erstellen Anzeigefehler durch Cacheing zu vermeiden.
• Beim Anpassen:
  • $attachments = get_posts(...): Hiermit werden die Bilddaten abgerufen.
  • wp_get_attachment_image(): Gibt das Bild selbst aus.
  • echo get_post_meta(): Zeigt Bildinformationen wie Größe, Aufnahmedatum oder Kamera-EXIF-Daten an. [Quellen: 1, 2, 3]

Responsive Lightbox & Gallery: CSS Optimierung (Beispiel)

(Design > Anpassen > Zusätzl. CSS) – hier gleich mit einigen Erweiterungen für die Standard-Bildanzeige:

/* =========================== */
/* Responsive Lightbox Gallery */

.rl-gallery-item:hover{
/* opacity:0.8 !important; */
/* filter: brightness(0.9); */
border: 2px solid #FFFFFF;
border-radius:6px;
transition: opacity .2s linear;
brightness(0.9)
transition:ease-in-out 2000ms;
&:hover {
opacity:0.8;
border: 1px solid #a1a1a1; }
}

.goverlay{
background:#F2F4FB !important;
}
.glightbox-clean .gslide-media{
box-shadow: none !important;
}

/* Einzel Bild CSS Klassen */
.standard-bild{
border: 2px solid #e1e1e1;
border-radius:6px;
transition: opacity .2s linear;
brightness(0.9)
transition:ease-in-out 2000ms;
&:hover {
opacity:0.8;
border: 1px solid #a1a1a1; }
}
/* Bildunterschriften */
.wp-caption-text {
font-size: 80%;
color: #808080;
margin-bottom:20px !important;
}
.wp-caption-text::before{
content: "[ "; }
.wp-caption-text::after{
content: " ]"; }

/* =========================== */