Ein Photoblog lässt sich auf Textpattern sehr leicht einrichten. In meinen Augen lässt es sich sogar schneller einrichten als mit dem Platzhirsch aller Blogsysteme: WordPress. Natürlich ist es mit WordPress auch kein Problem so etwas zu kreieren, doch wenn man auf den Einsatz von Plugins verzichten möchte und die benutzerunfreundlichen Custom-Fields auch beseite lässt, wird es eine aufwendige Angelegenheit. Bei Textpattern genügen vorerst die ureigensten Bordmittel.
In diesem Tutorial soll erreicht werden:
- Eine Blogseite, die ein Photo anzeigt.
- Ein Archiv, das dynamisch aus den gebloggten Bildern eine Thumbnailgalerie erzeugt.
Ich setzte Erfahrungen in Webprogrammierung (XHTML/ CSS) und Umgang mit Content-Management-System voraus. Das Ganze soll nur ein kleiner Gedankenanstoß sein, wie unkompliziert sich mit Textpattern ein attraktives Photoblog umsetzen lässt. Vorerst ohne Einsatz von Plugins oder tiefer greifenden PHP-Kenntnissen oder anderen komplexen Programmiersprachen kommt man schnell ans Ziel.
Templates von Textpattern sind in drei Ebenen aufgeteilt. Übergeordnet sind die Sections, denen man Seitenvorlagen (Pages) zuweisen kann. Elemente die auf den Pages immer wiederkehren und angepasste oder sectionabhängige Artikelansichten werden in den Bausteinen (Forms) hinterlegt.
Seitenvorlage & Bausteine
Zu Beginn wird eine Seitenvorlage hinterlegt. Dazu wird im Backend der folgende Menüpunkt aufgerufen: Präsentation > Seitenvorlage. Der Übersicht wegen kopiere ich die default-Vorlage unter dem Titel photoblog. Natürlich kann auch ein anderer prägnanter Titel benutzt werden.
Im nächsten Schritt rufe ich die Seitenvorlage photoblog auf. Die Seitenvorlage setzt sich aus HTML und Textpattern Tags. Textpattern-Tags sind kurze Befehle mit denen Funktionen in Textpattern aufgerufen werden können, eine ausführliche Dokumentation der Textpattern-Tags findet man hier. Unten seht Ihr einen kleinen Codeblock, der nur einen Textpattern-Tag besitzt: <txp:article form="photoblog" limit="1"/>. Dieser Tag beschreibt eine Art Schleife, und an dieser Stelle wird das Photo eingeblendet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Photoblog</title>
<style type="text/css" media="all">
@import url(<txp:site_url />/css/base.css);
</style>
</head>
<body>
<div id="content">
<txp:article form="image" limit="1"/>
</div>
</body>
</html>
Natürlich kann die Seitenvorlage mit weiteren Textpattern-Tags dynamischer gestaltet werden, aber der Übersicht wegen beschränke ich mich auf das Grundsätzliche.
Danach muss noch eine Seitenvorlage für das Archiv her. Also die Vorlage photoblog als Archiv kopieren und nun den Artikeltag:
<txp:article form="image" limit="1"/>
austauschen mit:
<txp:article_custom form="archive" section="photoblog" />
Betrachten wir das Textpattern-Tag <txp:article form="photoblog" limit="1"/> näher. Es beinhaltet das Attribut form, und spricht damit einen bestimmten Baustein an. Dieses Attribut bezieht sich auf einen Baustein namens photoblog, den wir unter Präsentation > Baustein anlegen müssen. Dort rechts neben den Textfeld ein Link Neuen Baustein erstellen anklicken. In das nun leere Textfeld müsst ihr
Damit Textpattern überhaupt diesen Baustein aufrufen kann, müssen wir ihn unter den Namen abspeichern, den wir in der Seitenvorlage als Form-Attribut hinterlegt hatten. In unserem Fall also image. Zusätzlich muss auch der Bausteintyp article angegeben werden.
Nicht vergessen dürfen wir die Seitenvorlage archiv, für die ebenfalls einen Baustein anlegen müssen. Wir wiederholen die gleichen Schritte, wie für den Baustein image und kopieren diesmal <txp:article_image thumbnail="1" /> in das Textfeld. Dieser Tag bewirkt, dass das Vorschaubild angezeigt wird, allerdings nur, wenn eins vorhanden ist, das Originalbild in der Section Photoblog veröffentlicht wurde.
Falls ihr eure Fotos zusätzlich kommentieren wollt, könnt ihr <txp:body /> noch dem Baustein hinzufügen. Dieses Textpattern-Tag ummantelt den Text später selber mit dem <p>-Tag, das mach Das Ganze könnte dann ungefähr so aussehen:
<p><txp:article_image /></p>
<txp:body />
Aber jetzt kümmern wir uns vorerst um etwas anderes.
Sektionen
Sektionen dienen in Textpattern zur Strukturierung der Website. Jeder Sektion kann eine Seitenvorlage zugewiesen werden, somit können wir verschiedene Layouts für die einzelnen Sektionen realisieren. Genaueres dazu findet ihr in den Artikel Eine Website mit Textpattern organisieren.
Unter Präsentation > Sektionen wird eine Sektion angelegt. Man kann einfach die die schon vorhandene Default-Sektion in photoblog umbenennen. Bei den Checkboxen kann nein angekreuzt werden, bis auf auf der Startseite anzeigen und in Seitensuche einbeziehen, dort wäre ja sinnvoll :). Als Seitenvorlage wählen wir photoblog aus.
Zusätzlich legen noch eine Sektion namens archiv an. Bis auf die Seitensuche können alle Checkboxen mit nein abgehakt werden.
Wenn Ihr einen Link zum Archiv in die Seitenvorlage einbauen wollt, was ja durchaus sinnvoll wäre, könnt ihr mit<txp:section link=1 title=1 name="archive" /> das Archiv anlinken.
Ein Bild posten
Um ein Bild zu publizieren, muss es über Inhalt > Bilder hochgeladen werden. Wenn das Bild dann auf dem Server ist, kann auch gleich ein Thumbnail angelegt werden. Nachdem dass erledigt ist, unter Inhalt > Verfassen einen Blick auf die linke Seite werfen. Dort findet ihr die Erweiterte Einstellungen: Dort müsst Ihr nur die ID des Bildes eintragen unter Artikelbild eintragen. Falls noch Titel und Kommentare dem Bild beifügen wollt, müsst ihr den Baustein photoblog dementsprechend anpassen.
Das wäre es dann schon gewesen. Hoffe es war einigermaßen nachvollziehbar.
July 12th, 2008 um 8:02 pm
Wer macht denn sowas? WordPress oder sonstiges für einen Fotoblog, wenn es doch Pixelpost gibt… ?! und das ist bekanntlich in Sachen Fotoblog der “Platzhirsch” und extra für Fotoblogs entwickelt…
January 9th, 2009 um 9:20 pm
Danke für den Tip. Hab vor kurzem ein Archiv mit Joomla gebaut. Jetzt will ich für ein anderes Projekt noch ein ganz einfaches bauen. Da werd ich das mal mit pattern testen!