Sie sind hier: Startseite > Über > Webworking > Galerien im Web dynamisch und flexibel erzeugen

Galerien im Web dynamisch und flexibel erzeugen

Dieser Webworking-Artikel ist ein Entwurf, Galerien im Web dynamisch und flexibel anzuzeigen. Die Galerie ist eine Auswahl von Bildern. Unter dynamisch verstehe ich: Es existieren keine festen Seiten, sie werden beim Abruf durch ein Programm erzeugt, das der Webserver startet. Flexibel heißt, die gleiche Galerie kann bestehen aus einzelnen HTML-Seiten oder angezeigt werden von einem Programm auf dem Rechner des Betrachters, beispielsweise mit Flash oder JavaScript. Zusätzlich lassen sich verschiedene Größen des gleichen Bilds anzeigen. Diese Funktionen werden vom Programm bereitgestellt, das ein Skript sein kann (Perl, PHP, ...), ein Servlet oder direkt ausführbar.

Bilder und Metadaten

Grundlage aller Galerien sind Bilder und Informationen darüber: Die Metadaten. Für jedes Bild kann es Metadaten geben wie Stichwörter oder Anmerkungen.

Die Bilder und Metadaten sollen nur einmal erfasst und gespeichert werden. Das Programm sorgt für eine zeitgemäße Präsentation.

Bilder

Die Bilder werden als einzelne Dateien gespeichert oder in eine Datenbank. Mit Blick auf die Zukunft sollte die Auflösung (Pixelanzahl) maximal sein. Das Programm liefert zuerst eine Standardgröße und der Benutzer kann eine andere Größe auswählen, die beim Aufruf weiterer Einzelseiten beibehalten wird. Unter Größe verstehe ich eine maximale Pixelanzahl für die Höhe und Breite separat.

Die unterschiedlichen Größen eines Bilds können aus der Maximalauflösung dynamisch erzeugt (verkleinert, herunterskaliert) werden mit angepasster Schärfung oder es können nach einer Konvention von jedem Bild unterschiedliche Auflösungen fest gespeichert werden. Letzteres hat den Vorteil, dass der Webserver weniger rechnet, so die Bilder schneller liefern kann und der Fotograf hat bessere Kontrolle über das Aussehen jedes Bilds. Beim dynamischen Erzeugen ist weniger Speicherplatz nötig und es kann jede beliebige Größe geliefert werden. Das Programm sollte beide Varianten unterstützen. Die dynamische Methode lässt sich verfeinern: In einem Cache werden dynamisch erzeugte Bilder vorgehalten.

Metadaten

Die Metadaten werden in einer Datenbank gespeichert oder im Dateisystem, beispielsweise als XML-Dateien. Metadaten sind Stichwörter (Tags) oder Anmerkungen über Bilder. Das Programm zeigt sie auf Wunsch zusammen mit dem Bild an. Die Metadaten können beliebig erweitert werden (später mehrere anderen Typs hinzugefügt). Das Programm sollte im Bild eingebettete Metadaten berücksichtigen wie EXIF, IPTC, XMP.

Grobentwurf des Programms

Galerien aus Metadaten

Aus den Metadaten können flexibel Galerien erzeugt werden: Alle Bilder auf denen ein Baum zu sehen ist oder alle, die an einem bestimmten Tag und/oder mit einem bestimmten Objektiv fotografiert wurden.

Eine Funktionalität habe ich seit längerem für meine Galerien implementiert: Klickt jemand auf ein Stichwort, werden dynamisch Bildübersichten angezeigt mit allen Bildern, denen das gleiche Stichwort zugeordnet ist. Von jeder Übersicht kann eine Flash-Diaschau angezeigt werden. Dazu nutze ich das Mikroformat rel-tag, unternehme nichts weiter, als den Bildern Tags zuzuordnen (Beispiel: Foto: Baum.)

Bildschauen

Im Gegensatz zu den dynamischen Galerien anhand der Metadaten soll das Programm auch statische Bildschauen anzeigen können. Hier legt der Fotograf fest, welche Bilder in welcher Reihenfolge gezeigt werden, beispielsweise alle Bilder eines Tags oder einer Reise. Bildschauen werden neben den Metadaten in der Datenbank oder auf dem Dateisystem gespeichert.

Abbildung: Beziehungen zwischen den einzelnen Objekten (Daten).

Programmablauf

Das Programm wird beispielsweise über das CGI aufgerufen und entscheidet anhand von Parametern, was es liefern soll: Eine Bildschau, Bilder mit bestimmten Stichwörtern, einfache HTML-Seiten, eine Seite mit eingebettetem Flash-Objekt etc. Soll beispielsweise eine Bildschau angezeigt werden, holt es deren Bilder, das heißt die URLs der Binärdaten (das eigentliche Bild) sowie Metadaten und füllt Template-Dateien mit diesen Informationen.

Template-Dateien sind einfache HTML-Dateien mit speziellen Kommentaren an beliebigen Stellen, die durch Inhalt ersetzt werden, beispielsweise mit einem Bild-URL. So bestimmt der Benutzer, was angezeigt werden soll (Weglassen/Hinzufügen von Kommentaren) und wie die Seite aussieht (statischer Text, CSS).

Arbeit für den Benutzer

Für den Benutzer sollte ein Programm existieren, das alle Bilder eines Verzeichnisses anzeigt, eventuell gefiltert, beispielsweise alle Bilder eines Tages. Davon wählt der Benutzer jene aus, die ins Web sollen. In einer Maske ordnet er Stichwörter zu, schreibt Anmerkungen und lässt vielleicht eine Bildschau daraus erzeugen. Anschließend werden die Bilder dem Programm im Web übermittelt, das sie und die Metadaten speichert.

Zum Definieren von Bildschauen nach dem Upload kommuniziert das Programm auf dem Benutzerrechner mit dem Programm im Web, das Bildvorschauen der auf dem Webserver gespeicherten Bilder liefert. Performanter wäre, wenn das lokale Programm sich alle hochgeladenen Bilder und Metadaten merkt.

Elmar Baumann, 30.12.2007.

Letzte Bearbeitung: 30.12.2008.

Webworking