Gehobene Ansprüche

Individuell gestaltetes Fotoblog

Da ein Bild ja bekanntlich mehr sagt als tausend Worte, liegt die Idee nahe, die Blog-Welt mit Fotos zu verbinden. In ähnlicher Form wurde das schon von Flickr für die breite Masse umgesetzt, und die wachsende Zahl an registrierten Blogs, zum Beispiel unter Photoblogs.org, beweist, dass viele Webbegeisterte bereit sind, ihre Fotos zu präsentieren. Fotoblogs kann man aber selbstverständlich auch als Methode verstehen, um Unternehmen, Vereine oder Ideen zu präsentieren. Ein Fotoblog hebt sich hier durch seine Kalender-Funktion und durch die Betonung der Aktualität deutlich von der klassischen Bildergalerie ab.

Verbunden mit dem Wunsch nach einem Fotoblog oder Blog im Allgemeinen ist meist der Wunsch nach einem individuellen Design. Das hier im Workshop gestaltete Blog soll aus drei Bereichen bestehen: Technik, Detail und Natur. Außerdem ist wichtig, dass bei jedem Foto ein begleitender Text steht. Die Kombination aus Titel, Kommentar des Fotografen und Foto selbst soll hier ihre volle Wirkung entfalten und ist damit schon eine Mischung aus normalem Text- und reinem Fotoblog. Diese Ansprüche zusammengenommen bedeuten allerdings, dass Sie selbst Hand anlegen müssen. In diesem Workshop entsteht deswegen ein von Grund auf neues Blog.

Entscheidungen

Individuell gestaltetes Fotoblog

Haben Sie sich schon einmal gefragt, warum Blogs eigentlich so aussehen, wie sie aussehen? Rechts oder links eine Leiste mit Funktionen, oben ein Bereich mit Bild oder größerem flächigem Block, darunter dann die einzelnen Einträge. Nach diesem Schema sind die meisten Blogs und auch die meisten Fotoblogs aufgebaut. Die Darstellungsform ist Ausdruck einer leicht verständlichen Ordnung, die vermutlich auch dazu geführt hat, dass Blogs Erfolg haben. Ein Blog hat ja immer die gleiche Aufgabe: Informationen sinnvoll einem Datum zuzuordnen. Dazu kommen einige Nebenjobs wie das Archiv und RSS-Feeds. Ansonsten stehen aber die Einträge im Vordergrund. Ein Fotoblog unterscheidet sich vom normalen Blog dadurch, dass das Foto im Mittelpunkt steht.

In diesem Artikel wird das Fotoblog aus gestalterischer Sicht angegangen. Das Foto soll beim jeweiligen Posting im Vordergrund stehen. Daneben sind einige Funktionen notwendig: Fotos dürfen in Kategorien eingeordnet werden und Details wie EXIF-Daten, die die Digitalkamera liefert, sollen automatisch ausgelesen werden. Wichtig ist, dass das Drumherum nicht das Foto selbst stört.

Bei der Suche nach einer passenden Open-Source-Lösung für die Vorgaben dieses Workshops fällt die Wahl auf Pixelpost. Diese Blog-Software ist Spezialist für Fotoblogs und basiert auf der klassischen Kombination von PHP und MySQL. Selbstverständlich können Sie alternativ aber auch eine klassische Blog-Software einsetzen.

Beim Layout sollten Sie sich nicht zu eng von der jeweiligen Blog-Software fesseln lassen. Zwar ist es sinnvoll, den Kalender rechts oben zu platzieren, damit der Nutzer ihn an der erwarteten Stelle findet, aber ansonsten sollten Sie sich die Freiheit gönnen, eigene Ideen zu entwickeln oder frei verfügbare Templates von anderen Entwicklern als Ideenbasis zu verwenden.

Fotoblog einrichten

Individuell gestaltetes Fotoblog

Pixelpost laden Sie unter www.pixelpost.org herunter. Aktuell ist Version 1.5. Entpacken Sie das Archiv auf dem lokalen Webserver oder auf Ihrem Webspace. Sie müssen nun noch die Verzeichnisse für Bilder und Thumbnails einrichten. Sie heißen standardmäßig images und thumbnails und benötigen beide volle Rechte (chmod 777). Wenn Sie Pixelpost zum ersten Mal aufrufen, sehen Sie nur eine Fehlermeldung. Für die Datenbankanbindung gibt es hier im Gegensatz zu vielen größeren Open-Source-Projekten keinen Assistenten. Sie müssen die Daten für die Datenbank in der Datei Includes/pixelpost.php anpassen. Aktuell wird nur MySQL unterstützt. Über phpMyAdmin oder ein anderes MySQL-Frontend legen Sie einfach eine passende Datenbank an. Für ein lokales Testsystem heißt sie beispielsweise pixelpost. Daraus ergeben sich dann folgende Einstellungen in pixelpost.php:


$pixelpost_db_host = "localhost";
$pixelpost_db_user = "root";
$pixelpost_db_pass = "xyz";
$pixelpost_db_pixelpost = "pixelpost";


Bei einer lokalen Testinstallation bleibt das Datenbankpasswort oft leer. Aus Sicherheitsgründen ist das auf dem Produktivsystem natürlich eine Todsünde. Außerdem sollten Sie dort einen eigenen Nutzer für die Datenbank anlegen. Wenn Sie mehrere Versionen von Pixelpost in einer Datenbank vorhalten möchten, geben Sie ein Datenbank-Prefix an, das vor den Namen jeder Tabelle geschrieben wird. Pixelpost verwendet standardmäßig pixelpost-.

$pixelpost_db_prefix = "pixelpost2_";

Sind alle Einstellungen getätigt und ist die Konfigurationsdatei gespeichert, rufen Sie das admin-Verzeichnis im Browser auf. Bei einer lokalen Installation ist das beispielsweise:

http://localhost/pixelpost/admin/

Daraufhin startet das Installationsskript. Darin wählen Sie einen Nutzernamen und ein Passwort und bestätigen, um die Datenbanktabellen anzulegen. Im nächsten Schritt erhalten Sie noch eine Auswertung und gelangen dann in die Administrations-Oberfläche.

Nach der Installation werfen Sie zuerst einen Blick auf General Info. Dort erfahren Sie, ob die GD-Bibliothek zum Generieren von Thumbnails korrekt installiert ist und ob die Bilderordner ausreichend Rechte besitzen. Im Bereich Options können Sie unter General anschließend die Sprache auf Deutsch wechseln. Wenn Sie möchten, geben Sie dort auch einen anderen Bildordner als den voreingestellten (images) an.

Templates

Individuell gestaltetes Fotoblog

Sind alle Einstellungen getroffen, sollten Sie zuerst ein paar Kategorien anlegen und diese dann über Neues Bild mit einigen Bildern füllen. Anschließend werfen Sie einen Blick in das Frontend. Dort sehen Sie nun ein sehr einfaches Layout mit dem Bild im Mittelpunkt.

Für die optischen Anpassungen besitzt Pixelpost ein eigenes Template-System. Die Platzhalter sind als Tags gekennzeichnet, beispielsweise für den Bildnamen. Als Ausgangsbasis für das eigene Template können Sie ein bestehendes verwenden. Von den Standardtemplates ist hier beispielsweise pixelpost-light zu empfehlen, da es viele Elemente als Platzhalter enthält, die dem Standardtemplate fehlen. Duplizieren Sie einfach das Verzeichnis und vergeben Sie einen neuen Namen.

Das Template besteht aus zwei HTML-Dateien: eine für die Bilddarstellung (image_template.html), die gleichzeitig die Hauptseite ist. Die zweite ist für den Archiv-Überblick (browse_template.html) zuständig. Im nächsten Schritt sollten Sie die CSS-Datei umbenennen und in den HTML-Dateien die Links ändern.

CSS-Jonglieren

Individuell gestaltetes Fotoblog

In diesem Workshop soll vor allem die Bildansicht gestaltet werden. Dazu öffnen Sie die Datei image_template.html in einem Editor. Anschließend geht es daran, die Inhalte zu strukturieren. Dazu erstellen Sie innerhalb des äußersten div-Blocks mit der ID wrapper zwei weitere div-Blöcke für die linke und rechte Spalte. Im Stylesheet erhöhen Sie die Breite des #wrapper-Elements auf 900 Pixel. Dann fügen Sie die linke und rechte Spalte hinzu:


#spalte_links {
width: 660px;
float: left;
}
#spalte_rechts {
margin-left: 660px;
width: 220px;
padding-top: 10px;
}


Wenn beide Spalten stehen, müssen Sie die einzelnen Bereiche und Platzhalter jeweils den richtigen Spalten zuordnen. Hier macht die rechte Spalte den Anfang.

Im vorliegenden Beispiel soll der Kalender () in die rechte Spalte. Vorsicht: Der Kalender muss auch in den Optionen im Pixelpost-Backend eingeschaltet sein.

Nach dem Kalender folgen die EXIF-Daten. Das sind die von der Kamera gespeicherten Bildinformationen. Pixelpost liest diese automatisch ein – und zwar mittels des Open-Source-Tools Exifer 1.5. Um sie ins Template einzufügen, verwenden Sie die folgenden Platzhalter:

Der div-Kasten enthält eine ID und die CSS-Klasse rahmen. Sie dient dazu, für Elemente in der rechten Spalte den im Layout vorgesehen Rahmen zu produzieren:


.rahmen {
border: 1px #808080 solid;
padding: 5px;
margin-bottom: 10px;
}


Als Nächstes folgt auf der rechten Seite eine Auswahl aus aktuellen Bildern. Hier erhält jedes Bild einzeln einen Rahmen:


#image_auswahl img {
border: 1px #808080 solid;
padding: 5px;
margin-bottom: 5px;
margin-right: 5px;
}


Identifiziert werden die Bilder durch die ID des div-Containers. Als Platzhalter dient . Auf der rechten Seite folgen eine Liste mit Kategorien und Links zur RSS- und Atom-Version des Blogs:

KATEGORIEN:

Die Links auf RSS und Atom können Sie auch mit den Platzhaltern und eintragen lassen, allerdings nur als Text-Link.

Content-Spalte

Individuell gestaltetes Fotoblog

Im Inhaltsbereich fügen Sie zuerst ein Logo für das Blog ein. Im vorliegenden Beispiel ist dies eine Grafik mit einem Schriftzug. Anschließend folgt der Titel des Bildes mit dem gewohnten Rahmen:

Als Informationen werden hier per Platzhalter der Titel selbst in einer h1-Überschrift und dann Datum und Kategorie ausgegeben. Vor allem die Überschrift wird im CSS noch einmal speziell formatiert:


#image-info h1 {
margin: 0px;
margin-top: 5px;
padding: 0px;
font-size: 1.5em;
font-weight: bold;
text-transform: uppercase;
color: #808080;
}


Das eigentliche Bild besteht aus einem Link, der immer auf das zeitlich vorangegangene Bild verweist. Zwischen den Bildern springen Sie außerdem mit den über dem Bild angeordneten Links:

Unter dem Bild folgen dann noch ein Text vom Fotografen () und der Kommentarbereich (). Bei Letzterem behalten Sie einfach die Javascript-Funktion aus dem grundlegenden Template, die dafür sorgt, dass ein Kommentarformular ein- und ausgeblendet wird.

Add-ons

Individuell gestaltetes Fotoblog

Ähnlich wie für die meisten anderen Blog-Anwendungen gibt es auch für Pixelpost einige sinnvolle Erweiterungen. Zum einen sind hier natürlich viele frei verfügbare Templates zu nennen, zum anderen gibt es auch empfehlenswerte Add-ons. Dazu gehört beispielsweise ein Plug-in für Slideshows und eines, das die zuletzt hinzugefügten Bilder zeigt. Die meisten Erweiterungen implementieren neue Platzhalter-Tags, die Sie dann einfach in das Template übernehmen. Eine praktische und häufig eingesetzte Idee ist auch ein Template-Switcher. Wenn ein Bild vor einem bestimmten Hintergrund nicht wirkt, lässt sich beispielsweise schnell und komfortabel die Hintergrundfarbe wechseln. Dies wird meist mit einem einfachen CSS-Wechsel in Javascript realisiert.