Eine einfache Web-Galerie

Es kommt immer ganz gut, wenn man Freunden und Verwandten unkompliziert ein paar Fotos zeigen kann,  z.B. nach einer Party oder um den Nachwuchs zu dokumentieren. Bisher habe ich da immer Gallery für genommen, aber da das Projekt faktisch tot und eigentlich schon seit Version 2 deutlich überdimensioniert ist muß etwas neues her. Ein Großteil der Alternativen scheint mir allerdings auch unnötig mächtig für meine bescheidenen Ansprüche und daher dachte ich mir, das mache ich lieber selbst.

Mein erster Instinkt für eine Web-Anwendung wäre php, aber eigentlich benötige ich keine Web-Anwendung dafür. Eine Galerie, die nur sporadisch aktualisiert wird, muß nicht dynamisch sein, da reicht einfaches HTML.

Man nehme: Galerie1.png

  • eine Ordnerstruktur mit
  • entsprechend benamten Bildern
  • ImageMagick
  • ein paar Zeilen Shell-Skript:
#!/bin/bash

BASE=/var/www/html
TITLE="Bilder"
PICSIZE="256"
DIVSIZE=$( expr $PICSIZE + 30 )
CLEANUP=0

makeHTML() {
        cd "$1"
        [ $CLEANUP -gt 0 ] && {
                echo "cleaning up $(pwd)"
                rm *.png *.html 2>/dev/null
        }
        cat > index.html << EOF
<HTML>
        <HEAD>
                <TITLE>$TITLE</TITLE>
                <META http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <STYLE>
                        body {background-color:#eeeeff; }
                        .thumb { display:inline-block;width:${PICSIZE}px;height:${DIVSIZE}px;margin:20px; }
                        .caption { width:${PICSIZE}px;height:40px;vertical-align:bottom;text-align:center; }
                        img { box-shadow:10px 10px 10px grey; }
                </STYLE>
        </HEAD>
        <BODY>
EOF
        [ "$(pwd)" == "$BASE" ] || echo "<A href=..> <== </A><BR>" >> index.html
        echo "<DIV style=\"width:100%;text-align:center\"><H2>$TITLE</H2></DIV>" >> index.html
        [ "$(pwd)" == "$BASE" ] || echo "<DIV style=\"width:100%;text-align:center\"><H4>$1</H4></DIV>" >> index.html
        echo "<DIV style=\"text-align:center;\">" >> index.html

        for DIRITEM in *
        do
                SUFFIX=$(echo "$DIRITEM" | awk -F "." '{print $NF}')
                suffix=$(echo "$SUFFIX" | tr '[:upper:]' '[:lower:]')
                if [ -d "$DIRITEM" ]
                then
                        ( makeHTML "$DIRITEM" )
                        echo "<DIV class=thumb><A HREF=\"$DIRITEM\"><DIV><IMG src=\"$DIRITEM/folder.png\"></DIV></A><BR><DIV class=caption> $DIRITEM </DIV></DIV>" >> index.html
                elif [ $suffix == "jpg" ]
                then
                        FILENAME=$(basename "$DIRITEM" .$SUFFIX)
                        convert "$DIRITEM" -thumbnail ${PICSIZE}x${PICSIZE}^ -gravity center -extent ${PICSIZE}x${PICSIZE} "${FILENAME}.png"
                        [ -f folder.png ] || cp "${FILENAME}.png" folder.png
                        echo "<DIV class=thumb><A HREF=\"$DIRITEM\"><DIV><IMG src=\"${FILENAME}.png\"></DIV></A><BR><DIV class=caption>${FILENAME}</DIV></DIV>" >> index.html
                fi
        done
        [ "$(pwd)" == "$BASE" ] || [ -f folder.png ] || cp */folder.png . 2>/dev/null
        echo "</DIV></BODY></HTML>" >> index.html
        cd ..
}

makeHTML $BASE

Damit erhält man eine einfache kleine Galerie:

Galerie2.png

Das ganze kann man lokal laufen lassen und per FTP hochladen oder für maximale Faulheit alle paar Minuten per cronjob direkt auf dem Server. Wenn man den Bilder-Ordner dann noch irgendwie lokal synchronisiert (rsync, btsync, Dropbox…) reicht es neue Bilder in einen lokalen Ordner einzusortieren und wenige Minuten später ist die Galerie aktualisiert.

Advertisements

2 Gedanken zu “Eine einfache Web-Galerie

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s