 | |
Navigation • Home
| 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. 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
TranskriptGesprochenen Text lesenSo 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.
Galerie einbinden - Video-Tipps aus der PraxisWelcher Weg passt, hängt von Ihrer Website ab. Ein Plugin für WordPress oder ein anderes CMS gibt es nicht. Dort setzen Sie einen Menüpunkt mit Link oder ein iframe. Auch das Nachladen per JavaScript in eine fremde Seite unterstützt die Galerie nicht. Sie gibt eine vollständige HTML-Seite aus, und die lässt sich nicht mitten in eine andere setzen. Läuft Ihre Website über https, verlinken Sie die Galerie ebenfalls mit https://. Dann bildet die Galerie auch alle eigenen Adressen mit https. Wo Sie die Nummer einer Kategorie für einen Direktlink finden, zeigt das Video zur Galerie aus Besuchersicht. Die Vorlage an Ihre Seite anpassen
Im iframe die Galerie einbindenVideo und Anleitung setzen den Rahmen auf 900 Pixel Höhe. Die Galerie meldet ihre Höhe nicht an Ihre Seite. Ist eine Kategorie länger, bekommt sie im Rahmen einen eigenen Rollbalken. Außerdem zeigt die Adresszeile des Browsers nicht, welche Kategorie gerade offen ist. Wer eine bestimmte Kategorie empfehlen will, gibt deshalb deren eigene Adresse mit ?kid= weiter. Passt keiner der drei Wege zu Ihrer Seite, schreiben Sie uns über das Kontaktformular. |
Relative Pfade in tpl/bildergalerie.html beziehen sich auf den Ordner der Galerie. Dateien Ihrer Website binden Sie mit einem Pfad ab dem Hauptverzeichnis ein, etwa /css/meine-website.css. Die Datei layout.css setzt Grundwerte für die ganze Seite, darunter Schrift, Hintergrund und Abstände. Ihr eigenes Stylesheet gehört deshalb dahinter, dann gelten Ihre Regeln. Öffnet ein Klick auf ein Vorschaubild nur das nackte Bild, fehlt ein Skript der Lightbox. Die Vorlage muss prototype.js, scriptaculous.js und lightbox.js laden. Welche Datei fehlt, zeigen die Entwicklertools des Browsers: F12 drücken und den Reiter Netzwerk öffnen. Die Texte der großen Ansicht, etwa Bild 2 von 4, ändern Sie über window.LightboxOptions in der Vorlage. Ein Update bringt neue Fassungen von Vorlage und layout.css mit. Sichern Sie Ihre angepasste Fassung deshalb vorher.