Die Galerie in die eigene Homepage einbinden

 

Die Galerie läuft, jetzt soll sie auf Ihre Homepage. Das Video vergleicht drei Wege, sie einzubinden, und sagt, wofür sich welcher eignet. Unter dem Film stehen zu jedem Weg der Code zum Kopieren und die typischen Stolperstellen.

Länge: 1:57 Min. · Veröffentlicht am 28.09.2026 · mit deutschen Untertiteln · Teil 7 von 8
Per Menülink, als Direktlink auf eine Kategorie oder im iframe: die drei Wege, die Galerie einzubinden, und wie Sie das Aussehen über die Vorlage anpassen, ohne dass ein Update es überschreibt.

Kapitel

  1. 0:00 Die Galerie Ihrer Besucher
  2. 0:15 Jede Kategorie hat eine Adresse
  3. 0:29 Der Link aus dem Menü
  4. 0:46 Die Galerie im Aussehen Ihrer Seite
  5. 1:06 Kein include
  6. 1:17 Die Galerie im iframe
  7. 1:35 Alte Links führen zur Übersicht
  8. 1:46 Welcher Weg passt

Transkript

Gesprochenen Text lesen
So sehen Besucher Ihre Galerie: eine Kachel je Kategorie, mit Titelbild und Anzahl der Fotos. Die Seite heißt bildergalerie.php. Drei Wege führen sie in Ihre Homepage.
Hinter Bilder anzeigen steht bildergalerie.php mit ?kid= und der Nummer der Kategorie. Beim Thüringer Wald ist das die Zwei. So lässt sich jede Kategorie direkt verlinken.
Der einfachste Weg ist ein Link. Der Menüpunkt Galerie Ihrer Startseite zeigt auf bildergalerie.php und öffnet die Übersicht. Hängen Sie ?kid=2 an, führt der Link direkt zum Thüringer Wald. Die Adresse kopieren Sie aus der Adresszeile.
Den Rahmen bildet tpl/bildergalerie.html. Um den Platzhalter herum ergänzen Sie Kopf und Menü, löschen Sie ihn nie. Ihre Farben kommen in eine eigene CSS-Datei, eingebunden nach layout.css. Die überschreibt ein Update nicht. Die Vorlage selbst sichern Sie vor jedem Update.
Ein include der Galerie in eine Seite eines anderen Ordners scheitert. Das Script findet dort seine Konfiguration nicht und bricht ab, der Rest Ihrer Seite fehlt. Nehmen Sie die Vorlage.
Ohne Umbau Ihrer Seite bindet ein iframe die Galerie ein. Er braucht eine feste Höhe, hier 900 Pixel. Besucher blättern im Rahmen, die Adresse Ihrer Seite bleibt gleich. Auch die Lightbox öffnet sich im Rahmen. Bei 900 Pixeln Höhe zeigt sie Fotos höchstens knapp 700 Pixel hoch.
Zurück in Ihrer Galerie. Die Nummer einer Kategorie bleibt, auch wenn Sie sie umbenennen. Zeigt ein Link auf eine gelöschte Kategorie, landen Besucher auf der Übersicht statt auf einer Fehlerseite.
Der Link ist schnell gesetzt, die Vorlage passt die Galerie an Ihre Seite an, der iframe kommt ohne Umbau aus. In Teil acht geht es um Sicherheit und Datensicherung.

Was Video und Grafik zum Einbinden der Galerie raten

Das letzte Kapitel des Films fasst die Wahl in einem Satz zusammen: „Der Link ist schnell gesetzt, die Vorlage passt die Galerie an Ihre Seite an, der iframe kommt ohne Umbau aus.“ Die Grafik macht daraus zwei Fragen, die Sie nacheinander beantworten:

  1. Sollen Besucher beim Blättern in den Fotos Ihr Logo und Ihr Menü sehen? Wenn nicht, reicht ein Menüpunkt mit Link (Weg 1).
  2. Pflegen Sie Ihre Homepage als eigene HTML-Dateien per FTP? Dann bauen Sie Kopf und Menü in die Vorlage der Galerie ein (Weg 2). Läuft die Seite über ein Baukastensystem oder WordPress, wo Sie nur den Inhalt einer Seite bearbeiten, bleibt der Rahmen mit fester Höhe (Weg 3).
Entscheidungsweg: Link, Vorlage oder iframe 1 Sollen Kopf und Menü Ihrer Seite sichtbar bleiben? nein: Link auf bildergalerie.php, mit ?kid=2 direkt zur Kategorie ja weiter mit Frage 2 2 Muss die Galerie ohne Umbau in eine fertige Seite? nein: Vorlage Kopf und Menü um den Platzhalter, eigene CSS danach ja: iframe 900 Pixel hoch, die Lightbox bleibt im Rahmen include aus einem anderen Ordner wird nicht unterstützt
Das letzte Kapitel aus „Galerie einbinden – Video“ in zwei Fragen: Link, Vorlage oder iframe, je nachdem, wie Ihre Homepage gebaut ist.

Der rote Balken unten in der Grafik steht für einen Versuch, der oft naheliegt, aber scheitert. Diese Wege unterstützt die Galerie nicht:

  • PHP-include: Wird bildergalerie.php per include in eine Seite aus einem anderen Ordner geladen, findet das Script seine Konfiguration nicht und bricht ab. Der Rest Ihrer Seite fehlt dann ebenfalls.
  • Nachladen per JavaScript: Die Galerie gibt eine vollständige HTML-Seite aus, die sich nicht mitten in eine andere setzen lässt.
  • Plugin für WordPress oder ein anderes CMS: Ein solches Plugin gibt es nicht. Dort setzen Sie einen Menüpunkt mit Link oder einen iframe.

Weg 1: Wie Sie per Link die Galerie einbinden

Video und Erklärszene zeigen es am Menüpunkt „Galerie“ einer Startseite. Er zeigt auf bildergalerie.php und öffnet die Übersicht aller Kategorien. Hängen Sie ?kid=2 an, führt derselbe Link direkt zum Thüringer Wald aus dem Beispiel. /galerie/ steht im Code für den Ordner, in dem Ihre Galerie liegt:

<a href="/galerie/bildergalerie.php">Galerie</a>
<a href="/galerie/bildergalerie.php?kid=2">Thüringer Wald</a>

Die Nummer einer Kategorie ändert sich nicht, wenn Sie die Kategorie umbenennen. Löschen Sie die Kategorie oder stimmt die Nummer nicht, leitet die Galerie Besucher auf die Übersicht weiter statt auf eine Fehlerseite. Wo Sie die Nummer einer Kategorie finden, zeigt das Video zur Galerie aus Besuchersicht. Läuft Ihre Website über https, verlinken Sie die Galerie ebenfalls mit https://. Dann bildet die Galerie auch alle eigenen Adressen mit https.

Weg 2: Wie Sie über die Vorlage die Galerie einbinden

Erklärbild zur Vorlage tpl/bildergalerie.html: Kopf, Menü und eigene CSS-Datei rund um den Platzhalter, rechts die Galerie im Rahmen einer WebsiteVideoszene und Erklärbild zeigen die Datei tpl/bildergalerie.html, den Rahmen jeder Galerieseite. In der Mitte steht der Platzhalter {AUSGABE_BILDERGALERIE}, an dessen Stelle die Galerie Kategorien und Vorschaubilder setzt. Um ihn herum ergänzen Sie Kopf, Menü und Fußzeile Ihrer Homepage. Den Platzhalter selbst löschen Sie nie, und er darf nur einmal vorkommen. Farben und Schriften kommen in eine eigene CSS-Datei nach layout.css, die kein Update überschreibt. Gekürzt sieht der angepasste Rahmen so aus:

<link href="./css/layout.css" rel="stylesheet">
<link href="./css/lightbox.css" rel="stylesheet" media="screen">
<link href="/css/meine-website.css" rel="stylesheet">
<script src="js/prototype.js"></script>
<script src="js/scriptaculous.js?load=effects,builder"></script>
<script src="js/lightbox.js"></script>
</head>
<body>
<header>Logo und Menü Ihrer Homepage</header>
<div class="div_center"> <div class="div_left">{AUSGABE_BILDERGALERIE}</div>
</div>
<footer>Fußzeile Ihrer Homepage</footer>
</body>

Beim Anpassen gibt es vier Punkte, an denen es typischerweise hakt:

  • Pfade: Relative Pfade wie ./css/layout.css beziehen sich auf den Ordner der Galerie. Dateien Ihrer Website binden Sie mit einem Pfad ab dem Hauptverzeichnis ein, etwa /css/meine-website.css.
  • Reihenfolge der Stylesheets: layout.css setzt Grundwerte für die ganze Seite, darunter Schrift, Hintergrund und Abstände. Ihr eigenes Stylesheet gehört dahinter, sonst gelten Ihre Regeln nicht.
  • Lightbox öffnet nicht: Zeigt ein Klick auf ein Vorschaubild nur das nackte Bild, fehlt ein Skript. Die Vorlage muss prototype.js, scriptaculous.js und lightbox.js in dieser Reihenfolge laden. Welche Datei fehlt, zeigen die Entwicklertools des Browsers: F12 drücken und den Reiter „Netzwerk“ öffnen.
  • Update: Ein Update bringt neue Fassungen von tpl/bildergalerie.html und layout.css mit. Sichern Sie Ihre angepasste Vorlage deshalb vorher und tragen Sie Kopf und Menü danach wieder ein.

Die Texte der großen Ansicht, etwa „Bild 2 von 4“, ändern Sie ebenfalls in der Vorlage: Ein Eintrag window.LightboxOptions vor der Zeile mit lightbox.js setzt die Werte labelImage und labelOf, ohne dass Sie die Lightbox-Datei selbst anfassen.

Weg 3: Wie Sie per iframe die Galerie einbinden

Video und Dokumentation setzen den Rahmen auf 900 Pixel Höhe. Diese Zeile fügen Sie in WordPress oder Ihrem Baukasten dort ein, wo HTML-Code erlaubt ist, meist in einem Block namens „HTML“ oder „Code“:

<iframe src="/galerie/bildergalerie.php" title="Bildergalerie" style="width:100%; height:900px; border:0;"></iframe>

Der Rahmen hat drei Eigenheiten. Die Galerie meldet ihre Höhe nicht an Ihre Seite; ist eine Kategorie länger als 900 Pixel, bekommt sie im Rahmen einen eigenen Rollbalken. Die Lightbox öffnet sich nur innerhalb des Rahmens und zeigt Fotos bei 900 Pixeln Höhe höchstens knapp 700 Pixel hoch. Außerdem bleibt die Adresse in der Browserzeile gleich, egal welche Kategorie gerade offen ist. Wer eine bestimmte Kategorie empfehlen will, gibt deshalb deren eigene Adresse mit ?kid= weiter. Liegt Ihre Homepage auf einer anderen Domain als die Galerie, darf der Server für bildergalerie.php keine Kopfzeile X-Frame-Options: SAMEORIGIN senden, sonst bleibt der Rahmen leer.

Häufige Fragen

Drei Fragen kommen nach dem Einbinden besonders oft:

Warum zeigt mein iframe nur einen Teil der Galerie?

Weil der Rahmen eine feste Höhe hat und die Galerie ihre Höhe nicht an die umgebende Seite meldet. Längere Kategorien rollen im Rahmen. Erhöhen Sie den Wert bei height oder verlinken Sie lange Kategorien direkt mit ?kid=.

Bleibt ein Link mit ?kid= gültig, wenn ich die Kategorie umbenenne?

Ja. Die Nummer gehört zur Kategorie und ändert sich beim Umbenennen nicht. Erst wenn Sie die Kategorie löschen, führt der Link auf die Übersicht der Galerie.

Kann ich die Galerie mit PHP-include in meine Seite laden?

Nein. Aus einem anderen Ordner geladen, findet das Script seine Konfiguration nicht und bricht ab. Nehmen Sie die Vorlage, wenn die Galerie wie Ihre Homepage aussehen soll, sonst einen iframe.

Passt keiner der drei Wege zu Ihrer Seite, schreiben Sie uns über das Kontaktformular.

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