Brossmann Webpublishing

Werkzeuge für Selbermacher

Polaroid Fotos

Auf Ihren Webseiten gibt es Fotos zu sehen? Sie möchten Ihre Bilder in einem etwas ausgefalleneren Rahmen präsentieren? – Wie wäre es mit Aufnahmen im Polaroidstil?

Polaroid ist eine Klassenbibliothek auf Basis CSS, die Bildern, die darüber eingefügt werden, das Aussehen klassischer Polaroids verleiht. Die aktuelle Version des Style Sheets können Sie sich zusammen mit einigen zusätzlichen Helferchen kostenfrei und zur freien Verwendung auf Ihren Rechner laden: Polaroid V1.0 — Bitte beachten Sie in diesem Zusammenhang meine Anmerkungen zum Urheberrecht.

Detailinformation

Der Clou an Polaroid besteht in der Tatsache, dass der gesamte Bilderrahmen zwar aussieht wie eine einzige Grafik, tatsächlich aber ausschließlich über CSS dargestellt wird. Natürlich könnte man den Effekt universeller über verschachtelte Tabellen erzielen. Doch wer sich mit den Vorteilen von Cascading Style Sheets etwa für Sprachbrowser und sonstige spezielle Ausgabegeräte befasst hat, wird die Eleganz dieser Lösung sicher zu schätzen wissen. (Lesen Sie dazu auch meinen Artikel über den Vergleich zwischen CSS und Tabellen.)

Die Grafiken, die für den Rahmen verwendet werden, setzen voraus, dass die Polaroids möglichst auf weißem, zumindest aber auf sehr hellem Hintergrund angezeigt werden.

Außerdem sollten die zu rahmenden Bilder weder zu klein, noch zu groß sein, um den typischen Polaroideffekt zu erzielen (siehe Gegenbeispiel); am besten eignen sich als Polaroids möglichst quadratische Fotos mit Kantenlängen zwischen 150 bis 350 Pixeln. Für andere Formate können die Klassen im Style Sheet angepasst werden. Sie sollten sich die Breite der Rahmen um das Foto ansehen und die Werte in polaroid.css so abändern, dass die Größenverhältnisse zu den Bilddimensionen passen.

Jedes Einzelbild wird in ein Set aus geschachtelten DIVs eingebunden, die für die gerahmte Darstellung sorgen. Auf Browsern, die CSS nicht interpretieren, erscheinen die Bilder so, als sei kein Rahmen definiert. Voraussetzung für eine korrekte Anzeige ist CSS 2.0.

Für Nutzer von PHP gibt es zusätzlich eine Funktion, die das Generieren der notwendigen HTML-Tags automatisch erledigt. Näheres dazu findet sich in den folgenden Absätzen über das Einbinden des Style Sheets.

Einbinden in HTML-Quelltext

(1) Legen Sie im ersten Schritt nach dem Entpacken des Archivs die Datei polaroid.css und alle acht beiligenden Minigrafiken im .png-Format in einem Verzeichnis auf Ihrem Server ab. Wenn Sie die Grafiken nicht im gleichen Verzeichnis speichern möchten wie das Style Sheet, müssen Sie in polaroid.css die Pfade zu den Grafiken entsprechend abändern.

(2)Zusammen mit dem Style Sheet und den Rahmengrafiken haben Sie noch weitere Dateien im Archiv erhalten. Sehen Sie sich nun example.html an. Dort sehen Sie, wie Sie das Style Sheet polaroid.css im HEAD-Bereich Ihres HTML-Quelltextes einbinden. Verwenden Sie dabei den Verzeichnispfad, in dem Sie polaroid.css abgelegt haben.
Im BODY-Bereich sehen Sie, wie einzelne Fotos in Polaroid-Rahmen platziert werden. Sie können die Datei example.html von der Festplatte mit Ihrem Browser öffnen und die Darstellung ausprobieren. Dazu liegt eine Beispielgrafik foto.jpg bei.

(3) Beachten Sie beim Einbinden in den HTML-Quelltext, dass Größenangaben der Grafik in abgewandelter Form in den CSS-Rahmen übernommen werden müssen. Im Kodebeispiel steht BBB für die Breite des Bildes in Pixeln plus 38 Bildpunkte, und HHH für die Höhe des Bildes plus 2 Bildpunkte:

<div class="polaroid" style="width: BBBpx;">
[...]
<div class="plr_chest" style="height: HHHpx;">

Beispiel: Das Foto am Seitenanfang ist 180×180 Pixel groß. Um es korrekt einzubinden, müssten Sie für BBB den Wert 218 und für HHH den Wert 182 einsetzen.

(4) Sie können eine kurze Bildunterschrift hinzufügen, die auf dem breiten Unterrand des Polaroids erscheint. Dieser Text ist einzeilig angelegt, darf also nicht zu lang sein. (Wünschen Sie zweizeilige Legenden, muss das Style Sheet entsprechend angepasst werden.)

(4) Das Erzeugen des HTML-Kodes ist zugegebenermaßen recht zeitaufwändig, wenn man mehrere Bilder als Polaroids anzeigen möchte. Deshalb gibt es für diejenigen, deren Webspace über PHP verfügt, eine Funktion, die den HTML-Rahmen der Polaroids samt Foto automatisch erzeugt. Die Funktion liegt dem Archiv als polaroid.inc bei.

Binden Sie diese Datei wie üblich mit <?php include( "polaroid.inc" ); ?> ein. Danach steht Ihnen die Funktion polaroid() zur Verfügung. Rufen Sie sie wie folgt auf:

<?php
   print( polaroid( "grafikdateipfad", "Bildunterschrift", Breite, Höhe ) );
?>

Breite und Höhe beziehen sich auf die Dimensionen der Grafikdatei und sind in Pixel anzugeben. Falls der Wert von grafikdateipfad relativ ist, kann man auf die Angabe von Breite und Höhe verzichten und PHP die Arbeit machen lassen. Die Funktion berechnet die Dimensionen in diesem Fall automatisch.

Verzichtet man auf eine Bildunterschrift, kann auch dieser Parameter weggelassen werden. Als einfachst möglicher Funktionsaufruf bleibt also folgendes Fragment übrig:

<?php
   print( polaroid( "grafikdateipfad" ) );
?>

Im Fehlerfall – wenn der Dateipfad absolut angegeben wird, aber Höhe und Breite fehlen –, gibt die Funktion Bild und Bildunterschrift nackt, ohne Polaroidrahmen, zurück.