vielen Dank für eine Stunde Arbeit für das Löschen Ihrer zahlreichen sinnvollen Kommentare. Kommentare für alle Beiträge, die älter als 10 Tage sind, sind nunmehr geschlossen: MTCloseComments

GRMPF :-(

Ob das jemanden interessiert? Egal. Wer will, kriegt jetzt Nachricht, sobald es ein neues Bild gibt :-)

Da kommt David Raynes Plugin MTOtherBlog genau richtig:

Das Plugin ermöglicht es nämlich, innerhalb einer Movable Type Installation Inhalte eines anderen Weblogs in den eigenen zu integrieren.

Innerhalb des <MTOtherBlog> Tags funktionieren die vorhandenen Tags in der bekannten Weise – auf die Art kann ich immer die beiden neuesten Bilder zeigen:

<MTOtherBlog blog_id="2">

Es ist allerdings so, daß die Weblog-Seite nicht automatisch upgedated wird, wenn es neue Fotos gibt – die Bilder werden erst aktualisiert, wenn ich einen Rebuild vom weblog mache oder natürlich, sobald ich einen neuen Eintrag habe.

dies ist das erste Bild aus meiner Serie, ich hoffe, Sie gefällt

Schritt 1

Bilder auf den Server hochladen – Ich habe mir angewöhnt, das zuerst zu machen, sonst vergesse ich es und habe lauter tolle Einträge mit lauter tollen nicht vorhandenen Bildern online :-)

Schritt 2

Textfile für den Import erstellen:

Das Textfile muß nur für die Felder Informationen enthalten, die man in seiner Fotolog-Variante auch benutzt, unbenutzte lässt man einfach aus. Es ist auch nicht nötig, dass für jeden Eintrag die gleichen Felder benutzt werden – Für manches Bild habe ich vielleicht einen beschreibenden Text, für andere wieder nicht.

Per Copy und Paste ist diese Liste schnell erstellt, es sind dann nur die Bildnamen zu ändern. Man sollte allerdings darauf achten, für die Einträge unterschiedliche Uhrzeiten anzugeben, sonst funktionieren auf den Archivseiten die “next” und “previous” Links nicht.

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>

<div class="spacer">&nbsp;</div>
</div>
</MTEntries>
</MTCategories>
</div>
</div>

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">

<MTEntries lastn="1">
<div class="container">

<a href="<$MTEntryLink$>#<$MTEntryID pad=" 1"$>"><img class="main" src="<$MTEntryMore$>" alt="<$MTEntryTitle$>" /></a><br clear="all"/>

<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">

<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">&nbsp;</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">&nbsp;</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.

Nichts für ungut…