WP-Gallery-Feature and Lightbox2

Getestete WPMU-Versionen:

• 2.7.1. (Anmerkungen siehe Abschnitt)
• 2.6.5. (für diese Version wurde die Anleitung inital erstellt)

In dieser Anleitung wird erklärt, wie man das Gallery-Feature ohne Attachment-Seite zusammen mit dem Lightbox2-Plugin mit Wordpress-mu nutzen kann.

Das Problem

Über das  Gallery-Tag (im Post über [Gallery] einzufügen) lassen sich zurzeit bei Wordpress-mu automatisch generierte Bildergalerien in einem Post erzeugen. So weit so gut.

Was wir allerdings nicht gut fanden: Die Bilder wurden über den Thumbnail-Link auf einer Attachment-Seite geöffnet (dort in einer mittleren Größe). Mit einem zweiten Klick auf das Foto öffnete sich dann das ersehnte Raw-File (Bild in Originalgröße). Wir wollten auf die Attachment-Seite verzichten und auf dem Thumbnail einen direkten Link zum Raw-File erzeugen.

Soweit wäre diese Änderung noch keiner Anleitung würdig, allerdings nutzen wir für die Bildanzeige das Plugin  Lightbox2.

Änderungen an der media.php

Der nachfolgende, vorgestellte Code kann auch direkt als gesamte  media.php geladen werden.

Ohne Attachment-Seite

Um nur die Attachment-Seite zu deaktivieren und direkt auf das Raw-File zu verlinken, bedarf es nur einer minimalen Änderung. Dazu öffnen wir die Datei wp-includes/media.php und gehen in die Funktion gallery_shortcode($attr). Dort übergeben wir an die Funktion wp_get_attachment_link(...) als dritten Parameter false statt true.

<?php
...
foreach ( $attachments as $id =&gt; $attachment ) { 
  // original code line:
  // $link = wp_get_attachment_link( $id, $size, true );
  // changed code line:
  $link = wp_get_attachment_link( $id, $size, false );
   ...
}
...
?>

Ohne Attachment-Seite und mit Lightbox

Leider genügt diese Änderung noch nicht, um mit Lightbox zu funktionieren. Lightbox untersucht in der Regel jeden Link zu einem Bild und erweitert ein Lightbox-spezifisches REL-Tag, welches später mit Hilfe des Javascripts das Bild öffnet. Aus mir unerklärlichen Gründen funktioniert dies bei dem Gallery-Link leider nicht. Um dieses Problem zu beheben, ändern wir den gerade vorgestellten Code-Snippet wie folgt um:

<?php
...
foreach ( $attachments as $id =&gt; $attachment ) { 
  //
  // Der folgende Abschnitt wurde bearbeitet,
  // der ersetzte Code war:
  //
  //$link = wp_get_attachment_link( $id, $size, true );
  //
  $img_scr = wp_get_attachment_image( $id, $size, false );
  $img_path = wp_get_attachment_image_src( $id, "full" );
  $link = "<a href=\"" . $img_path[0] . "\" rel=\"lightbox[" . $post->ID . 
          "]\">" . $img_scr . "</a>";
  // Ende der Aenderungen
  //
  ...
}
...
?>

Betrachten wir die Änderungen. Die Funktion wp_get_attachment_image($id, $size, false) erzeugt die Grafikreferenz für das Thumbnail-Bild. Dazu später mehr. Es muss eine Beziehung zum Lightbox-Plugin hergestellt werden. Dazu muss der Verweis erweitert werden. Über wp_get_attachment_image_src($id, "full") holen wir uns die Quelle zu dem gewünschten Raw-File des Attachments ($img_path ist ein Array, die Image-URL befindet sich auf Index 0). Nun bauen wir das gesamte Konstrukt für die Variable $link zusammen, so wie es Lightbox2 benötigt.

Soweit sollten die Änderungen funktionieren.

Alternativen Bildtext erweitern

Ein Detail hat leider nicht funktioniert. Die Methode wp_get_attachment_image($attachment, $id, $size, false) befindet sich ebenfalls in der media.php und lässt den ALT-Tag, also die alternative Bildbeschreibung leer, warum ist mir unklar. Leider fehlt dadurch auch die Bildbeschreibung im Lightbox2-Plugin. Um den Original-Code nicht massiv zu ändern, habe ich die Methode kopiert, umbenannt und ein wenig erweitert. So sieht die hinzugefügte Funktion auf:

<?php
/*
 * Hinzugefuegt, um in der Gallerie den ALT-Tag mit der Beschreibung zu fuellen
 */
function wp_get_attachment_image_with_description($attachment, 
                           $attachment_id, $size = 'thumbnail', $icon = false) {
  $html = '';
  $image = wp_get_attachment_image_src($attachment_id, $size, $icon);
  if ( $image ) {
    list($src, $width, $height) = $image;
    $hwstring = image_hwstring($width, $height);
    if ( is_array($size) ) $size = join('x', $size);
    $html = '<img src="'.attribute_escape($src).'" '.$hwstring.'class="attachment-'.
             attribute_escape($size).'" alt="' . $attachment->post_content . '" />';
  }
  return $html;
}
?>

Was ist hier passiert? Ganz einfach - anstatt das ALT-Tag leer zu lassen, lesen wir aus dem Attachment-Objekt die Beschreibung des Bildes aus. Ein Attachment wird als Post behandelt und die Beschreibung ist ähnlich wie bei einem echten Post das Content-Feld.

Zum Schluss muss nur noch der Funktionsaufruf in der gallery_shortcode($attr)-Funktion geändert werden, dass unsere neue wp_get_attachment_image_with_description(...)-Funktion aufgerufen wird. Danach sollte der Code wie folgt aussehen:

<?php
...
foreach ( $attachments as $id => $attachment ) { 
  //  
  // Der folgende Abschnitt wurde bearbeitet,
  // der ersetzte Code war:
  //  
  //$link = wp_get_attachment_link($id, $size, true);
  //  
  $img_scr = wp_get_attachment_image_with_description( $attachment, $id, $size, false );
  $img_path = wp_get_attachment_image_src( $id, "full" );
  $link = "<a href=\"" . $img_path[0] . "\" rel=\"lightbox[" . $post->ID . "]\">" . $img_scr . "</a>";
  // Ende der Aenderungen
  //
  }
...
?>

Fertig!

Versionsinfo 2.7.1

Bei der neuen 2.7er Version von WPMU klappte der Hack, wie hier beschrieben, ebenfalls (ohne Änderung der hier aufgeführten Methoden, Parametern, etc.). Allerdings muss in der Methode wp-includes/media.php die Zeile 663 ausgewechselt werden (wie in Abschnitt beschrieben ist):

<?php
...
foreach ( $attachments as $id => $attachment ) {
   // original code line:
   // $link = isset($attr['link']) && 'file' == $attr['link'] ?
   //   wp_get_attachment_link($id, $size, false, false) : 
   //   wp_get_attachment_link($id, $size, true, false);
   $link = wp_get_attachment_link( $id, $size, false );
   ...
}
...
?>

Anmerkung

Ich kann nicht sagen, ob dies die einzige Lösung ist und somit kann es mit Sicherheit elegantere Lösungen geben! Bei uns funktioniert es so, aber etwas dirty ist es schon. Wenn jemand eine bessere Lösung hat, würde ich mich freuen, diese zu sehen.

Diskussionen sind herzlich willkommen und können in  diesem Post geführt werden.