Bildergalerie mit Textpattern, Lightbox und upm_image

6. August 2006

Bildergalerien1 mit Textpattern sind ein Thema, das je nach Ansprüchen die verschiedensten Lösungsansätze hervorbringt.

Meine Lösung erlaubt eine sehr individuelle Anordung der Thumbnails und beruht auf folgenden Grundlagen:

  • Ein Textpattern-Artikel pro Bilder-Set, daher unbegrenzt viele Sets.
  • Einige zig Bilder in einem Set (die Liste der Bildnummern darf 255 Zeichen lang werden, damit hängt die tatsächliche Grenze von den verwendeten Bildnummern ab).
  • Alle Bilder werden von Textpattern ohne zusätzliche Galerie-Software verwaltet.
  • Die Darstellung der Bilder erfolgt über Slimbox, einer Neu-Fassung des ursprünglichen Scripts Lightbox 2.0, weil es so sexy ausschaut, ohne Javascript oder Browser-Plugins auch noch was zu sehen ist und mir die Bedienung recht komfortabel scheint.
  • Eine Liste mit Thumbnails und zusätzlicher Bildinformation dient als Navigationseinstieg in die Galerie und wird von upm_image, einem Textpattern-Plugin, erstellt. Mein Motiv dafür ist: upm_image verwendet einen frei gestaltbaren Textpattern-Baustein zur Darstellung des Bildersets.

It’s showtime, folks!

Erster Schritt also: Bilder in Textpattern laden und mit vernünftigen Thumbnails, Bildunterschriften und Alternativtexten ergänzen.

Zweitens: Eine Artikel verfassen und die gerade hochgeladenen Bilder alle in einer komma-getrennten Liste als Artikelbilder eingeben. upm_img_popper hilft dabei sehr.

Vernissage

upm_article_image verwendet diese Liste von Bildnummern und gibt sie aus, in meinem Fall als eine ungeordnete Liste (ul) von Thumbnails:

<txp:upm_article_image wraptag="ul" break="li" 
form="bild" class="gallery" />

Dieses Tag kommt im Artikel einfach an die Stelle, an der die Thumbnails dargestellt werden sollen. Alternative für strukturierte Vorgehensweise bei mehrfachem Einsatz: Einen Artikelbaustein anlegen, der das Tag gleich an der richtigen Stelle integriert hat.

Der Ausstellungskatalog

Der oben genannte Baustein bild für upm_image erstellt die Einzelansicht eines Bildes in der Liste. Die HTML-Ausgabe von upm_image lässt sich über den Baustein ähnlich wie txp:article sehr flexibel anpassen. In diesem Fall wird das Thumbnail dargestellt, daneben landet die Bildunterschrift, die zum Bild eingegeben wurde:

<a rel="lightbox[dings]" href="<txp:upm_img_full_url />"
 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:upm_img_caption escape="no" />

Dazu werden Tags aus dem Funktionsumfang von upm_image verwendet, die Details des verwendeten Bildes ausgeben:

Tag Resultat
<txp:upm_img_full_url /> Die vollständige URL des Bildes
<txp:upm_img_alt escape="html" /> Das alt-Attribut des Thumbnails ist das selbe wie jenes des grossen Bildes
<txp:upm_img_thumb_url /> Die vollständige URL des Thumbnails
<txp:upm_img_thumb_width />, <txp:upm_img_thumb_height /> Die Abmessungen des Thumbnails
<txp:upm_img_caption escape="no" /> Die Bildunterschrift wird unverändert übernommen. HTML-Elemente können also zur Formatierung der Darstellung direkt bei der Bildunterschrift eingegeben werden.

Woher weiß Lightbox, dass hier was zu tun ist? Nun, über das Attribut rel sammelt Lightbox alle Links zu Bildern, die betroffen sind. Die (beliebig wählbare) Kennung in den eckigen Klammern gruppiert alle Bilder zu dem Set, in dem der Betrachter mit Lightbox blättern kann. In meine Fall sind alle Bilder eines Artikel natürlich in einem einzigen Set, eben [dings]. Das funktioniert in einer Einzelartikel-Ansicht. Für Artikellisten braucht man eine eindeutige Gruppierung pro Artikel, hier bietet sich die Artikel-ID an: <a rel="lightbox[<txp:article_id />]"...

Licht aus, Beamer an!

Lightbox 2.0 besteht aus einigen Javascript-Dateien und einer CSS-Datei. Das Originalscript von Lokesh Dhakar ist recht fett (ungefähr 90 kB), deswegen setze ich die Weightwatcher-Variante Litebox von Tyler Mulligan Slimbox von Christophe Beyls ein. Beide Alle drei funktionieren. Die Javascript-Dateien und das Stylesheet kommen auf den Webserver und werden ganz herkömmlich in die Seitenvorlage eingebunden (aber das ist Geschmackssache, genau so gut kann das Stylesheet auch von Textpattern verwaltet werden).

In der Seitenvorlage werden ein paar Zeilen am Beginn ergänzt:

<head>
[...]
<link rel="stylesheet" href="/style/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/slimbox.js"></script>
</head>
<body">
[...]

Bilderrahmen und Verglasungen

Was fehlt? Nun, etwas Styling für die ungeordnete Liste, die upm_article_image produziert, ist sicher nötig.

ul.gallery { 
  list-style: none; 
  padding: 0;
  margin: 0;
}

  ul.gallery li { 
    clear: both; 
    padding: 0; 
    margin: 0 0 2em 0;
  }

  ul.gallery li p { 
    padding: 0; 
    margin: 0;
  }

  ul.gallery li img { 
    float: left;
    margin: 0 1em 1em 0;
  }

Aber das war’s dann auch schon. Und nun: ***Zum Beispiel!***

Kleingedrucktes

1 Ob Legasthenie und Denglisch: Damit meine ich auch Gallerie’s und Gallery’s.

(Foto der Straßenaustellung von sxc.hu)