Einfache PHP Fotogalerie ohne SQL-Datenbank
Die Fotogalerien dieser Webseite werden mit einem einfachen PHP-Fotogalerie-Script ohne SQL-Datenbank generiert. Dabei werden die Vorschaubilder und die Darstellung automatisch erstellt. Für die Darstellung der Bilder selbst, wird "slimbox2", ein optischer Klon der populären Lightbox verwendet. Slimbox2 ist ein javascript und benutzt die jQuery library. Die ganze Galerie ist mit CSS gestaltet. Wenige Erweiterungen für die Foto-Tabelle sind von mir in ein einfaches und gut strukturiertes Template von Andreas Viklund eingebetet. Die Foto-Tabellen Erweiterungen können auch für sich in ein beliebiges anderes Template übernommen werden.
Eine Demo der Fotogalerie gleich an dieser Stelle. Einfach ein Vorschaubild anklicken und sich mit der Lightbox durch die Bilder vor- und zurück-navigieren.
 Bild 1 |
 Bild 2 |
 Bild 3 |
 Bild 4 |
Von der Idee zum PHP Script
Jahrelang gestaltete ich Webseiten mit meinen privaten Ferienfotos auf einem Webserver einer schweizer Telecom. Dieses kostenlose Webangebot erlaubte keine SQL-Datenbank, aber PHP war verfügbar. Die Seiten selbst in HTML geschrieben und die Fotos in Tabellen von Hand eingebettet. Nun war etwas mehr Automatismus gefragt, es sollte aber nicht grad ein CMS wie z.B Joomla oder eine Blogsoftware wie z.B. Wordpress sein. Diese CMS sind einiges komplexer und brauchen auch Pflege und regelmässige Updates. So kamen etwa die folgenden Punkt zusammen, die erfüllt werden sollten:
- möglichst einfach und ohne Datenbank
- eine Seite pro Galerie
- jede Galerie in einem eigenen Ordner
- die Fotos in einem Ordner "images" und die Thumbnails im Ordner "tn"
- eine Funktion 'fotos' liest "tn" aus und erstellt die Tabelle mit Links zu den Fotos
- die Anzahl Bilder pro Zeile und Ordnernamen können mitgegeben werden
- im File titel.txt können pro Bild eine Zeile Text für den Titel mitgegeben werden
- eine Funktion 'makethumb' erstellt die Thumbnails in "tn" wenn sie noch nicht existieren
- die Thumbnails werden quadratisch zugeschnitten aus den Breit- oder Hoch-formatbildern
- Header, Navigation und Menue werden mit includes von einem zentralen Ort hinzugefügt
plFotogalerie index.php
Die wichtigsten Zeilen des index-Files
Header und Navigation einlesen
<?php readfile("../include/head-navi.html"); ?>
<div id="content">
Hier folgt der Inhalt mit Titel, Text usw.
<?php
// Fotofunktionen makethumb und fotos
include "../include/fn-fotos.php";
// makethumb (string $tndir, string $imgdir, int $width, int $stretch)
// mit den Defaultwerten ./tn, ./images, 125px, 1
makethumb ("tn", "images", 120, 0);
// fotos (int, $perRow, string $tndir, string $imgdir, int $titel)
// mit den Defaultwerten 4, ./tn, ./images, 0
fotos(4, "tn", "images", 1);
?>
</div>
Menue und Footer einlesen
<?php readfile("../include/menu-footer.html"); ?>
makethumb
Die Funktion makethumb generiert die Vorschaubilder automatisch aus den Fotos. Dabei werden Files mit Endung .jpg oder .JPG berücksichtigt. Weil die Darstellung der Thumbnails schöner ist, wenn sie quadratisch sind, werden entsprechende Ausschnitte gewählt. Mit dem Argument stretch steuert man, ob die Bilder qaudratisch, quadratisch und etwas gezogen, oder im Orginal Seitenverhältnis kreiert werden. Etwas gezogen heisst die längere Bildkannte wird mit einem Faktor gestreckt. Dieser Faktor ist die Quadratwurzel aus dem Seitenverhältnis Länge zu Breite. Bilder die im Orginal schon ein quadratisches Format haben, dürfen nicht gestreckt werden, sonst gibt es schwarze Ränder in den Thumbnails.
makethumb (string $tndir, string $imgdir, int $width, int $stretch)
-
$tndir = Thumbnail-Directory
$imgdir = Foto-Directory
$width = Länge in Pixel
$stretch=0, Bilder quadratisch
$stretch=1, Bilder quadratisch Ausschnitt etwas gezogen
$stretch=2, Bilder im Orginalseitenverhältnis
Für die Gröse der Fotos ist 600 Pixel ein guter Wert und die Thumbnails sind mit 120 Pixel optimal. Es haben dann genau 4 Bilder pro Zeile Platz.
Beim ersten Aufruf, wenn die Thumbnails produziert werden, schreibt die Prozedur die Grösse der Bilder heraus, danach nicht nicht mehr. Der Effekt der verschiedenen stretch-Werte sieht man in diesem Beispiel.
Für die Bildbearbeitung schneiden und verkleinern sind aus der PHP GD-Library die zwei Funktionen 'imagecreatetruecolor' und 'imagecopyresampled' zuständig. Die Bildqualität dieser beiden neueren Funktionen ist viel besser gegenüber 'imagecreate' und 'imagecopyresized' von älteren PHP Versionen.
fotos
Die Funktion 'fotos' generiert die Tabelle der Vorschaubilder mit den Links zu den Fotos und dem Text unter den Bildern. Die Anzahl Bilder pro Zeile können mitgegeben werden, ebenso die Directory-Namen wo sich die Thumbnails und die Fotos befinden. Sollen unter den Thumbnails Titel platziert werden, muss im Thumbnail-Directory ein Textfile mit dem Namen "titel.txt" abgelegt werden. In diesem File steht eine Zeile Textbeschreibung pro Bild. Diese werden stur der Reihe nach ausgegeben. Wichtig ist also die Reihenfolge der Bilder, die sind übrigens alphabetisch sortiert.
fotos (int, $perRow, string $tndir, string $imgdir, int $titel)
-
$perRow = Anzahl Bilder pro Zeile
$tndir = Thumbnail-Directory
$imgdir = Foto-Directory
$titel=0, keine Titel
$titel=1, pro Bild einen Titeltext ausgeben
Format: Text pro Bild ist je eine Zeile im File tndir/titel.txt
Die Tabelle wird mit der CSS class="foto" bestückt, so kann das Aussehen der Galerie im CSS-File definiert werden.