Wie man eine Webgalerie in Textpattern selbst programmiert

30. Januar 2008

Bei meinem letzten Projekt war unter anderem ein einfache Galerie mit Vorschaubildern und einer Umblätterfunktion zu integrieren.

“Kein Problem”, dachte ich vorerst: Zu Textpattern gibt’s eine unüberschaubare Anzahl von Galerie-Plugins, die sich auf die ein oder andere Weise mit der Anzeige einer Fotosammlung beschäftigen.

Vielleicht sind es einfach schon zu viele, jedenfalls empfand ich die Qual der Wahl als so stark, dass ich lieber zu einer selbstgestrickten Lösung aus PHP und drei “generischen” Plugins griff, um das gewünschte Markup zu erzeugen.

Das Ziel ist diese klassische Anordnung:

Bildergalerie auf Website: Beispiel

Man nehme:

  • upm_image, ein Plugin, das Tags für jedes Details eines von Textpattern verwalteten Bildes beinhaltet.
  • wet_for_each_image, mit dem aus dem gesamten Vorrat an Bildern die gewünschten nach recht vielfältigen Kriterien ausgewählt werden können.
  • Ein paar kurze Schnippsel PHP.

Die Fotogalerien sind einfache Artikel, die mit diesem Baustein dargestellt werden:

<div class ="content-col-1">
<txp:output_form form="gallery-index" />
</div>

<div class="content-col-2">
<txp:output_form form="gallery-image" />
</div>

Die Zuordnung zwischen dem Baustein und dem Galerieartikel funktioniert am einfachsten über die Erweiterte Einstellung “Baustein überschreiben”.

Als nächsten Schritt benötigst du eine Konvention, die eine Reihe von Bildern zu dem einen Set zusammenfasst, das zusammen in der Galerie dargestellt wird. Ich habe mich für den Einsatz einer für alle zusammengehörigen Bilder gemeinsamen Kategorie entschieden. So können innerhalb einer Website beliebig viele Artikel mit unterschiedlichen Fotosets dargestellt werden. Die Einschränkung, die sich daraus ergibt: Ein Bild kann immer nur Teil einer einzigen Galerie sein.

Auswahl der Vorschaubilder

Mit dieser Voraussetzung kann der im Artikelbaustein angeführte Baustein gallery-index gebaut werden, der im obigen Screenshot als Element mit der Nummer 1 gekennzeichnet ist.

Dabei wird wet_for_each_image verwendet, um die Bilder nach Kategorie zu filtern, während die Darstellung eines einzelnen Vorschaubildes von upm_image überlassen wird. Die ganze Sammlung wird als ungeordnete Liste ausgezeichnet:

<txp:php>global $fotos; $fotos = array();</txp:php>
<txp:asy_wondertag>
<txp:wet_for_each_image category="<txp:category1 />" 
        break="li" wraptag="ul" thumb="1" class="gallery-index" 
        sort="name asc">
    <txp:upm_image form="gallery-item" image_id="{id}" />
</txp:wet_for_each_image>
</txp:asy_wondertag>

Zwei Besonderheiten erkennt man jetzt schon:

  1. Ein kleines Stück PHP, mit dem ein leeres Array $fotos angelegt wird, das später die IDs aller Fotos aufnehmen wird.
  2. Die Versorgung des category-Attributes for wet_for_each_image erfolgt aus der Kategorie 1 des Artikels. Mit asy_wondertag vermeide ich eine recht undurchsichtige Herumprogrammiererei, die das auch erledigen würde. Jeder Galerie-Artikel wird also einer Artikel-Kategorie zugeordnet, die den selben Namen wie die zugehörige Bildkategorie trägt.

Das Markup eines einzelnen Vorschaubildes erzeugt upm_image gemäß der Formulierung im Bausteins gallery-item:

<a href="?foto=<txp:upm_img_id />#foto" title="<txp:upm_img_alt escape="html" />">
<img src="<txp:upm_img_thumb_url />"
  width="<txp:upm_img_thumb_width />"
  height="<txp:upm_img_thumb_height />"
  alt="<txp:upm_img_alt escape="html" />"  />
</a>
<txp:php>
global $fotos; $fotos[]=upm_img_id();
</txp:php>

Hier werden – der Reihe nach – folgende HTML-Elemente generiert:

  1. ein Link auf die Artikelseite selbst, ergänzt um einen URL-Parameter ?foto und der internen Bild-ID-Nummer sowie einem Sprungziel #foto, mit dem das Browserfenster bei der Auswahl eines Fotos gleich an die richtige Stelle gescrollt wird.
  2. ein img-Element mit allerlei nützlichen Attributen (src, width, height, alt).
  3. wieder ein kleines Stück PHP, mit dem die Nummer des gerade dargestellten Thumbnail an das Array $fotos angefügt wird. $fotos enthält also nach dem vollständigen Aufbau der ungeordneten Thumbnail-Liste die ID-Nummern aller Bilder in der dargestellten Reihenfolge.

Das Bild in Originalgröße

Der Klick auf ein Vorschaubild befördert uns zu einer Adresse wie dieser:

http://treppenlift.at/plattform-treppenlift/?foto=42#foto

Hier empfängt nun ein weiterer im Artikel eingebauter Baustein, gallery-image, die via URL übergebene Nummer und stellt das Bild in voller Größe dar (im Screenshot die Nummer 2):

<a id="foto"></a>
<txp:php>
global $fotos, $foto;
$foto = gps('foto');
if(empty($foto)) $foto = $fotos[0];
assert_int($foto);
</txp:php>
<div class="gallery-image">
<txp:php>
global $fotos, $foto;
if(in_array($foto, $fotos)) {
echo image(array('id'=>$foto)); 
} else {
txp_die('Dieses Bild ist nicht Teil dieser Galerie.', 404);
}
</txp:php>

Dieser Baustein prüft zuerst, ob der URL-Parameter überhaupt verwendet wurde, eine Zahl ist (assert_int) und ein Bild mit der gewählten Nummer Teil der Galerie ist (in_array($foto, $fotos)), um pöhsen Scriptkiddiez keine Hintertüren zu öffnen und nötigenfalls den Besucher auf die Seite für den Fehler 404 (“Seite nicht gefunden”) weiter zu bitten.

Sind diese Voraussetzungen erfüllt, wird das Bild ausgegeben. Das erledigt im wesentlichen der Tag <txp:image />, der aber in diesem Fall direkt aus PHP aufgerufen wird (echo image(array('id'=>$foto));).

Von Bild zu Bild blättern

Bleibt nur noch der Teil mit der Nummer 3 zu realisieren, der die Pfeile zum sequentiellen Blättern in der Galerie antreibt.

<txp:php>
global $fotos, $foto;
$here = array_search($foto,$fotos);

$prev = $fotos[$here-1];
$next = $fotos[$here+1];

if(!empty($prev)) {
echo "<a id=\"gallery-prev\" href=\"?foto=$prev#foto\">Zurück</a>";
} else {
echo "<span id=\"gallery-prev\">Zurück</span>";
}

if(!empty($next)) {
echo "<a id=\"gallery-next\" href=\"?foto=$next#foto\">Vorwärts</a>";
} else {
echo "<span id=\"gallery-next\">Vorwärts</span>";
}
</txp:php>

Dieser Teil sucht aus dem Array $fotos das links bzw. rechts von aktuellen liegende Bild und erzeugt zwei weitere Links mit der passenden Nummer als URL-Parameter ?foto.

Eine andere Galerie-Lösung für Textpattern, die ebenfalls mit den drei Plugins sowie mit Lightbox arbeitet, habe ich früher schon mal beschrieben.

Kommentare

  1. Dieser Artikel kommt genau richtig.
    Ich habe die Aufgabe bekommen, für ein Kunden eine Galerie zu machen, das so ähnlich aufgebaut ist, wie diese hier.
    Bedanke mich und werde auch hier schreiben, wenn ich ein Fehler oder so finde ;)