[ lamepage · Linux · Tools · Album ]

Photoalbum mit html

Wer kennt das nicht? Da hat man sich die Mühe gemacht und seine Urlaubsfotos eingescannt, und nun stellt sich die Frage, wie man diese am besten präsentiern kann. Nun, dazu bietet sich u.a. html an. Man könnte also eine Indexseite erstellen, die alle Thumbnails der Fotos in einer Tabelle anzeigt, und die kleinen Bilder werden dann mit den Großen verlinkt. Gedacht - getan. Hier wird schonmal eine mögliche Lösung vorgestellt.

Dazu habe ich ein paar Shellscripte gebastelt, die einem die Arbeit ein bisschen erleichtern:
(Hier downloaden: photoalbum-0.3.tar.gz (5097 bytes))

makelower:

Dieses Script hat nur die Aufgabe, alle Dateinamen mit der Endung .JPG und .jpg im aktuellen Verzeichnis in Kleinbuchstaben zu wandeln. Die anderen Scripten verlassen sich nämlich darauf, daß alle Dateinamen, bzw. deren *.jpg-Endung kleingeschrieben sind. Wenn man jpg-Dateien von DOS/Win-Systemen übernimmt, kann dieses Script also nützlich sein.

makethumb:

Makethumb erstellt Thumbnails (kleine Vorschaubilder) aus den jpg-Dateien im aktuellen Verzeichnis. Dazu wird ein neues Verzeichnis mit dem Namen 'klein' erstellt, in dem alle Thumbnails abgelegt werden. Zusätzlich wird der Dateiname um ein führendes 's' (für small) ergänzt. Dieses Script greift auf die beiden Programme djpeg und cjpeg zu, welche also im Pfad liegen sollten. Bei der S.u.S.E-Distribution sind diese im Packet jpeg in der Serie gra enthalten.

makehtml:

Dieses Shellscript erstellt für jedes Bild im aktuellen Verzeichnis eine html-Seite. Die Größe der Bilddateien wird durch das Programm djpeg ermittelt. Des weiteren werden in den Seiten jeweils Links auf die vorherige, die nachfolgende, auf den Index, und auf eine Hauptseite erstellt. Der Index-Link weist auf den Bilderindex in klein/picindex.html. Der Link Namens Hauptseite zeigt auf index.html.
Um eine bestimmte Reihenfolge der Bilder (und somit der Links) zu gewährleisten, benötigt dieses Script eine Datei im Hauptverzeichnis mit dem Namen order. Man kann also in dieser Datei die Reihenfolge bestimmen, oder sich im einfachsten Fall mit einem 'ls -1 *.jpg >order' zufrieden geben. Wichtig ist, daß diese Datei im Hauptverzeichnis existiert und daß makehtml auch in diesem Verzeichnis ausgeführt wird.

makepicindex:

Makepicindex erstellt eine html-Seite mit einer Tabelle, in der alle Thumbnails, die mit makethumb erstellt wurden, angezeigt werden. Die Reihenfolge der Bilder im Index wird wieder anhand der Datei order, die im Hauptverzeichnis liegt, festgelegt. Wichtig ist, daß makepicindex in dem Verzeichnis 'klein' ausgeführt wird, um mit den Thumbnails zu arbeiten.
Ab Version 0.2 wird die Größe der Thumbnails in den html-Code geschrieben. Das verursacht eine wesentlich geringere Ladezeit im Browser. Um die Größe zu ermitteln, wird auf djpeg zugegriffen.
makepicindex schreibt die Ausgabe defaultmäßig nach stdio, also tut es Not, die Ausgabe in die Datei picindex.html unzuleiten.

Beispiel:

In dem Verzeichnis /home/vossy/scanned/italien/italia1997/thuyvon/ befinden sich alle schönen Urlaubsbilder. Dieses Verzeichnis nenne ich mal Hauptverzeichnis.

Los gehts:

vossy@cybania:/home/vossy > cd scanned/italien/italia1997/thuyvon
vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon >

Nun sollte man sich davon überzeugen, daß alle jpg-Dateien kleingeschrieben sind. Gegebenenfalls makelower aufrufen.

vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon > makelower

Anschließend geht es daran, die Thumbnails mittels makethumb zu erzeugen:

vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon > makethumb
[...]
scaling venedig9.jpg to svenedig9.jpg
scaling venedigcvth.jpg to svenedigcvth.jpg
scaling yvonne1.jpg to syvonne1.jpg
scaling yvonthom1.jpg to syvonthom1.jpg
vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon >

Nun kommt etwas wichtiges: Um die Reihenfolge der Bilder im Bilderindex festlegen zu können und die Links richtig zu setzen, muß die Datei order erstellt werden. Die einfachste Lösung ist das oben schon erwähnte 'ls -1 *.jpg >order'. Anschließend kann man diese Datei mit einem Editor beliebig edieren, also die Reihenfolge der Bilder nach seinem Geschmack anordnen.

vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon > ls -1 *.jpg >order
vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon > vi order

Dann kann man gleich damit fortfahren, die html-Seiten mit makehtml zu bauen:

vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon > makehtml
Will build 95 files.
building cvpueppi1.html ...
building cvpueppi2.html ...
building strand1.html ...
[...]
building venedigcvth.html ...
building abfahrt1.html ...
building abfahrt2.html ...
vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon >

Hat man dieses dann getan, muß in das Verzeichnis klein gewechselt werden, um dann mit makepicindex den Bilderindex zu generieren.

vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon > cd klein
vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon/klein> makepicindex >picindex.html
vossy@cybania:/home/vossy/scanned/italien/italia1997/thuyvon/klein>

Das war es dann eigentlich auch schon. Nun sollte man noch eine Hauptseite namens index.html im Hauptverzeichnis erstellen, auf der dann jeweils kurz die Beschreibung der Bilderserie angeben ist. Zusätzlich einen Link auf klein/picindex.html, sowie auf die erste html-Bildseite legen.

Ein fertiger Bilderindex sollte dann ungefähr so aussehen:

Image: Bildindex

Um das Ganze zu perfektionieren, kann man die oben erwähnten Schritte in ein eigenes Shellscript packen. Dabei ist es sinnvoll, ein paar Fehlerabfragen einzubauen. Ins tar-Archiv habe ich dazu ein Script namens phmakeall gepackt. Auf jeden Fall sollte die Datei order vorher erstellt werden. Es ist am einfachsten, wenn man diese bereits während des Einscannens der Fotos erstellt, da man dann später mit der Reihenfolge nicht durcheinander kommt.

Viel Spaß und Erfolg.