Bildergalerie-Website erstellen: von Domain und Webspace zur fertigen Galerie

 

Eine eigene Bildergalerie-Website zeigt Ihre Fotos unter Ihrer Domain, in Ihrer Ordnung und ohne die Regeln einer fremden Plattform. Der Fotograf stellt dort seine Arbeiten vor, der Verein die Bilder vom Sommerfest, die Familie die Reisealben. Ein kostenloses Bildergalerie Script übernimmt Kategorien, Vorschaubilder und die große Ansicht. Diese Anleitung führt vom Webspace-Tarif über die Installation bis zur fertigen Bildergalerie-Website, die wie ein Teil Ihrer Homepage aussieht.

Grafikdesigner an einem Schreibtisch mit zwei Laptops, Farbpaletten und Entwürfen

Programmieren müssen Sie nicht. Das Bildergalerie-Script ist eine eigenständige PHP-Anwendung: Sie laden es auf Ihren Webspace, richten es im Browser ein und pflegen Kategorien und Bilder danach in einer passwortgeschützten Verwaltung. Besucher sehen die Kategorien als Kacheln, darin die Vorschaubilder, und öffnen ein Foto per Klick groß in einer Lightbox über der Seite.

Klären Sie vorher, was Ihre Bildergalerie-Website leisten soll. Wer Abzüge oder Lizenzen verkaufen will, braucht ein Shopsystem, denn einen Warenkorb hat die Galerie nicht. Jede Kategorie bekommt einen Namen, eine Beschreibung und einen eigenen Ordner auf dem Server. Unterkategorien, eine Suche und Schlagwörter gibt es nicht. Planen Sie die Kategorien deshalb so, dass Besucher sich durch einen Blick auf die Startseite zurechtfinden.

Galerie-Script oder WordPress?

Bei „Website erstellen“ denken viele zuerst an WordPress, Joomla oder einen Baukasten. Die Systeme können viel, verlangen aber, dass Sie sich in Themes, Erweiterungen und deren Updates einarbeiten. Für eine reine Bildergalerie-Website ist ein schlankes Galerie-Script schneller eingerichtet und braucht weniger Pflege. Der Unterschied liegt im Ablauf. In WordPress landen alle Bilder zuerst in einer gemeinsamen Mediathek, aus der Sie sie Beitrag für Beitrag in Galerien einsetzen. Das ist flexibel, bei 800 Urlaubsfotos aber Fleißarbeit. Im Bildergalerie-Script gehört jedes Bild vom Hochladen an zu einer Kategorie und liegt in deren Ordner. Dafür ist die Reihenfolge fest: Kategorien und Bilder erscheinen so, wie Sie sie angelegt und hochgeladen haben, verschieben oder umsortieren lässt sich nichts. Haben Sie schon eine WordPress-Seite, läuft die Galerie in einem eigenen Ordner daneben, ein Plugin für WordPress gibt es nicht.

Was eine Bildergalerie-Website technisch braucht

Das folgende Video gibt einen ersten Eindruck davon, wie eine Galerie auf der eigenen Homepage entsteht.

Technisch besteht die Seite aus drei Teilen: der Domain, unter der Besucher Sie finden, dem Webspace für Script und Bilder und einer MySQL- oder MariaDB-Datenbank für Kategorien, Beschreibungen und Einstellungen. Fast jeder Webhoster bietet alle drei im selben Tarif an. Eine eigene Domain ist nicht nötig, wenn Sie schon eine haben: Die Galerie läuft in einem Unterordner wie /galerie/. Diese Werte sollte der Tarif erfüllen:

BestandteilWas das Bildergalerie-Script braucht
PHPVersion 8.2 bis 8.5, mit den Erweiterungen GD (JPEG, PNG und GIF), mysqli und mbstring, exif empfohlen
DatenbankMySQL 5.7 oder neuer, alternativ MariaDB 10.2 oder neuer, eine leere Datenbank
WebserverApache empfohlen, weil die mitgelieferten .htaccess-Dateien die Ordner schützen; unter Nginx bilden Sie diese Sperren selbst nach
Speicherplatzetwa 5 MB für das Script, dazu Platz für Ihre Bilder

Ob alles passt, müssen Sie nicht selbst herausfinden. Der Installer prüft PHP-Version, Erweiterungen und Schreibrechte und nennt fehlende Punkte mit einer Anleitung. Den Speicherplatz schätzen Sie mit Ihren eigenen Fotos ab: Ein Handyfoto mit 12 Megapixeln ist als JPEG meist 3 bis 5 MB groß, 500 davon belegen rund 2 GB. Vorschaubilder und Lightbox-Kopien fallen daneben kaum ins Gewicht.

Wichtiger als die Technik ist die Auswahl. Alle Bilder einer Kategorie stehen auf einer einzigen Seite, eine Aufteilung auf mehrere Seiten gibt es nicht. Eine Kategorie mit 30 starken Fotos lädt schnell und wirkt besser als eine mit 300 ähnlichen Aufnahmen. Teilen Sie große Bestände nach Jahr, Ort oder Anlass. Einen Überblick über Funktionen und Aufbau gibt die Seite Foto Galerie Skript vor.

Die Galerie installieren

Sie brauchen ein FTP-Programm wie FileZilla oder den Dateimanager Ihres Webhosters und die Zugangsdaten einer leeren Datenbank, die Sie vorher im Kundenmenü anlegen. Ein Standard-Passwort gibt es nicht, die Zugangsdaten der Verwaltung legen Sie im vierten Schritt selbst fest.

  1. Das Paket entpacken und alle Ordner und Dateien per FTP auf den Webspace laden, zum Beispiel in einen Ordner galerie. Die .htaccess-Dateien müssen mit, vor allem bilder/.htaccess. Manche FTP-Programme blenden Dateien mit einem Punkt am Anfang aus.
  2. Für die Ordner bilder, bilder/tn, cache und inc Schreibrechte setzen, meist 755, bei manchen Webhostern 775.
  3. Im Browser https://www.ihre-domain.de/galerie/install/ aufrufen und die Systemprüfung abwarten. Steht dort „Systemprüfung bestanden“, erscheint das Formular.
  4. Benutzername und Passwort für die Verwaltung (mindestens 8 Zeichen) sowie die Datenbankdaten eintragen und auf „Jetzt installieren“ klicken. Dabei entsteht die Datei inc/config.php.
  5. Auf der Erfolgsseite „Installationsordner jetzt löschen“ klicken.

Danach erreichen Sie die Galerie unter https://www.ihre-domain.de/galerie/bildergalerie.php und die Verwaltung unter https://www.ihre-domain.de/galerie/admin/. Meldet der Installer „Der Datenbank-Server lehnt die Anmeldung ab“, stimmen Datenbank-Benutzer oder Passwort nicht. Bleibt die Seite leer und weiß, ist meist die PHP-Version zu alt; die stellen Sie im Kundenmenü um.

Warum der fünfte Schritt Pflicht ist, zeigt das Diagramm. Bei jedem Aufruf von admin/ prüft das Script zuerst, ob es inc/config.php gibt, und leitet sonst zum Installer weiter. Liegt danach noch install/index.php auf dem Server, erscheint statt der Anmeldung nur der Hinweis „Bitte löschen Sie den Ordner „install““, denn über einen offenen Installer könnte jeder die Galerie neu einrichten. Meldet der Knopf auf der Erfolgsseite „Der Ordner „install“ konnte nicht vollständig gelöscht werden.“, löschen Sie ihn per FTP und klicken auf der Hinweisseite auf „Erneut prüfen“. Erst dann erscheint die Anmeldung.

Was admin/ bei jedem Aufruf prüft Aufruf von admin/ 1 Ist inc/config.php vorhanden? nein zum Installer Schritt 3 und 4 ja weiter mit Frage 2 2 Liegt install/index.php noch auf dem Server? ja: Sperrseite „Bitte löschen Sie den Ordner install“ Schritt 5: install/ löschen, dann „Erneut prüfen“ nein: Anmeldung Benutzername und Passwort Stand admin/ zeigt vor Schritt 4 den Installer nach Schritt 4 die Sperrseite nach Schritt 5 die Anmeldung Die Anmeldung erscheint erst, wenn inc/config.php existiert und der Ordner install/ gelöscht ist.
Erst Schritt 4 legt inc/config.php an, erst Schritt 5 gibt mit dem gelöschten Ordner install/ die Anmeldung frei.

Kategorien anlegen und Fotos hochladen

Nach der Anmeldung legen Sie unter „Kategorie anlegen“ die erste Kategorie an. Den Ordnernamen schlägt die Seite beim Tippen vor: Aus „Thüringer Wald“ wird thueringer-wald, aus „Sommerurlaub 2024“ wird sommerurlaub-2024. Umlaute werden ausgeschrieben, Sonder- und Leerzeichen zu Bindestrichen, mehr als 80 Zeichen sind nicht erlaubt. Nach derselben Regel benennt die Galerie Ihre Bilder. Eine Kategorie ohne Bilder bleibt in der Galerie unsichtbar, bis Sie in den „Einstellungen“ „Leere Kategorien anzeigen“ einschalten.

Unter „Bilder hochladen“ wählen Sie die Kategorie und ziehen mehrere Fotos gleichzeitig auf die Ablagefläche. Angenommen werden JPEG, PNG und GIF; WebP und HEIC vom iPhone lehnt die Galerie mit einer eigenen Meldung ab, solche Fotos speichern Sie vorher als JPEG. Unter der Fläche steht, was Ihr Webhoster zulässt, etwa „Ihr Webhoster erlaubt höchstens 20 MB je Bild, 64 MB je Vorgang und 30 Bilder auf einmal.“ Ist „Dateiname als Beschreibung“ eingeschaltet (Standard), entsteht die Beschreibung aus dem Dateinamen; Kameranamen wie IMG_1234 oder DSC01234 ergeben keine.

Für große Mengen gibt es den FTP-Import. Sie laden die Bilder per FTP in den Ordner der Kategorie, etwa bilder/herbst/, und klicken unter „Bilder verwalten“ auf „Per FTP hochgeladene Bilder übernehmen“. Je Klick übernimmt die Galerie höchstens 100 Bilder. Bei 450 Urlaubsfotos klicken Sie also fünfmal, und die Seite meldet jedes Mal, wie viele noch warten.

Fotos vor dem Hochladen vorbereiten

Zuschneiden, Helligkeit, Kontrast oder ein Wasserzeichen erledigen Sie vorher in einem Bildprogramm, denn die Galerie bearbeitet Ihre Fotos nicht. Hochformat-Fotos vom Handy dreht sie anhand der EXIF-Angabe selbst richtig, und die verkleinerten Fassungen erzeugt sie auch. Ein Rechenbeispiel mit den Standardwerten: Sie laden ein Foto mit 4000 × 3000 Pixeln hoch. Das Vorschaubild wird in einen Rahmen von 200 × 200 Pixeln eingepasst und ist danach 200 × 150 Pixel groß. Für die große Ansicht entsteht eine Kopie mit höchstens 1024 × 1024 Pixeln, hier also 1024 × 768. Besucher laden in der Lightbox nur diese Kopie, Ihr Original bleibt unverändert auf dem Server. Die Werte ändern Sie unter „Einstellungen“ in den Abschnitten „Vorschaubilder“ und „Große Ansicht (Lightbox)“. Was aus einem einzelnen Foto beim Hochladen entsteht, zeigt das zweite Diagramm am Beispiel der Kürbisse.

Was aus einem hochgeladenen Foto in der Galerie wird Ihr Foto Kürbisse vor der Scheune.jpg 4000 × 3000 Pixel Upload in Kategorie 3 „Herbst“ Namensregel kuerbisse-vor-der-scheune.jpg Ein Foto, vier Ergebnisse 1 Original 4000 × 3000 bilder/herbst/ unverändert 2 Vorschaubild 200 × 150 bilder/tn/tn3_… 3 Lightbox-Kopie 1024 × 768 bilder/tn/ob_3_… 4 Beschreibung „Kürbisse vor der Scheune“ dient als alt-Text und Bildunterschrift Die Übersicht zeigt nur das Vorschaubild.
Ein hochgeladenes Foto ergibt Original, Vorschaubild, Lightbox-Kopie und Beschreibung.

Das Design an die eigene Homepage anpassen

Designer am Laptop vor abstrakten Gemälden in Blau, Orange und BeigeEine Einstellung für das Design gibt es in der Verwaltung nicht, das Aussehen steckt in zwei Dateien. Die Vorlage tpl/bildergalerie.html bildet den Rahmen der Seite, an der Stelle des Platzhalters {AUSGABE_BILDERGALERIE} setzt die Galerie ihren Inhalt ein. Das Stylesheet css/layout.css legt Farben, Schrift, Abstände und das Raster der Vorschaubilder fest. Übernehmen Sie Logo, Menü und Fußzeile Ihrer Homepage in die Vorlage, dann wirkt die Galerie wie ein Teil Ihrer Website. Speichern Sie die Vorlage in UTF-8, denn die Galerie sendet ihre Seiten in diesem Zeichensatz. Auf Bildschirmen bis 600 Pixel Breite stehen die Vorschaubilder immer in zwei Spalten.

Drei Stellschrauben bestimmen den Eindruck am stärksten:

  • Farben: Ein ruhiger, heller Hintergrund für die Kacheln (.kategorie_kachel) lässt farbige Fotos stärker wirken als ein bunter Rahmen.
  • Raster: Wie viele Vorschaubilder nebeneinander stehen, legen Sie unter „Einstellungen“ bei „Vorschaubilder pro Zeile“ fest, erlaubt sind 1 bis 20, Standard ist 2. Bei Vorschaubildern mit 200 Pixeln Breite passen vier in eine Seite mit 900 Pixeln Inhaltsbreite.
  • Schrift: Ab Werk nutzt css/layout.css die Systemschrift des Geräts. Kategorienamen auf der Startseite tragen die Klasse p.ueberschrift_startseite_text, die Beschreibung auf der Kategorieseite p.beschreibung_kategorie_text.

Eigene Regeln schreiben Sie am besten in eine eigene CSS-Datei, die Sie in der Vorlage nach layout.css einbinden, etwa /css/meine-website.css. Ein Update ersetzt css/layout.css und tpl/bildergalerie.html. Ihre eigene CSS-Datei bleibt unberührt, die angepasste Vorlage spielen Sie aus der Sicherung zurück.

Die Galerie mit Ihrer Homepage verbinden

Die Galerie ist eine eigene Seite, bildergalerie.php. Am zuverlässigsten verbinden Sie sie über einen Menüpunkt, der auf /galerie/bildergalerie.php zeigt. Einzelne Kategorien verlinken Sie direkt, etwa mit bildergalerie.php?kid=3 für die Kategorie mit der Nummer 3. Die Nummer sehen Sie in der Adresszeile, wenn Sie die Kategorie in der Galerie öffnen. Ein iframe in einer bestehenden Seite geht auch, hat aber Nachteile: Seine Höhe ist fest, lange Kategorien bekommen einen eigenen Rollbalken, und die Lightbox öffnet sich nur innerhalb des Rahmens. Ein PHP-include aus einem anderen Ordner funktioniert nicht, weil die Galerie ihre Dateien über relative Pfade lädt und ein vollständiges HTML-Dokument ausgibt.

Dieselben Kategorie-Links eignen sich für Instagram oder Facebook: Ein Link wie bildergalerie.php?kid=3 im Profil führt direkt zu den passenden Fotos, Teilen-Knöpfe hat die Galerie nicht. Die Plattform bleibt so das Schaufenster, Ihre Bildergalerie-Website der Ort, an dem die Bilder geordnet und in voller Qualität liegen. Meta-Angaben für die Linkvorschau schreiben Sie in den <head> der Vorlage, sie gelten dann für alle Galerieseiten gleich.

Damit Suchmaschinen Ihre Bildergalerie-Website finden

Suchmaschinen können ein Foto nicht ansehen, sie lesen Namen, Beschreibungen und Dateinamen. Das Video erklärt die Grundlagen, danach folgt, wo Sie diese Angaben in der Galerie pflegen.

Geben Sie jeder Kategorie einen Namen, der beschreibt, was zu sehen ist, und nach dem Menschen auch suchen würden. „Thüringer Wald im Herbst“ sagt mehr als „Album 3“. Der Name erscheint dreimal: als Überschrift der Kategorie, im Seitentitel („Bildergalerie – Thüringer Wald im Herbst“) und, umgeschrieben nach der Namensregel, im Ordnernamen. Schreiben Sie Beschreibungen in ganzen Sätzen statt als Reihe von Schlüsselwörtern.

Alt-Text und Dateinamen

Der Alternativtext beschreibt den Inhalt eines Bildes für Suchmaschinen und für Menschen, die sich Seiten vorlesen lassen. Getrennt pflegen müssen Sie ihn nicht: Die Beschreibung eines Bildes erscheint als Bildunterschrift in der Lightbox und zugleich als alt-Text des Vorschaubilds. Jede Beschreibung, die Sie unter „Bilder verwalten“ eintragen (höchstens 500 Zeichen), verbessert also beides. Sprechende Dateinamen helfen doppelt. Aus „Kürbisse vor der Scheune.jpg“ entstehen der Dateiname kuerbisse-vor-der-scheune.jpg und die Beschreibung „Kürbisse vor der Scheune“. Benennen Sie Ihre Fotos deshalb vor dem Hochladen um, denn umbenennen lassen sie sich danach nicht. Eine Sitemap, eine eigene Meta-Beschreibung je Kategorie oder strukturierte Daten erzeugt die Galerie nicht.

Wartung, Updates und Datensicherung

Eine Bildergalerie-Website bleibt nur sicher, wenn Sie sie pflegen. Halten Sie die PHP-Version bei Ihrem Webhoster aktuell und spielen Sie neue Versionen des Scripts ein, sobald sie erscheinen. Beim Update überschreiben Sie die vorhandenen Dateien mit denen aus dem neuen Paket. Ihre inc/config.php ist nicht darin und bleibt erhalten. Den mitgelieferten Ordner install löschen Sie danach wieder, sonst greift die Sperre aus dem Diagramm oben. Die Anmeldung schützt das Script selbst: Nach fünf Fehlversuchen sperrt es sie für fünf Minuten, und nach 60 Minuten ohne Aktivität meldet die Verwaltung Sie ab.

Vor jedem Update steht eine Datensicherung aus drei Teilen: die Datenbank, die Sie in phpMyAdmin exportieren, der Ordner bilder/ mit allen Unterordnern und die Datei inc/config.php. Wer das Design angepasst hat, sichert zusätzlich tpl/bildergalerie.html und die eigene CSS-Datei. Bewahren Sie die Sicherung außerhalb des Webspace auf. Wie Sie die Galerie Schritt für Schritt ausbauen, beschreibt der Ratgeber Bildergalerie erstellen.

Eine Besucherstatistik ist nicht eingebaut, das Systemprotokoll hält nur Anmeldungen, Uploads, Löschungen und Änderungen fest. Besucherzahlen liefert die Statistik im Kundenmenü vieler Webhoster oder ein Zählcode in der Vorlage, der dann in die Datenschutzerklärung gehört. Kommentare und Bewertungen unter Bildern gibt es ebenfalls nicht. Wer gleich loslegen möchte, kann das Bildergalerie-Script kostenlos herunterladen und auf dem eigenen Webspace installieren.

Häufige Fragen

Diese Fragen kommen beim Aufbau einer Bildergalerie-Website mit dem Script am häufigsten.

Welche Bildformate kann ich hochladen?

JPEG, PNG und GIF. Die Galerie erkennt den Typ am Inhalt der Datei, nicht an der Endung. WebP, HEIC, AVIF, BMP und TIFF nimmt sie nicht an. Solche Bilder wandeln Sie vor dem Hochladen in JPEG um.

Können mehrere Personen die Galerie pflegen?

Ja, aber eine Benutzerverwaltung gibt es nicht. Weitere Zugänge legen Sie in der Tabelle admin der Datenbank an, etwa per phpMyAdmin. Alle Zugänge haben dieselben Rechte, und das Systemprotokoll zeigt, wer was geändert hat.

Was tue ich, wenn ich das Passwort vergessen habe?

Eine Funktion „Passwort vergessen“ gibt es nicht. Sie setzen das Passwort in der Tabelle admin neu, zum Beispiel per phpMyAdmin mit der SQL-Funktion MD5('NeuesPasswort'). Bei der nächsten Anmeldung stellt die Galerie den Wert selbst auf das sichere Verfahren bcrypt um.

Können Besucher meine Originalbilder herunterladen?

Grundsätzlich ja. Die Lightbox zeigt bei großen Fotos zwar nur die verkleinerte Kopie, das Original liegt aber weiter unter seiner Adresse im Ordner bilder/. Einen Kopierschutz oder ein Wasserzeichen bietet die Galerie nicht. Wer das braucht, lädt nur verkleinerte Fassungen mit eingearbeitetem Wasserzeichen hoch.

Fragen zu Fotos, Webspace oder Installation? Antworten finden Sie im Bildergalerie Ratgeber.