Eine Galerie in die Homepage einbinden

Die Galerie läuft, du hast sie unter ihrer eigenen Adresse getestet, die ersten Kategorien sind gefüllt. Jetzt fehlt die Verbindung zur Homepage, die du schon seit Jahren betreibst: Besucher sollen von dort zu den Fotos finden, und im besten Fall soll man gar nicht merken, dass die Bilder aus einem eigenen Programm kommen. Wie eng du die Galerie in die Homepage einbinden kannst, hängt weniger vom Geschmack ab als davon, womit deine Homepage gebaut ist und wo sie liegt. Hier findest du die Entscheidung, die passenden Codezeilen und die Stellen, an denen es in der Praxis meistens hakt.

Erst die eigene Homepage prüfen

Zwei Fragen entscheiden fast alles. Erstens: Liegen Homepage und Galerie auf demselben Webspace, also unter derselben Domain? Zweitens: Kannst du den HTML-Code deiner Homepage selbst bearbeiten, oder klickst du sie in einem Baukasten zusammen? Falls die Galerie noch gar nicht auf dem Webspace liegt, hilft dir die Anleitung zum FTP-Upload Schritt für Schritt. Öffne danach ihre Adresse einmal direkt im Browser und kopiere sie aus der Adresszeile. So vermeidest du Tippfehler in allen folgenden Beispielen. Wie du die Galerie in die Homepage einbinden solltest, ergibt sich dann aus dieser Tabelle:

Die meisten privaten Homepages fallen in die erste oder zweite Zeile. Wer seine Seite bei einem Baukasten-Anbieter hat, muss die Galerie ohnehin auf einem zweiten Webspace betreiben, weil der Baukasten keine eigenen PHP-Programme zulässt. Ein Plugin für WordPress oder andere CMS gibt es nicht, und ein Nachladen der Galerie per JavaScript wird ebenfalls nicht unterstützt.

Per Link: der robuste Weg

Der Link ist der unscheinbarste Weg und zugleich der, mit dem du am wenigsten Ärger hast. Deine Homepage bekommt einen Menüpunkt oder einen Textlink, und der Besucher wechselt beim Klick auf die Galerieseite. Die Galerie hat dort die volle Fensterbreite, die große Ansicht nutzt den ganzen Bildschirm, und jede Kategorie hat eine Adresse, die man weitergeben kann. Liegt das Script im Ordner /galerie/, sieht der Menüeintrag so aus:

<a href="/galerie/bildergalerie.php">Fotos vom Vereinsleben</a>

Verlinke immer die volle Adresse mit bildergalerie.php. Eine index.php liegt im Galerieordner nicht, ein Link auf /galerie/ zeigt je nach Server eine Fehlermeldung oder eine bloße Dateiliste. Liegt die Galerie auf einer anderen Domain als die Homepage, schreibst du die vollständige Adresse mit https:// davor.

Einzelne Kategorien verlinkst du über ihre Nummer. Auf einer Seite über eure Vereinsfeier führt /galerie/bildergalerie.php?kid=3 direkt zu den passenden Fotos. Die Nummer siehst du in der Adresszeile, wenn du die Kategorie in der Galerie öffnest. Löschst du die Kategorie später, leitet die Galerie diesen Link auf die Übersicht um, statt eine Fehlerseite zu zeigen. Dein Bericht über die Feier enthält also nie einen toten Link, schlimmstenfalls landet der Leser bei allen Kategorien.

Den Linktext wählst du nach dem, was die Besucher erwartet: „Fotos vom Sommerfest“ lockt mehr Klicks als „Galerie“. Ein Link kann deiner Homepage auch nichts kaputtmachen. Ist die Galerie wegen einer Wartung einmal nicht erreichbar, funktioniert der Rest deiner Seite weiter. Der Nachteil liegt nur in der Optik: Ohne angepasste Vorlage sieht der Besucher nach dem Klick ein anderes Design. Das behebt der nächste Schritt.

Galerie in die Homepage einbinden mit eigener Vorlage

Am saubersten wirkt die Kombination aus Link und angepasster Vorlage. Die Galerie bleibt eine eigene Seite mit eigener Adresse, trägt aber Kopf, Menü und Fußzeile deiner Homepage. Das Aussehen steuert die Datei tpl/bildergalerie.html im Galerieordner. Darin markiert der Platzhalter {AUSGABE_BILDERGALERIE} die Stelle, an der Kacheln und Vorschaubilder erscheinen. Alles drumherum ist gewöhnliches HTML, das du frei gestalten kannst. So sieht eine angepasste Vorlage für eine Homepage mit drei Menüpunkten aus:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bildergalerie {AUSGABE_KATEGORIE} | TSV Musterdorf</title>
<link href="./css/layout.css" rel="stylesheet" type="text/css">
<link href="./css/lightbox.css" rel="stylesheet" type="text/css" media="screen">
<link href="/css/meine-website.css" rel="stylesheet" type="text/css">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<header class="seitenkopf"> <a href="/">Start</a> <a href="/termine.html">Termine</a> <a href="/galerie/bildergalerie.php">Fotos</a>
</header>
<div class="div_center"> <div class="div_left">{AUSGABE_BILDERGALERIE}</div>
</div>
<footer class="seitenfuss">Impressum und Kontakt</footer>
</body>
</html>

Die Klassen seitenkopf und seitenfuss sind frei gewählt, du übernimmst hier einfach den Code deiner Homepage. Damit alles funktioniert, achte auf diese Punkte:

• Menülinks ab dem Hauptverzeichnis: Die Vorlage wird im Ordner /galerie/ ausgeliefert. Ein Link termine.html ohne Schrägstrich zeigt deshalb auf /galerie/termine.html und läuft ins Leere. Schreibe /termine.html.
• Eigenes CSS zuletzt: Dein Stylesheet bindest du mit einem Pfad ab dem Hauptverzeichnis ein und nach ./css/layout.css, damit deine Regeln gelten. Kurze Stilregeln gehören ebenfalls in diese Datei und nicht in die Vorlage: Der Platzhalter-Ersatz löscht jedes leere {} und jedes Wort in Großbuchstaben zwischen geschweiften Klammern.
• Skripte in fester Reihenfolge: prototype.js, dann scriptaculous.js, dann lightbox.js. Fehlt eine Zeile oder stimmt die Reihenfolge nicht, öffnet ein Klick auf ein Vorschaubild nur das nackte Bild.
• Ein einziges </body>: Vor diesem Tag setzt die Galerie ihren Hinweis „Copyright by Bildergalerie-Script.de“ ein, und zwar vor jedem Vorkommen. Lass es deshalb stehen und schreibe es nur einmal in die Vorlage, auch nicht zusätzlich in einen Kommentar.
• Vor jedem Update sichern: Eine neue Version überschreibt tpl/bildergalerie.html. Leg dir deshalb eine Kopie der angepassten Datei an.

Speichere die Vorlage als UTF-8, so wie das Original. Wie Vorlagen allgemein aufgebaut sind, erklärt die Seite Was ist ein Template.

Per iframe: Galerie im Rahmen

Willst du die Galerie in die Homepage einbinden, ohne dass der Besucher die Seite wechselt, bleibt der iframe. Damit sparst du in deiner Seite ein Rechteck aus, in dem die komplette Galerieseite läuft. Der Besucher bleibt auf deiner Homepage, Menü und Kopf bleiben sichtbar. Für ein CMS oder einen Baukasten ist das neben dem Link der einzige Weg. Das klingt nach der elegantesten Lösung, hat aber drei feste Nachteile:

• Feste Höhe: Der Rahmen ist so hoch, wie du ihn angibst. Die Galerie meldet ihre Höhe nicht an die umgebende Seite. Eine Kategorie mit 40 Vorschaubildern in zwei Spalten ist deutlich höher als eine mit vier und bekommt im Rahmen einen eigenen Rollbalken.
• Große Ansicht im Rahmen: Ein Klick auf ein Vorschaubild öffnet die vergrößerte Fassung nur innerhalb des Rahmens, nicht über deiner ganzen Seite. Ist der Rahmen 600 Pixel breit, wird das Foto höchstens so breit.
• Keine eigene Adresse: In der Adresszeile steht die Adresse deiner Homepage. Welche Kategorie gerade offen ist, sieht man dort nicht, ein Besucher kann sie also nicht direkt weitergeben.

Der Code dafür, mit einer Starthöhe von 800 Pixeln und ohne Rahmenlinie:

<iframe src="https://deine-domain.de/galerie/bildergalerie.php" title="Bildergalerie" style="width:100%; height:800px; border:0;"></iframe>

Das früher übliche Attribut frameborder brauchst du nicht mehr, die Angabe border:0 im style erledigt dasselbe. Das title-Attribut solltest du dagegen nie weglassen, Bildschirmleser lesen es vor. Die 800 Pixel sind nur ein Startwert. Vor dem Freischalten lohnt sich ein kurzer Test:

1. Höhe: Öffne die längste und die kürzeste Kategorie im Rahmen. Bei der kurzen sollte nicht zu viel Leerraum bleiben, bei der langen nichts Wichtiges abgeschnitten sein.
2. Handy: Wische auf dem Smartphone über den Rahmen. Ist die Kategorie höher als der Rahmen, rollt zuerst der Inhalt im Rahmen, und erst an dessen Ende bewegt sich die Seite weiter. Für den Besucher fühlt sich das an, als bliebe der Finger hängen. Abhilfe schafft ein höherer Rahmen oder auf dem Handy ein schlichter Link.
3. Leerer Rahmen: Zeigt der Rahmen nichts oder eine Fehlermeldung des Browsers, verbietet der Server der Galerie das Einbetten.

Der letzte Fall hat einen technischen Hintergrund. Ein Webserver kann mit dem Header X-Frame-Options festlegen, ob seine Seiten in fremden Rahmen erscheinen dürfen. Mit DENY ist das ganz verboten, mit SAMEORIGIN nur für Seiten derselben Domain erlaubt. Liegen Homepage und Galerie auf derselben Domain, reicht SAMEORIGIN. Liegt die Homepage woanders, etwa beim Baukasten, muss die Regel auf dem Webspace der Galerie gelockert werden, meist über die .htaccess. Neuere Browser beachten zusätzlich die Content-Security-Policy mit frame-ancestors, die denselben Zweck hat. Das Bildergalerie-Script selbst sendet für die Galerie keinen solchen Header, nur der Installer schützt sich so. Taucht er bei der Galerie auf, stammt er vom Webhoster oder aus einer eigenen Regel.

Was der Besucher bei den drei Wegen tatsächlich sieht, vergleicht das Diagramm. Entscheidend sind zwei Dinge: welche Adresse in der Adresszeile steht und wie viel Platz die große Ansicht nach einem Klick auf ein Vorschaubild bekommt.

Per PHP-include: warum es hier nicht geht

Besteht deine Homepage aus PHP-Dateien, liegt eine Abkürzung nahe: Warum nicht die Galerie in die Homepage einbinden wie jeden anderen Baustein, mit einer einzigen Zeile? PHP kennt dafür include und require. Beide fügen eine andere Datei an dieser Stelle ein und führen sie aus. Der Unterschied: Fehlt die Datei, macht include mit einer Warnung weiter, require bricht ab. Für eigene Bausteine deiner Homepage ist das genau richtig, etwa für einen Kopfbereich, den alle Seiten teilen:

<?php include __DIR__ . '/teile/kopfbereich.php'; ?>

Damit das klappt, muss die eingebundene Datei dafür gebaut sein. Sie darf nur einen Ausschnitt ausgeben, keine eigene vollständige Seite. Und sie muss ihre eigenen Dateien finden, obwohl sie aus einem anderen Ordner heraus aufgerufen wird. Hier wird es tückisch. Weitere include-Anweisungen mit relativem Pfad findet PHP oft noch, weil es nach dem include_path auch im Ordner der einbindenden Datei sucht. Dateifunktionen wie file_exists() oder fopen() rechnen relative Pfade dagegen immer vom Arbeitsverzeichnis aus, also vom Ordner der Seite, die der Besucher tatsächlich aufgerufen hat. Dazu kommen Namenskonflikte: Definieren Homepage und eingebundenes Programm eine Funktion mit demselben Namen, endet die Seite mit einem schweren Fehler.

Beim Bildergalerie-Script scheidet dieser Weg deshalb aus. bildergalerie.php prüft gleich zu Beginn mit file_exists('inc/config.php'), ob die Galerie eingerichtet ist. Aus deiner Startseite im Hauptverzeichnis eingebunden, sucht diese Prüfung im falschen Ordner und findet keine config.php. Was dann passiert, hängt davon ab, wo die include-Zeile steht. Ganz oben in der Datei, bevor irgendetwas ausgegeben wurde, leitet die Galerie den Besucher zum Installer um. Steht die Zeile mitten im HTML, sind die Kopfzeilen schon gesendet: Die Umleitung scheitert mit der Warnung „Cannot modify header information – headers already sent“, und weil die Galerie danach sofort abbricht, endet deine Seite an genau dieser Stelle. Selbst wenn die Pfade stimmten, gibt die Galerie eine vollständige HTML-Seite mit eigenem <head> aus, und eine Seite mitten in einer anderen ergibt kein gültiges Dokument. Für dein Design ist die angepasste Vorlage der richtige Weg.

Die Homepage gefahrlos umstellen

Ändere nie direkt die laufende Startseite. Mit einer Testkopie bleibt deine Homepage erreichbar, bis alles sitzt:

1. Die Startseite herunterladen und in einem Editor für Webdateien öffnen.
2. Link oder Rahmen einbauen und die Datei unter einem Testnamen wie test-start.html hochladen.
3. Die Testseite auf Rechner und Handy öffnen, die längste Kategorie aufrufen und ein Vorschaubild anklicken.
4. Erst wenn dort alles stimmt, das Original ersetzen und die Testdatei löschen.

Für die angepasste Vorlage gilt dasselbe: Behalte das Original von tpl/bildergalerie.html als Kopie, dann bist du mit einem Upload wieder beim Ausgangszustand. Wer alle Wege erst einmal ausprobieren möchte, kann das Bildergalerie-Script kostenlos herunterladen und es zunächst in einem Testordner einrichten.

Häufige Fragen

Beim Einbinden der Galerie drehen sich die Fragen um den richtigen Code, den iframe und das beliebte Anzeigeproblem im Rahmen.

Verwandte Themen

Das Einbinden setzt voraus, dass die Galerie sauber hochgeladen ist und du ihre Dateien bei Bedarf bearbeiten kannst.

• FTP Upload Schritt für Schritt
• Was ist ein Editor für Webdateien
• Was ist ein Template einfach erklärt
• Was ist die htaccess Datei
• Was ist eine responsive Galerie
• Bildergalerie Ratgeber: Eine Bildergalerie planen und erstellen