2004-06-06

Neue Bilder

Im Album hats viele neue Bilder:

22:00 [/allgemein] album_neu_200406 Google Trackback

Nicht der Kaffee, sondern das Album ist fertig! [Update]

oder «YAPA: Yet another PHP album»

Jetzt, da mein Foto-Album (alias Galerie) auch Vorschau-Bilder anzeigen kann, ist die Zeit gekommen, es der Öffentlichkeit vorzustellen. Von der Albumauswahl an sollten eigentlich die weiteren Schritte offensichtlich sein… wenn nicht: sofort melden!

Konzept

Die Grundidee war—ganz dem Prinzip von Unix folgend—, diejenige hierarchische Datenbank für meine Zwecke zu benützen, die jedes halbwegs vernünftige Betriebssystem von Hause aus bereits zur Verfügung stellt, nämlich das Filesystem! Ein Album ist ganz einfach ein Verzeichnis unter $HOME/public_html/album, in dem Bilddateien der Typen PNG, JPEG oder GIF abgelegt werden können. Das schöne am Filesystem ist natürlich, dass ein Album wieder Unter-Albums (-Albümmer?) enthalten kann, und diese wieder weitere Unter-Unter-Albums, etc, etc, bis der Disk-Space ausgeht. Da die Verzeichnisse bei jedem Request dynamisch ausgelesen werden, stimmt die Anzeige immer mit der Verzeichnisstruktur überein. Und nein, es gibt kein Performance-Problem, sofern ein Album nicht mehr als ein paar Dutzend Bilder umfasst.

Zusatzinformationen zu Bildern und Alben

Jetzt habe ich also meine Bilder schön strukturiert in ihren Verzeichnissen abgelegt, aber woher nehme ich jetzt die Zusatzinformationen? Vielleicht möchte ich ja zu einem Bild noch eine Beschreibung anzeigen! Auch hier habe ich wieder dass Prinzip «KISS» angewendet: zu einem Bild namens blabla.jpg kann es eine Datei namens blabla.info geben, die diese Zusatzinformationen enthält. Die Info-Datei für ein ganzes Album heisst einfach .info. Und damit diesen Infos auch eine gewisse Ordnung gegeben werden kann, haben diese .info-Dateien einen bestimmten Aufbau, den ich schamlos im RFC 822 (STANDARD FOR THE FORMAT OF ARPA INTERNET TEXT MESSAGES) abgekupfert habe: Auf eine beliebige Anzahl Headerzeilen der Form Name: Wert folgt eine Leerzeile, dann folgt der unstrukturierte Rest.

Die folgenden Headerzeilen sind momentan definiert:

Title:
Der Bildtitel; meistens eine kurze Beschreibung des Inhalts. Default: der Dateiname des Bildes.
Subtitle:
Eine Unterüberschrift, Tagline, etc. Default: leer.
Alt:
Der Text, der als alt-Attribut des Bildes verwendet wird. Default: der Dateiname des Bildes.
Width:
Die gewünschte Bildbreite. Default: die effektive Bildbreite.
Height:
Die gewünschte Bildhöhe. Default: die effektive Bildhöhe.
EXIF:
Erzwingt die Anzeite der EXIF-Informationen, sofern vorhanden. Default: keine EXIF-Anzeige.

Bemerkungen:

  • Die Bildgrösse kann mit Width: und Height: gezielt übersteuert werden, falls das nötig sein sollte.
  • Die Anzeige der EXIF-Informationen kann auch in der URI durch das Anhängen des Query-Parameters &exif=1 erzwungen werden.
  • Der unstrukturierte Rest, von dem oben die Rede war, ist die eigentliche, unter Umständen lange Bildbeschreibung, die natürlich wieder alle HTML-Tags beinhalten kann. Der Schreiblust sind hier keine Grenzen gesetzt!
  • Da alle Kopfzeilen fakultativ sind, muss die Info-Datei mit einer Leerzeile beginnen, wenn sie ausschliesslich eine Bildbeschreibung enthält.

Vorschau, alias thumbnails, alias preview

Was jetzt noch fehlt, ist die Bildvorschau, im Jargon so schön thumbnail genannt. Hier habe ich mich für zwei verschiedene Möglichkeiten entschieden:

  1. JPEG-Bilder von Digitalkameras enthalten meistens in den EXIF-Informationen eine brauchbare Vorschau von ca. 160x120 Pixeln. Wenn diese Vorschau vorhanden ist, wird sie verwendet.
  2. Wenn Bilder vor der Veröffentlichung bearbeitet werden, geht in vielen Fällen die Vorschau verloren, oder zumindest gibt sie nicht mehr das bearbeitete Bild wieder. In diesen Fällen, wie auch bei den anderen Bildtypen GIF und PNG, die keine integrierte Vorschau kennen, kann die Vorschau als eigenes Bild namens tn_Bild.Typ abgelegt werden («tn» wie thumbnail, capisce?). Diese Datei, sofern sie vorhanden ist, übersteuert die EXIF-Vorschau.

Damit das Layout der Bildauswahl nicht völlig auseinander fällt, sollten die Thumbnails nicht grösser als 160x160 Pixel sein. À propos Layout: der sich der Browserbreite anpassende Umbruch, der nota bene mit einem Tabellen-basierten Seitenaufbau schlicht und ergreifend nicht möglich ist (dies nur ein kleiner Seitenhieb am Rande! ;-) habe ich von A list apart, der ausgezeichneten Site des Web-Standard-Experten Jeffrey Zeldman.

Todo-Liste

  • In der Vorschau anstelle des Dateinamens den Titel aus der Info-Datei anzeigen
  • Eine Info-Datei für das ganze Album ermöglichen
  • Ein schöneres Bild als aktuelle «No Preview» machen
  • Soll ein Bild ein Link auf das nächste Bild des Albums sein?
  • Andere Medientypen ermöglichen (MP3, MOV, AVI, …)

Geeks only

Der Source-Code des Albums besteht aus ca. 350 Zeilen (für meine Verhältnisse ausgiebig kommentierten) PHP-Code und ein paar Zeilen CSS.

17:01 [/software/php] album Google Trackback