Fotolog mit Movable Type

Nachdem ich nun soweit gekommen bin, hielt ich es für keinen schlechte Idee, meine Erkenntnisse der Allgemeinheit zur Verfügung zu stellen, muß sich ja nicht jeder auf’s neue den Kopf zerbrechen.

Um eine gute Integration mit dem vorhandenen Textlog zu erreichen, benutze ich den “Entry Body” für meine Anmerkungen zu den Fotos. Im “Extended Entry” landet das Foto, und im “Excerpt” das Thumbnail dazu.

Leider ist bei meinem Host Image::Magick nicht installiert, daher muß meine Methode unabhängig von der Frage funktionieren, wie die Bilder auf dem Server landen, also ohne die Notwendigkeit (aber mit der Möglichkeit), sie über den MT Upload hochzuladen – Ich habe normalerweise pro Kategorie einen Ordner mit Unterordnern IMAGES und THUMBS, die Thumbs erstelle ich von Hand mit Photoshop und lade sie per FTP-Client auf meinen Server hoch.

Als erstes habe ich in Movable Type ein neues Weblog angelegt, mit Archive Type INDIVIDUAL und, ganz wichtig: in der Weblog Config muß “convert breaks” ausgeschaltet werden, sonst funktioniert die Positionierung der Thumbnails später nicht korrekt. In Templates, in denen der Anmerkungstext zum Bild auftaucht, muß ich dann für das MTEntryBody Tag convert_breaks wieder einschalten, wenn ich meine Umbrüche sehen will.

Schritt 2
Dann habe ich für jedes Fotoalbum eine passende Kategorie und eine Beschreibung dazu angelegt.

Schritt 3
Ich möchte außerdem vernünftige URLs erhalten, idealerweise für die einzelnen Bilder etwas nach dem Muster MEINEDOMAIN/KATEGORIENAME/BILDTITEL und für die ‹bersichtsseite jeder Kategorie etwas nach dem Muster MEINEDOMAIN/KATEGORIENAME/index.php. Das läßt sich sehr leicht in der Weblog Config unter “Archiving” einstellen:

Bei Archive Type INDIVIDUAL kommt ein Häkchen hin, und unter Archive File Template lege ich folgendes Schema fest:
<$MTEntryCategory dirify="1"$>/<$MTEntryTitle dirify="1" trim_to="15"$>.html

Für Archive Type CATEGORY dementsprechend:
<$MTEntryCategory dirify="1"$>/index.html

Schritt 4
Weil ich faul bin, habe ich beschlossen, in den Extended Entry und den Excerpt jeweils nur die Adresse des Bildes einzugeben, also “http://meinedomain/kategorie/images/bla.jpg” ohne HTML wie IMG SRC dazu, der HTML-Teil wird komplett in meinen Templates geregelt. Das bedeutet, daß ich die Bildgröße (IMG HEIGHT und IMG WIDTH) nicht pro Bild angeben kann sondern in der Template regeln muß. Entweder poste ich also alle Fotos immer im gleichen Format und nehme die Größe fest ins Template, oder ich muß die Bildgröße ganz weglassen. Die Entscheidung ist jedem selbst überlassen, beides funktioniert. Ohne Bildgröße ist allerdings der Seitenaufbau langsamer und nicht so elegant.

Schritt 5
Dann kommt der schwierigste Teil: passende Templates anlegen. Ich wollte auf der Startseite meines Fotologs gerne eine ‹bersicht aller Fotoalben (=Movable Type Kategorien) mit Beschreibungen und dem jeweils aktuellsten Bild haben. Beispielsweise so

Die Template sieht dann so aus:

<div id="content"> <div class="blog"> <MTCategories>

<MTEntries lastn="1"> <div class="container"> <a href="<$MTCategoryArchiveLink$>"><img src="<$MTEntryExcerpt$>" alt="<$MTEntryTitle encode_html="1"$>" align="left" /></a> <h3><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></h3> <h4>(<$MTCategoryCount$> Fotos)</h4> <p><$MTCategoryDescription$></p>

Wozu dient der Spacer? den brauche ich, damit nach jedem Eintrag genügend Platz ist, um das nächste Bild wieder ganz links anzuzeigen.

Schritt 5a
Ein Template für eine Startseite, die das aktuelle Foto jeweils in groß anzeigt mit Link zum kommentieren, könnte stattdessen so aussehen (Mein Beispiel ist allerdings ohne Kommentarlink, also nicht wundern):

<div id="content"> <div class="blog">

<div class="posted">von <$MTEntryAuthor$> Datum: <a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>">

<$MTEntryDate format="%I:%M %p"$></a>

<MTEntryIfAllowComments> | <a href="javascript:OpenComments(<$MTEntryID$>)">Kommentieren?

(<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments>
</div>
</div>
</MTEntries>
</div>
</div>

Schritt 6
Template für den INDIVIDUAL ENTRY, sprich 1 Bild in groß:

<div id="content"> <div class="blog">


<MTEntryPrevious>

<p class="center"><a href="<$MTEntryPermalink$>">&laquo; <$MTEntryTitle$></a> |

</MTEntryPrevious>

<$MTEntryDate format="%x"$> - <$MTEntryTitle$> | <MTEntryNext><a href="<$MTEntryPermalink$>"><$MTEntryTitle$> &raquo;</a>

</MTEntryNext>

</p>
<div class="container">

<img src="<$MTEntryMore$>" alt="<$MTEntryTitle$>" /><h2><$MTEntryCategory$> : <$MTEntryTitle$></h2>

<p><$MTEntryBody convert_breaks="1"$></p>

<div class="posted">von <$MTEntryAuthor$> Datum: <a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>"> <$MTEntryDate format="%I:%M %p"$></a> <MTEntryIfAllowComments> | <a href="javascript:OpenComments(<$MTEntryID$>)">Kommentieren? (<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments> </div> </div> </div> </div>

Mit dem folgenden Ergebnis

Schritt 7
Das war ja alles noch einfach, etwas komplizierter wird es allerdings bei der Frage, wie sich ohne Tabellen (pfui, böses Wort…) eine Thumbnailgalerie auf den Kategorieseiten erstellen läßt. Was will ich haben: Thumbnails mit dem Titel des Eintrages als Bildunterschrift im Block sollen “beweglich” auf der Seite sein, also bei breitem Browserfenster mehr nebeneinander und weniger untereinander und bei schmalem Browserfenster entsprechend andersrum. Hier kann nur CSS “floating” weiterhelfen. Das wird von den aktuellen Browsern prima unterstützt, bei ganz alten Browsern tauchen schlimmstenfalls alle Thumbnails untereinander auf. Meine Munich Underground Galerie kann hier als Beispiel dienen.

Dafür habe ich in meinem CSS-Stylesheet eine Klasse “float” wie folgt definiert (ist natürlich egal, wie sie heißt) sowie einen spacer, der dafür sorgt, daß nachfolgender content wieder normal dargestellt wird:
div.float { float: left; padding: 10px; } div.float p { text-align: center; } div.spacer { clear: both }

Und meine CATEGORY ARCHIVE TEMPLATE sieht dann so einfach aus:

<div id="content">

<div class="spacer"> </div>
<div id="blog">
<MTEntries>
<div class="float">
<a href="<$MTEntryLink$>"><img src="<$MTEntryExcerpt$>" width="100" height="66" alt="<$MTEntryTitle$>" /></a>
<p class="subject"><$MTEntryTitle$></p>
</div>
</MTEntries>
</div>
<div class="spacer"> </div>
</div>

Vor und nach all den floats muß unbedingt noch ein Spacer hin, um zu vermeiden, daß andere Seitenelemente mit den Thumbnails zusammenßießen. ‹brigens habe ich bei den Kategorieseiten nun doch die Bildgröße im Template, weil sich die Seite ohne zu schlecht aufbaut, wenn so vergleichsweise viele Elemente nicht bereits vor dem Laden positioniert werden können. Bei unterschiedlichen Thumbnailgrößen sieht das ganze sonst auch ziemlich unordentlich aus.

A List Apart hat mit Practical CSS Layout Tips, Tricks, & Techniques ein prima Tutorial zu den floating thumbnails.

FERTIG
War nicht sooo schwer, oder? Muß man nur einmal gedanklich aussortieren, und schon geht’s. Natürlich lassen sich die übrigen Seitenelemente wie Banner, Navigationsleisten, Sidebars, undsoweiter problemlos um die beschriebenen Module drumrum platzieren.