textpattern resources [ge]

Das folgende Tutorial ist besonders für Anfänger geeignet.

Nach Nils Tutorial (Eine Thumbnail-Galerie umsetzen) erfolgt hier eine Beschreibung einer Galerie, die ohne jedes Plugin auskommt, auf Thumbnails basiert und mit der sliding Technik funktioniert.
(sliding Technik = Navigation über Buttons, mittels denen man von einem Bild zum nächsten navigieren kann)
Das Galerie-Tutorial erfolgt nach zdoob´s Instruktionen.

Eine Live Demo der Galerie findet man auf julierosa.com.

1. Bilder und die dazugehörigen Thumbnails hochladen.

2. Sektion namens z. B. “portfolio” einrichten und eine X/HTML Seite für die Sektion erstellen. Dorthinein den folgenden Tag einsetzen:
<txp:article form="B_portfolio" listform="B_portfolio" limit="xx" />

3. Einen Baustein (hier mit dem Namen “B_portfolio”) mit den folgenden Angaben:
<txp:if_article_list>
<xp:permlink ><txp:excerpt /></txp:permlink>
</txp:if_article_list>

<txp:if_individual_article>
<txp:article_image />
<txp:link_to_prev>Weiter</txp:link_to_prev>
<txp:link_to_next >Zurück</txp:link_to_next>
</txp:if_individual_article>

erstellen und als Artikel-Baustein abspeichern.

4. Artikel verfassen und in diesen nur (!) die ID des Bildes unter Erweiterte Einstellungen -> Artikelbild eingeben. In das dazugehörige Exzerpt-Feld den korresponierenden Thumbnail Tag einfügen: <txp:thumbnail id="xyz" />. Den Artikel unter der Sektion “portfolio” speichern.

Geht man nun zu www.xyz.de/portfolio findet man die Thumbnails vor. Klickt man auf ein Thumbnail, erscheint das original große Bild mit den “Weiter” und “Zurück” Buttons.

Anmerkung
Etwaige CSS-Angaben wurden aus dem o. g. Code der besseren Übersichtlichkeit halber entfernt. Wer keine typographischen Buttons wünscht, sondern Grafiken, kann auch “Weiter/Zurück” durch den Tag <txp:image id="x" /> ersetzen.

WICHTIG
Wer mit dieser Technik eine größere Bildergalerie realisieren möchte, sollte unbedingt das Plugin zem_cache nutzen. Beachtet, dass es inzwischen eine neue Version des Plugins gibt, die im Forenthread weiter unten von Zem zur Verfügung gestellt wir. Der Plugin-Tag wird um den TXP Code Block: <txp:if_article_list>... eingefügt. Warum, weshalb, weswegen, erfahrt ihr hier.