PureFolio
Handbuch

Neue Galerien

Lege neue Ordner mit Fotos an und lade sie in den galleries/-Ordner auf dem Server – sie erscheinen sofort in der Galerie-Übersicht, ganz ohne Backend-Aktion. Alternativ lässt sich alles bequem direkt im Backend erledigen: Ordner anlegen, Bilder hochladen, Reihenfolge festlegen.

Neue Schriften

Kopiere Schriftart-Dateien in den Fonts/-Ordner auf dem Server – sie sind danach im Backend sofort als Option verfügbar.

Eigenes Logo

Lege dein Logo im logos/-Ordner ab und wähle es im Backend aus. Dark- und Light-Varianten werden getrennt unterstützt.

Eigenes Favicon

Ersetze favicon.ico durch dein Icon. Für vollständige Geräte-Unterstützung tausche auch die Bilder im favicon/-Ordner aus — Dateinamen und Bildgrößen dabei unbedingt beibehalten. Online-Favicon-Generatoren erzeugen alle nötigen Formate auf einen Schlag.

Neue Sprachen

Sprachpakete erstellst du direkt im Backend – kein manuelles Hochladen nötig. PureFolio speichert das Paket automatisch im lang/-Ordner.

Ordnerbasierte Struktur

Galerien entsprechen direkt Ordnern auf dem Server. Kein Eintragen, kein Anlegen im Backend – einfach einen Ordner mit Bildern hochladen und er erscheint automatisch in der Galerie-Übersicht.

• Mehrstufige Unterordner-Hierarchie
• Automatische Erkennung aller Bild-Formate (JPEG, PNG, GIF, WebP)
• Ordner-Namen werden als Galerie-Titel verwendet

Drag & Drop Bildsortierung

Die Reihenfolge der Bilder innerhalb einer Galerie lässt sich im Backend per Drag & Drop beliebig ändern. Die neue Reihenfolge wird getrennt vom Dateisystem gespeichert – Dateien werden nicht umbenannt.

• Undo: Reihenfolge auf letzten gespeicherten Stand zurücksetzen
• Reset: Alphabetische Reihenfolge wiederherstellen
• "Fixieren" speichert den aktuellen Stand dauerhaft

Ordner-Reihenfolge

Auch die Reihenfolge der Galerien (Ordner) untereinander ist frei sortierbar. Jede Ebene der Ordnerhierarchie hat eine eigene, unabhängig speicherbare Reihenfolge.

• Drag & Drop Verschieben auch bei Verzeichnissen
• Unterordner werden direkt in der ausgewählten Galerie angezeigt.

Vorschaubilder

Für jede Galerie kann ein Vorschaubild für den Dark- und den Light-Modus unabhängig gewählt werden. Das Vorschaubild erscheint in der Galerie-Übersicht auf der Startseite und in Unterseiten.

• Separates Bild für Dark- und Light-Farbschema
• Auswahl per Klick direkt aus den Bildern der Galerie
• Kein Upload nötig – Bilder der Galerie werden verwendet

Galerie-Infotext

Jede Galerie kann einen optionalen Infotext erhalten, der im Frontend neben oder unter den Bildern angezeigt wird. Zweisprachige Infotexte (L1 + L2) werden separat gespeichert.

• Gespeichert als infos.txt (L1) und infos2.txt (L2)
• Bearbeitung direkt im Backend-Panel
• Kein Format-Zwang – freier Fließtext

Bilder hochladen

Neue Fotos gelangen per Drag & Drop direkt ins Backend – einfach ins Browserfenster ziehen, fertig. Der Upload-Bereich zeigt Fortschritt und Ergebnis jeder Datei in Echtzeit an.

• Drag & Drop auf die Seite oder klassische Dateiauswahl
• Mehrere Dateien gleichzeitig hochladen
• Live-Fortschrittsanzeige pro Datei
• Unterstützt JPEG, PNG, GIF und WebP

Galerie anlegen

Neue Haupt- oder Untergalerien direkt im Backend erstellen – kein FTP nötig. Ein Klick auf „＋ Neue Galerie auf der Startseite" oder das ＋-Symbol bei einer bestehenden Galerie legt sofort einen neuen Ordner auf dem Server an.

• Neue Hauptgalerie auf der Startseite erstellen
• Untergalerie in beliebiger Tiefe hinzufügen
• Alternativ: einfach per FTP einen Ordner anlegen – PureFolio erkennt ihn automatisch

Verschieben & Reihenfolge

Galerien lassen sich per Drag & Drop in der Hierarchie neu anordnen oder in andere Galerien verschieben. Beim Verschieben werden alle Bilder, Untergalerien und Einstellungen mitgenommen.

• Drag & Drop am Ziehpunkt oder über „Verschieben"-Button
• Gesamter Galerieordner inkl. Inhalten wird übernommen
• Vererbung von privatem/verborgenem Status beim Verschieben in markierte Galerien

Verbergen

Einzelne Galerien können im Frontend-Menü ausgeblendet werden, ohne sie zu löschen. Der direkte Link zur Galerie bleibt weiterhin funktionsfähig – ideal für temporär versteckte oder in Vorbereitung befindliche Galerien.

• Im Menü und auf der Startseite nicht mehr sichtbar
• Über direkten URL weiterhin erreichbar
• Jederzeit wieder einblendbar
• Bereits bekannte Bild-Direktlinks (z. B. aus Suchmaschinen-Cache) funktionieren dank Bildsperre nicht mehr (setzt .htaccess-Unterstützung voraus, siehe „Server-Kompatibilität")

Privat schalten

Galerien können direkt im Verwaltungs-Panel mit Passwortschutz versehen werden – ohne die Galerie erst öffnen zu müssen. Das Passwort lässt sich separat im „Private Galerien"-Panel pflegen.

• Passwortschutz in einem Klick aktivierbar
• Galerie erscheint weiterhin mit 🔒 in der Übersicht
• Private Galerien sind auch ohne Passwort-Eingabe für eingeloggte Admins sichtbar
• Sperrt zusätzlich den direkten Bildaufruf (setzt .htaccess-Unterstützung voraus, siehe „Server-Kompatibilität")

Vererbung an Untergalerien

Wird eine übergeordnete Galerie als privat oder verborgen markiert, gelten alle Untergalerien automatisch ebenfalls als privat bzw. verborgen – ohne ihre eigene Markierung zu verändern. Wird die Übergalerie später wieder freigegeben, kehren die Untergalerien automatisch in ihren ursprünglichen Zustand zurück.

• Vererbung ohne dauerhaften Eingriff in Unterordner
• Visualisierung im Panel durch 🔒 oder [verborgen]-Label
• Rückgängig durch Freigabe der übergeordneten Galerie

Ganze Website privat schalten

Reicht der Passwortschutz einzelner Galerien nicht aus, lässt sich auch die komplette Website auf einen Schlag privat schalten – Besucher sehen dann statt der normalen Seite nur eine Hinweisseite mit Passwort-Eingabe. Einstellbar unter „Global" → „Ganze Website privat schalten".

• Betrifft die gesamte Website inkl. aller Galerien, nicht nur einzelne
• Kundengalerien bleiben davon unberührt und normal per eigenem Passwort erreichbar
• Der eingeloggte Admin sieht die Website immer normal, unabhängig vom gesetzten Passwort
• Sperrt zusätzlich den direkten Bildaufruf website-weit (setzt .htaccess-Unterstützung voraus, siehe „Server-Kompatibilität")

Löschen

Eine Galerie inklusive aller enthaltenen Bilder, Thumbnails, Untergalerien und Einstellungen wird unwiderruflich vom Server entfernt. Eine Sicherheitsabfrage verhindert versehentliches Löschen.

• Löscht den kompletten Galerieordner auf dem Server
• Sicherheitsabfrage vor dem endgültigen Löschen
• Nicht rückgängig machbar – ggf. vorher ein Backup erstellen

Bildunterschrift (Caption)

Jedes Bild kann eine kurze Bildunterschrift in der Haupt- und der Zweitsprache erhalten. Die Hauptsprache (L1) wird direkt in der JPEG-Datei gespeichert und bleibt am Bild, auch wenn es weitergegeben wird – kompatibel mit Lightroom, Bridge und Photoshop. Die Zweitsprache (L2) wird als eigene Datei im Galerie-Ordner abgelegt.

• L1 direkt im Bild gespeichert (Standard-kompatibel)
• L2 als separate Sprachdatei je Galerie
• Beim IPTC-Dokument-Titel als Vorschlag übernommen
• WebP-Export synchronisiert die Caption automatisch

EXIF-Daten pro Galerie

Für jede Galerie lässt sich separat einstellen, ob technische Kameradaten (EXIF) in der Lightbox angezeigt werden. Welche Felder sichtbar sind, ist frei wählbar – von Blende und Belichtungszeit bis hin zu Kamera und Objektiv.

• EXIF-Anzeige pro Galerie aktivierbar
• Einzelne Felder wählbar (Kamera, Objektiv, Blende, ISO …)
• EXIF-Anzeige für einzelne Bilder deaktivierbar

Erweiterte Info pro Bild

Neben der kurzen Caption kann jedes Bild einen längeren Infotext erhalten – ideal für Hintergründe zur Aufnahme, Ort oder Geschichte. Der Text erscheint in der Lightbox über den EXIF-Daten und ist ebenfalls zweisprachig verfügbar.

• Freier Fließtext, Absätze mit Leerzeile
• Zweisprachig (L1 + L2)
• i-Button in der Lightbox erscheint automatisch, wenn Info vorhanden
• Im Backend am Vorschaubild mit kleinem i-Badge erkennbar

Bearbeitungs-Dialog

Ein Klick auf das Stift-Symbol oder den i-Badge öffnet den Bild-Dialog. Dort sind Caption, EXIF-Einstellungen und der Infotext gebündelt – übersichtlich in einem einzigen Modal-Fenster.

• Caption L1 und L2 mit automatischem Vorschlag aus Dateiname oder IPTC-Titel
• EXIF-Daten zur Kontrolle immer sichtbar
• Option: EXIF für dieses Bild in der Lightbox ausblenden
• Infotext in L1 und L2 direkt im selben Dialog

Backup & Restore

Captions, EXIF-Einstellungen und Infotexte sind alle Teil des vollständigen Backups. Captions können als eigene Kategorie selektiv wiederhergestellt werden.

• EXIF-Konfigurationen im Backup enthalten
• Erweiterte Infotexte im Backup enthalten
• Caption-Restore separat wählbar (da zeitintensiv)

Schlagwörter aus Bilddaten

Die Keywords werden aus den IPTC-Metadaten der JPEG-Dateien gelesen – kein manuelles Einpflegen notwendig. Werden Keywords in einer Bildbearbeitungs-Software gesetzt, erscheinen sie automatisch im Frontend.

• Standard IPTC-Keyword-Felder (Lightroom, Capture One, etc.)
• Schreibweise wird aus den Bilddaten übernommen
• Index wird manuell oder automatisch nach jeder Änderung neu erstellt

Zweisprachige Schlagwörter

Die IPTC-Keywords dienen als Sprache 1 (L1). Für Sprache 2 (L2) werden im Backend Übersetzungen gepflegt – unabhängig von den Bilddateien. Im Frontend wechseln die Chips automatisch mit der gewählten Sprache.

• L1: direkt aus IPTC, keine manuelle Pflege nötig
• L2: Übersetzungen im Backend unter Übersetzungen → Schlagwort-Übersetzungen
• Fallback-Option: L1-Keywords anzeigen wenn keine L2-Übersetzung vorhanden

Slider im Frontend

Ein Tab am rechten Bildschirmrand öffnet ein Panel mit allen verfügbaren Schlagwörtern als anklickbare Chips. Ein Klick filtert die angezeigte Galerie sofort – ohne Seitenneuladung.

• Breite passt sich automatisch an den Inhalt an
• Scrollhinweise (Pfeil oben/unten) bei vielen Schlagwörtern
• Einstellbare Deckkraft und Unschärfe im Backend
• Schlagwort-Seite zeigt alle Bilder mit diesem Schlagwort

Schlagwort-Seiten

Jedes Schlagwort hat eine eigene Seite, die alle zugehörigen Galerien und Bilder listet. Die URL enthält das Schlagwort und ist direkt verlinkbar – ideal für Portfolios mit thematischen Schwerpunkten.

• Automatisch generierte Übersichtsseite pro Schlagwort
• Galerien-Ansicht mit Hover-Vorschau und Galeriename
• Home-Icon (Breadcrumb) für einfache Navigation zurück

Index-Verwaltung

Der Schlagwort-Index wird aus den IPTC-Daten aller Bilder aufgebaut. Er kann manuell neu erstellt oder automatisch nach jeder Änderung aktualisiert werden.

• Manuell: Schaltfläche „Index neu erstellen"
• Automatisch: Option „Nach Speichern neu erstellen"
• Mindest-Anzahl: Schlagwörter mit weniger Bildern ausblenden

Darstellung & Transparenz

Der Schlagwort-Slider lässt sich mit denselben Reglern wie das Menü gestalten – Deckkraft und Unschärfe stufenlos einstellbar.

• Deckkraft: 50–100 %
• Unschärfe (Blur): 0–40 px
• Gilt für alle Design-Modi

Dark-Modus

Standard-Farbschema mit dunklem Hintergrund. Im modernen Design individuell konfigurierbar – von tiefschwarz bis dunkelgrau.

Light-Modus

Helles Farbschema als Alternative. Hintergrundfarbe und Akzentfarbe sind unabhängig vom Dark-Modus einstellbar.

Standard-Schema

Beim ersten Seitenaufruf erscheint das voreingestellte Farbschema (Dark oder Light) – der Besucher kann selbst umschalten.

Akzentfarben (Modernes Design)

Zwei unabhängige Akzentfarben für Dark- und Light-Modus, je mit Farbwähler oder Hex-Eingabe. Zuletzt verwendete Farben erscheinen als Schnellauswahl-Swatches.

• Intensität in 5 Stufen: Intensiv, Kräftig, Gedämpft, Matt, Pastell
• Titeltext-Helligkeit separat einstellbar (Weiß / Hell / Mittel / Dunkel für Dark; Schwarz / Dunkel / Mittel / Hell für Light)
• Live-Vorschau mit Titel und Untertitel direkt im Panel

Hintergrundfarben (Modernes Design)

Hintergrundfarbe für Dark- und Light-Modus jeweils aus 8 vordefinierten Presets oder als eigene Farbe per Picker und Hex-Code.

• Dunkel: Schwarz, Fast Schwarz, Dunkelgrau, Blau, Lila, Rot, Orange, Türkis
• Hell: Weiß, Helles Grau, Warm, Helles Orange, Helles Blau, Helles Lila, Helles Rot, Helles Türkis
• Live-Vorschau gemeinsam mit Akzent- und Titelfarbe

Galerie-individuelle Farben (Klassisches Design)

Jede Galerie kann eine eigene Akzentfarbe erhalten, die als farbige Markierung im Vorschau-Ordner sichtbar ist. Galerien ohne eigene Farbe erben die Farbe des übergeordneten Ordners.

• Farbmarkierung in Galerieordnern per Toggle aktivierbar
• Vererbungskette: Elternordner → Unterordner, Quelle wird im Backend angezeigt
• Eigene Farbe jederzeit löschbar → zurück zur Vererbung

Verlauf & Schatteneffekte (Modernes Design)

Hintergrundverlauf, Galerie-Schatten und Startseiten-Rahmen sind getrennt für Desktop und Mobilgeräte sowie für Dark- und Light-Modus konfigurierbar.

• Hintergrundverlauf in 4 Stufen: Aus, Leicht, Mittel, Stark – je separat für Desktop/Mobil und Dark/Light
• Schatten bei Galerie-Buttons: Desktop und Mobil getrennt ein-/ausschaltbar
• Galerie-Bereich (Startseite): Ohne Rahmen / Mit Rahmen / Mit Rahmen & Schatten

Body-Schrift

Die Schriftart für Fließtext (Infotexte, Captions, UI-Elemente). Wird über ein Dropdown aus der verfügbaren Font-Liste gewählt. Eine Live-Vorschau zeigt die Schrift direkt im Panel.

Heading-Schrift

Separate Schriftart für Titel und Überschriften – im modernen Design besonders präsent in der Vita-Modal-Überschrift und den Galerie-Titeln.

Self-Hosted Fonts

Alle Schriften liegen direkt auf dem eigenen Server – es werden keine externen Dienste wie Google Fonts eingebunden. Die Schriftliste lässt sich jederzeit um eigene Fonts erweitern.

• Keine Verbindung zu externen Servern – datenschutzfreundlich
• Beliebig erweiterbar durch eigene Font-Dateien auf dem Server. Neue Schriften einfach ins entsprechende Verzeichnis kopieren.
• Font-Vorschau direkt nach Auswahl einer Schrift im Dropdown-Menü
• Gewählte Schriften werden gecacht, um die Vorschau zu beschleunigen
• Design-Modus-abhängige Anzeige (Classic / Modern)

Variable Schriftgröße & Zeilenabstand

Basis-Schriftgröße und Zeilenabstand des Fließtexts lassen sich unabhängig von der gewählten Schriftart fein justieren – für optimale Lesbarkeit je nach Design und Textmenge.

Header ein-/ausblenden

Der Header kann vollständig ausgeblendet werden – nützlich für besonders schlichte Layouts. Bei ausgeblendetem Header lässt sich der Abstand zwischen Bildschirmrand und Inhalt separat für Desktop und Mobil in drei Stufen einstellen (Klein / Mittel / Groß).

• Der Seitentitel (für Menü und Browser-Tab) wird dann unter Texte → Startseite gesetzt
• Der Hamburger-Button passt seine Position automatisch an den gewählten Abstand an

Header-Einstellungen – Modernes Design

Sechs unabhängige Optionen steuern das Verhalten des Headers im modernen Design:

• Header-Position: Oben (horizontaler Header) oder Links als Rail (schmale vertikale Leiste, Titel gedreht) – gilt nur auf dem Desktop
• Scroll-Verhalten: Header fest (sticky) oder scrollt mit. Im Rail-Modus gilt dies nur für Mobilgeräte
• Headertitel-Größe: Klein / Mittel / Groß – getrennt für Desktop und Mobil
• Inhaltsabstand: Normal oder Kompakt (halbierter Abstand zwischen Header und Inhalt)
• Hell/Dunkel-Schalter: Im Header oder im Footer – gilt nur für den Desktop, auf Mobil ist der Schalter immer im Footer
• Header-Helligkeit: Hebt den semi-transparenten Header farblich hervor – Mittel oder Stark, optional nur für Desktop oder Mobil

Logo & Einstellungen – Klassisches & monochromes Design

Im klassischen Design wird ein Logo-Bild im Header angezeigt. Alle Abstände sind feinjustierbar, damit auch unregelmäßige Logos optisch sauber integriert werden können.

• Separate Logo-Dateien für Dark- und Light-Modus; Logos einfach hochladen, sofort verfügbar
• Optionaler Farbfilter passt das Logo an das aktive Farbschema an – am besten bei unifarbenen, hellen Grafiken
• Logo kann links neben oder gestapelt (nur klassiches Design) über dem Seitentitel erscheinen; Höhe getrennt für Desktop und Mobil einstellbar (0 % = auf Mobil ausblenden)
• Sticky Hamburger: bleibt beim Scrollen auf dem Desktop oben links sichtbar; auf Mobil blendet er sich als Pill-Element ein
• Hell/Dunkel-Schalter: Getrennt für Desktop und Mobil – im Header oder im Footer
• Live-Vorschau mit Logo, Titel und Untertitel; die Abstände sind feinjustierbar

Titel & Untertitel (Modernes Design)

Der Header-Titel ist zweiteilig und zweisprachig: Teil 1 erscheint in der Textfarbe, Teil 2 in der Akzentfarbe (Option zum tauschen der Farben ist vorhanden). Beide Teile lassen sich separat für die erste und zweite Sprache pflegen.

• Der Abstand zwischen den beiden Titelteilen ist einstellbar
• Mobile Header-Größe: Normal oder Groß (größerer Titel, kleinerer Untertitel auf Mobilgeräten)
• Untertitel (Tagline / Berufsbezeichnung) ebenfalls zweisprachig – erscheint unterhalb des Titels
• Hover-Effekt über den Titel ist optional einstellbar
• Tipp: Für eine einfarbigen Titel, einfach nur einen "Titel-Teil" verwenden

Klassisches Seitenmenü

Im klassischen und monochromen Design erscheint die Navigation links bzw. rechts als Ordner-Liste. Unterordner lassen sich auf- und zuklappen – entweder automatisch bei einem langen Menü oder manuell durch den Besucher selbst. Eine "intelligente" Einstellung öffnet bei zu wenig Platz immer den Menüpunkt der aktuellen Galerie.

• Automatisches Einklappen bei zu langem Menü
• Manuelles Auf- und Zuklappen durch den Besucher
• "Alle anzeigen"-Link konfigurierbar

Modernes Vollbild-Menü

Im modernen Design öffnet sich ein – auf Wunsch halbtransparentes – Vollbild-Overlay-Menü mit großen Schaltflächen. Die Automatik und "intelligente" Option des klassischen Menüs funktionieren auch hier.

• Öffnet per Hamburger-Button
• Smooth Vorhang-Animation beim Wechsel
• Optimiert für Touch- und Maus-Bedienung
• Auf Wunsch mehrspaltig – konfigurierbare Spaltenanzahl für übersichtliche Darstellung bei vielen Galerien

Sprachumschalter

Ist die Zweisprachigkeit aktiviert, erscheint im Footer ein Sprach-Umschalter. Dieser ist konfigurierbar: automatische Browser-Sprache oder manuelle Auswahl.

• Autodetect per Browser-Sprache
• Manuelle Festlegung auf L1 oder L2
• Nur L1: Sprachumschalter wird ausgeblendet

Dark/Light-Umschalter

Im modernen Design erscheint auf Mobilgeräten ein Schalter für Dark- und Light-Modus im Footer. Auf dem Desktop kann er im Theme-Toggle im Header aktiviert werden.

Hell- und Dunkel-Variante

Für jedes Farbschema kann ein eigenes Hero-Bild hinterlegt werden. So passt das Titelbild immer zum gewählten Modus – ohne Kompromisse bei Helligkeit oder Bildwirkung.

• Separates Bild für Dark- und Light-Modus
• Auswahl direkt aus den Galeriebildern im Backend
• Kein eigener Upload nötig – vorhandene Bilder werden genutzt

Mobile Optionen

Für kleine Bildschirme stehen zwei separate Bildslots bereit: ein hochformatiges Bild für den Smartphone-Modus und eines für Tablets. So wirkt das Hero-Bild auf jedem Gerät optimal.

• Eigenes Bild für Smartphone-Ansicht (Hochformat)
• Eigenes Bild für Tablet-Ansicht
• Fallback auf das Desktop-Bild, wenn kein mobiles Bild gewählt

Design-Optionen

Höhe, Ausschnitt, Textüberlagerung und Parallax-Effekt sind frei konfigurierbar. Das Hero-Bild fügt sich nahtlos in das jeweilige Layout ein – ob minimalistisch oder als Vollbild-Statement.

• Einstellbare Bildhöhe (kompakt bis Vollbild)
• Fokusprunkt des Bildausschnitts wählbar (oben, Mitte, unten)
• Optionaler Parallax-Scrolleffekt
• Text- und Titelüberlagerung konfigurierbar

Zuschneiden im Backend

Passt ein Bild nicht ideal ins Hero-Format, kann es direkt im Browser zugeschnitten werden – ohne externes Bildbearbeitungsprogramm. Der Ausschnitt wird serverseitig gespeichert und automatisch ins WebP-Format konvertiert.

• Interaktiver Crop-Editor direkt im Backend
• Automatische WebP-Konvertierung nach dem Zuschneiden
• Bildgröße wird optimal angepasst – schnelle Ladezeiten inklusive

Hintergrund

Der Hintergrund hinter dem vergrößerten Bild ist frei wählbar – von voll deckendem Schwarz bis zu transparenten Varianten, bei denen die Galerieseite dahinter durchscheint.

• Schwarz (voll deckend) oder transparent in zwei Abstufungen
• Transparent in der Akzentfarbe der Galerie bzw. des Designs
• Weichzeichner-Regler für den transparenten Hintergrund

Animation beim Bildwechsel

Beim Durchblättern der Bilder kann ein sanfter Übergang aktiviert werden, statt das nächste Bild abrupt anzuzeigen.

• Aus – sofortiger Wechsel ohne Übergang
• Einblenden (Fade)
• Hineinschieben (Slide), mit automatischer Richtungserkennung vor/zurück

Rahmen um das Bild

Ein dezenter Rahmen kann das Bild optisch vom Hintergrund abheben – Farbe und Dicke sind unabhängig voneinander einstellbar.

• Farben: Aus, Grau, Weiß oder Akzentfarbe
• Rahmendicke von 1 bis 5 Pixel frei wählbar

Zyklische Navigation

Bestimmt, was beim Erreichen des letzten bzw. ersten Bildes einer Galerie passiert.

• Aktiv: Nach dem letzten Bild wird wieder das erste angezeigt (und umgekehrt)
• Inaktiv: Die Navigation stoppt am Rand, der jeweilige Pfeil wird deaktiviert

Miniatur-Thumbnails

Eine Vorschauleiste unter dem Hauptbild ermöglicht das direkte Springen zu jedem Bild der Galerie, ohne sich durchzuklicken.

• Aus – keine Vorschauleiste
• Permanent sichtbar unter dem Bild
• Ausklappbar über einen schmalen Button am unteren Bildschirmrand – öffnet sich per Klick oder, auf Mobilgeräten, per Wischen nach oben

Intro-Texte

Zwei Intro-Textbereiche können auf der Startseite ausgespielt werden (Intro 1 und Intro 2), jeweils zweisprachig. Außerdem ist ein übergeordneter Seitentitel (H1) konfigurierbar.

• Intro 1 (z. B. Willkommenstext)
• Intro 2 (z. B. Kurzbeschreibung)
• Seitentitel L1 + L2
• Meta-Beschreibung für Suchmaschinen (SEO), L1 + L2

Vita-Widget

Ein "Über mich"-Widget, das als Modal-Fenster eingeblendet werden kann. Titel und Fließtext sind zweisprachig pflegbar. Die Platzierung des Vita-Links ist auf der Startseite und/oder im Footer möglich.

• Zweisprachiger Titel wird unterstützt
• Einfaches HTML wie Links, Listen und Überschriften sind erlaubt im Text erlaubt
• Optionales Porträt-/Begleitbild im Vita-Modal, getrennt zuschneidbar für Desktop und Mobil
• Bild-Position frei wählbar: über/unter dem Text oder als Freistellung links/rechts
• Form (frei, quadratisch, rund) und Größe separat für Desktop und Mobil einstellbar

SEO-Konfiguration

Meta-Beschreibung und Seitentitel sind pro Sprache einstellbar und werden direkt in den HTML-Head eingebettet – für die Startseite ebenso wie für jede einzelne Galerie. Kein Plugin, kein Add-on nötig.

• Seitentitel und Meta-Beschreibung, jeweils L1 + L2
• Strukturierte Daten (JSON-LD, schema.org "ImageGallery") auf jeder Galerieseite mit eigenen Bildern – hilft Suchmaschinen und KI-Systemen, Titel, Beschreibung und Bilder maschinenlesbar zuzuordnen

og:image – Vorschaubild für geteilte Links

Wird von WhatsApp, Facebook, Slack & Co. automatisch als Bild in der Vorschaukarte angezeigt, wenn jemand einen Link zur Seite teilt. Auswahl und Zuschnitt (1200×630, per Ziehen oder Regler positionierbar) laufen komplett im Backend, ganz ohne Bildbearbeitungsprogramm.

• Ein allgemeines og:image für die ganze Seite (Menü "Global" → SEO)
• Zusätzlich pro Galerie ein eigenes, überschreibendes Bild möglich – die Auswahl zeigt dabei nur Fotos der jeweiligen Galerie
• Ohne eigene Auswahl greift automatisch das Hero-Bild der Startseite als Ersatz

Sitemap & robots.txt

Eine Sitemap listet automatisch alle öffentlichen Galerien auf – live erzeugt, ohne manuelle Pflege: neue Galerien erscheinen sofort, gelöschte verschwinden sofort wieder. Private und versteckte Galerien sowie Kundengalerien tauchen darin nie auf.

• robots.txt steuert, welche Bereiche Suchmaschinen crawlen dürfen (Backend-Bereiche sind grundsätzlich gesperrt)
• Bekannte KI-Trainings-Crawler (u. a. GPTBot, CCBot, Google-Extended) werden dabei standardmäßig ausgesperrt – Crawler, die für die Websuche/Zitieren durch KI-Systeme laufen, bleiben bewusst erlaubt

llms.txt – Sichtbarkeit bei KI-Suchsystemen

Viele Menschen suchen inzwischen direkt bei KI-Systemen wie ChatGPT, Claude oder Perplexity statt bei Google. Die Datei llms.txt gibt diesen Systemen eine kompakte, für sie optimierte Übersicht der Seite – nach demselben Prinzip wie die Sitemap: live erzeugt, immer aktuell.

• Listet alle öffentlichen Galerien mit Namen und – falls gepflegt – ihrer SEO-Kurzbeschreibung auf
• Verlinkt zusätzlich die "Über mich"-Seite, sofern ein Vita-Text hinterlegt ist

Galerie-Vorschau-Grid

Die Startseite und Unterseiten zeigen Galerien als Kacheln mit ihrem Vorschaubild. Das gilt sowohl für die oberste Ebene als auch für Unterordner-Übersichten. Im klassischen Design mit Overlay-Effekt, im modernen Design als reduziertes Grid ohne Kachel-Schatten (konfigurierbar). Das Vorschaubild selbst wird pro Galerie im Backend festgelegt – separat für Dark- und Light-Modus.

Sprachkonfiguration

Im Übersetzungs-Panel wird die zweite Sprache (L2) konfiguriert. Drei Modi stehen zur Auswahl:

• L1 + L2: Beide Sprachen aktiv – ein Umschalter im Footer wechselt zwischen ihnen, z. B. Deutsch und Englisch
• Autodetect: Die Browser-Sprache des Besuchers bestimmt automatisch, welche Sprache beim ersten Aufruf angezeigt wird
• Nur L1: Ausschließlich die Hauptsprache, kein Umschalter im Frontend sichtbar

Übersetzungsdateien

Alle UI-Texte (Navigations-Labels, Buttons, Fehlermeldungen, Modale) liegen in PHP-Sprachdateien. Diese werden im Backend direkt bearbeitet und gespeichert.

• Separate Datei pro Sprache lang/de.php, lang/en.php etc. Beliebig erweiterbar
• Jede Zeile editierbar ohne FTP-Zugriff
• Wird vollständig im Backup gesichert

UI-Texte

Alle fest codierten Texte im Frontend – von "Alle Galerien" bis zu Passwort-Abfragen – sind über die Sprachdatei anpassbar. Kein Code-Eingriff notwendig.

• Navigation: Titel, "Alle"-Link
• Privat-Galerie: Titel, Prompt-Text
• Anzeigeoptionen und weitere UI-Elemente

Zweisprachige Inhalte

Neben den UI-Texten gibt es zweisprachige Felder überall in den Konfigurationen: Infotexte, Galerie-Captions, Intro, Vita, Header-Titel, Impressum, Datenschutz.

Kontaktdaten-Formular

Name, Straße, PLZ/Ort, E-Mail, Telefon und Website werden einmal eingetragen und automatisch in Impressum und Datenschutzerklärung eingebettet.

• Name, Anschrift, Kontaktdaten
• Zweck/Verwendungszweck der Webseite
• Automatische Einbettung in alle Rechtstexte

Zweisprachige Rechtstexte

Impressum- und Datenschutz-Texte können jeweils in L1 und L2 gepflegt werden. Die Anzeige richtet sich nach der aktuell gewählten Sprache des Besuchers.

• Impressum L1 + L2
• Datenschutzerklärung L1 + L2
• Titel der Seiten L1 + L2

Individuelle Freitexte

Zusätzlich zu den aus den Kontaktdaten generierten Inhalten können Impressum und Datenschutzerklärung mit individuellem Freitext ergänzt werden.

Backup-Integration

Alle Rechtstexte und Kontaktdaten werden als eigene Restore-Kategorie "Rechtliches" gesichert und können selektiv wiederhergestellt werden.

WebP-Konvertierung

Alle Bilder einer Galerie können auf Knopfdruck ins WebP-Format konvertiert werden. WebP-Dateien sind deutlich kleiner als JPEG bei kaum sichtbarem Unterschied oder gleicher Qualität.

• Drei Qualitätsstufen wählbar: hohe, mittlere oder niedrige Qualität – je nach gewünschtem Kompromiss zwischen Dateigröße und Bildqualität
• Nur neue Bilder konvertieren (ohne Rebuild)
• Alle WebP löschen und neu generieren
• Captions werden beim WebP-Export synchronisiert

Thumbnails

Thumbnail-Bilder werden serverseitig generiert und für die Galerie-Übersicht und Vorschaukacheln verwendet.

• Automatische Generierung: fehlt ein Thumbnail, wird es beim nächsten Seitenaufruf im Hintergrund erstellt
• Manuelles Rebuild möglich
• Alle Thumbs löschen und neu generieren
• Separate Thumbnail-Erzeugung für Retina-Displays

Rebuild & Cleanup

Im Backend lassen sich WebP-Dateien und Thumbnails einfach verwalten. Ein Fortschrittsbalken zeigt den Status der Batch-Operation.

• Alle Galerien auf einmal (Global-Rebuild)
• Manuelle Erstellung für weniger abgeschnittne Köpfe
• Verwaiste Thumbnails finden und löschen
• Live-Fortschrittsanzeige bei längeren Operationen

Thumbnail-Zuschnitt

Für jedes Bild lässt sich ein individueller Ausschnitt für das Thumbnail festlegen – direkt im Browser, ohne externe Bildbearbeitung. Die Originaldatei bleibt dabei unverändert.

• Interaktiver Crop-Editor mit Echtzeit-Vorschau
• Eigener Ausschnitt pro Bild – überschreibt die automatische Generierung. Quadratische Thumbnails - wenn gewünscht - sind kein Problem mehr.
• Zuschnitt-Koordinaten werden im Backup gesichert und beim Restore wiederhergestellt

Wie der Cache funktioniert

Beim ersten Aufruf einer Seite durch einen Besucher rendert PHP die Seite vollständig – und speichert das fertige HTML als Datei im Cache-Ordner. Alle folgenden Besucher erhalten diese Datei direkt, ohne dass PHP erneut ausgeführt wird.

• Drastisch reduzierte Serverbelastung bei vielen gleichzeitigen Besuchern
• Schnellere Ladezeiten – besonders bei großen Galerien mit vielen Bildern
• Funktioniert automatisch im Hintergrund, kein Eingriff nötig

Gültigkeitsdauer (TTL)

Die maximale Lebensdauer einer gecachten Seite ist frei wählbar – von einer Stunde bis zu einem ganzen Jahr. Da der Cache bei jeder Admin-Aktion automatisch geleert wird, empfehlen sich lange Werte für den Normal-Betrieb.

• Wählbar: 1 Std · 1 Tag · 7 Tage · 30 Tage · 90 Tage · 1 Jahr
• Bei Admin-Speicheraktion → Cache wird sofort geleert
• Lange TTL ohne Risiko: Änderungen greifen immer sofort

Admins immer aktuell

Eingeloggte Administratoren umgehen den Cache vollständig. Sie sehen jede Seite immer in der aktuell gerenderten Version – unabhängig davon, ob ein Cache-Eintrag vorhanden ist und wie alt er ist.

• Kein veralteter Cache-Inhalt für Admins
• Änderungen im Backend sofort im Frontend sichtbar
• Cache-Bypass transparent – kein manuelles Leeren nötig

Cache manuell leeren

Im Backend lässt sich der gesamte Seiten-Cache mit einem Klick leeren – etwa nach direkten Datei-Edits per FTP oder wenn Änderungen sofort für alle Besucher sichtbar sein sollen. Die Anzeige zeigt Anzahl und Gesamtgröße der aktuell gecachten Seiten.

• „Cache leeren"-Button mit Live-Rückmeldung
• Anzeige: Anzahl gecachter Seiten und Gesamtgröße
• Cache kann jederzeit deaktiviert werden

Passwortschutz

Jede Galerie kann im Backend einzeln als "privat" markiert und mit einem Passwort versehen werden. Beim Öffnen erscheint eine Passwort-Eingabeaufforderung.

• Passwort im Klartext oder als bcrypt-Hash speicherbar
• Separates Passwort pro Galerie
• Private Galerien werden mit einem 🔒 im Backend-Menü markiert

Passwort-Speicherung

Das Passwort kann entweder im Klartext (schnell einzurichten) oder als sicherer bcrypt-Hash gespeichert werden. Der Hash-Modus wird für produktive Einsätze empfohlen.

• Klartext: direkt lesbar, schnell änderbar
• bcrypt-Hash: nicht rückrechenbar, sicher
• Wechsel zwischen beiden Modi jederzeit möglich

Sichtbarkeit im Frontend

Private Galerien erscheinen auf der Startseite und im Menü – aber mit einem Schloss-Symbol. Erst nach korrekter Passworteingabe wird der Inhalt angezeigt.

Backup-Integration

Die Liste der privaten Galerien inkl. Passwörter wird als Teil der Kategorie "Ordner & Bildreihenfolge" gesichert. Beim Restore wird die Passwort-Konfiguration vollständig wiederhergestellt.

Eigener Bereich

Kundengalerien leben in einer eigenen Baumstruktur, getrennt von den öffentlichen Galerien, und sind über eine eigene Adresse (?kunde=) erreichbar. Anlegen, Verschieben und Löschen funktioniert wie bei normalen Galerien direkt im Backend.

• Eigener Verwaltungsbereich „Kundengalerien" im Backend
• Beliebig tiefe Unterordner pro Kunde möglich
• Kein Vermischen mit den öffentlich sichtbaren Galerien

Passwortschutz pro Kunde

Jede Kundengalerie lässt sich einzeln mit einem eigenen Passwort versehen. Ohne das Passwort bleibt der Inhalt über den Kunden-Link nicht einsehbar – ideal, um Bildauswahlen diskret an einzelne Kunden zu übermitteln.

Verschieben zwischen den Bereichen

Galerien lassen sich per Drag & Drop nicht nur innerhalb des Kundenbaums neu anordnen, sondern auch direkt zwischen normalen und Kundengalerien hin- und herschieben – etwa wenn eine zunächst öffentliche Galerie später exklusiv an einen Kunden gehen soll.

Kunden-Kommentare

Kunden können direkt in ihrer Galerie eine Rückmeldung hinterlassen – etwa zur getroffenen Bildauswahl. Im Backend erscheint bei neuen oder ungelesenen Kommentaren ein Badge mit Zeitstempel, sodass nichts übersehen wird.

Optionaler Download der Originale

Statt nur Bilder zu markieren, kann der Kunde pro Kundengalerie wahlweise auch direkt die hochauflösenden Originalbilder selbst herunterladen – umschaltbar mit einem einzigen Schalter im Backend. Mehrere ausgewählte Bilder werden dabei automatisch zu einer ZIP-Datei gebündelt.

Backup erstellen

Ein Klick genügt: Das System erstellt ein vollständiges Backup aller Einstellungen, Konfigurationen, Galerie-Daten und Sprachdateien.

• Alle Konfigurationsdateien (JSON)
• Bild-Reihenfolgen und Infotexte aller Galerien
• Captions L1 (IPTC) und L2 (Sidecar-JSON)
• Sprachdateien als Rohtext
• Zeitstempel im Backup-Namen

Selektiver Restore

Beim Wiederherstellen wird ein Modal-Fenster angezeigt, in dem fünf Kategorien einzeln ein- oder ausgehakt werden können. So lässt sich z. B. nur das Design oder nur die Übersetzungen zurückspiegeln.

• Alle Kategorien standardmäßig aktiviert
• Einzelne Kategorien abwählbar
• Restore-Bericht mit Zusammenfassung

Erstellen & Aktualisieren

Läuft in mehreren Schritten ab, damit auch sehr viele Bilder nicht am Zeitlimit des Servers scheitern. Ein Auswahlfenster erlaubt, gezielt nur bestimmte Galerien, Kundengalerien oder den Hero-Ordner einzuschließen.

• Ordnerauswahl mit Aus-/Abwahl ganzer Zweige
• Bestehendes Paket inkrementell aktualisierbar (nur neue/geänderte Dateien)
• Fortschrittsanzeige über den gesamten Vorgang

Hoch- & Herunterladen

Ein bestehendes Paket lässt sich jederzeit als eine einzige ZIP-Datei herunterladen oder per Drag & Drop wieder hochladen – etwa um es auf eine andere Installation zu übertragen.

• Hochladen in kleinen Blöcken, auch bei niedrigem Server-Upload-Limit
• Erkennt vertauschte Dateien (z. B. eine Einstellungs-Sicherung statt eines Vollbackups)
• Alternativ auch per direktem FTP-Upload möglich

Wiederherstellen

Der Auswahlbaum beim Wiederherstellen zeigt den tatsächlichen Inhalt des jeweiligen Pakets – auch inzwischen gelöschte Galerien lassen sich darüber gezielt zurückholen. Ordner, die nicht im Backup enthalten sind, lassen sich nicht ankreuzen.

• Programmcode standardmäßig ausgenommen – ein Restore setzt so nie versehentlich ein späteres Update zurück
• Optionales Sicherheitsbackup vom aktuellen Stand direkt vor dem Restore
• Läuft nach dem Start bis zum Ende durch, kein Abbrechen mitten im Vorgang

Gut zu wissen

Ein paar Details, die beim täglichen Umgang mit dem vollständigen Backup hilfreich sind.

• Ein Klick auf ein Paket in der Liste zeigt, welche Ordner beim Erstellen ausgewählt waren
• Herunterladen und Aktualisieren/Löschen desselben Pakets gleichzeitig ist unproblematisch – der Server verarbeitet solche Anfragen automatisch nacheinander statt parallel

Automatische Prüfung

Nach jedem Login wird im Hintergrund geprüft, ob eine neuere Version veröffentlicht wurde – höchstens einmal pro Tag, um den Server nicht unnötig zu belasten.

• Automatik jederzeit ein-/ausschaltbar
• Manuelle Prüfung per Klick möglich
• Einzelne Versionen lassen sich ignorieren

Sichere Installation

Ein Klick auf „Jetzt installieren" lädt das Update herunter, prüft es auf Vollständigkeit und spielt es ein.

• Vorab-Abgleich: Paket-Inhalt muss zur erwarteten Version passen, sonst kein Eingriff
• Nur Programmdateien werden ersetzt (PHP, HTML, JS)
• Eigene Inhalte – Bilder, Einstellungen, Texte – bleiben unangetastet
• Hinweis auf ein neues Backup direkt nach erfolgreicher Installation

Session-Authentifizierung

Das Backend ist durch eine Anmelde-Maske geschützt. Passwort und Session werden serverseitig verwaltet – kein Token im URL, keine dauerhafte Cookie-Speicherung des Klartexts.

• PHP-Session nach Login
• Automatischer Logout nach Inaktivität
• Session-Status wird regelmäßig geprüft (Polling)

CSRF-Schutz

Alle zustandsverändernden API-Anfragen des Backends sind durch CSRF-Token gesichert. Das Token wird bei jeder Session neu generiert und in jedem Request-Header mitgesendet.

• Token in JavaScript über window.CSRF_TOKEN
• Jeder POST-Request prüft das Token serverseitig
• Schutz vor Cross-Site-Request-Forgery-Angriffen

Passwort-Hashing

Das Admin-Passwort wird als bcrypt-Hash gespeichert. Auch Passwörter für private Galerien können gehasht werden – ein Rückrechnen zum Klartext ist nicht möglich.

• bcrypt via password_hash() (PHP-Standard)
• Kein Klartext-Passwort in Konfigurationsdateien
• Passwort-Änderung jederzeit im Backend möglich

Admin-Login umbenennen

Die Datei admin.php kann in einen individuellen, nicht erratbaren Namen umbenannt werden – direkt im Backend oder manuell per FTP. Bots durchsuchen das Web gezielt nach Standardnamen; ein eigener Name macht das Backend schlicht unauffindbar.

• Im Backend unter Global → Sicherheit lässt sich die Datei direkt umbenennen
• Alternativ die Datei einfach per FTP auf dem Server umbenennen – das Backend erkennt den neuen Namen automatisch
• Den alten URL-Namen danach einmalig als Lesezeichen aktualisieren – fertig

Erweiterter Brute-Force-Schutz

Sobald die Admin-Datei umbenannt ist, kann ein zusätzlicher Schutz aktiviert werden: Wer zu oft nicht vorhandene Seiten aufruft (typisches Scanning-Verhalten), wird automatisch vom Admin-Login gesperrt. Galerie-Besucher und Suchmaschinen sind davon nicht betroffen.

• Konfigurierbar: Anzahl der Versuche, Zeitfenster, Sperrdauer
• Nur der Admin-Login wird gesperrt – die Galerie bleibt erreichbar
• Im Notfall einfach die Datei per FTP wieder in admin.php umbenennen – der Schutz greift dann automatisch nicht mehr

Eingabe-Validierung

Alle serverseitigen Eingaben werden validiert und bereinigt. Datei-Uploads und Pfad-Angaben werden gegen Path-Traversal-Angriffe gesichert.

• Normalisierung aller Galerie-Pfade
• Whitelist für erlaubte Dateierweiterungen
• Regex-Validierung für Sprachcodes und Dateinamen

Keine externe Abhängigkeit

Das gesamte System läuft ohne externe Dienste, Cloud-Anbindungen oder CDNs. Alle Daten bleiben auf dem eigenen Server.

• Keine Datenbank (kein SQL-Injection-Risiko)
• Keine externe API für Kern-Funktionen
• DSGVO-freundlich: keine Tracking-Dienste

Server-Kompatibilität

Verborgene und private Galerien sowie die Website-weite Privatschaltung sperren zusätzlich den direkten Aufruf der jeweiligen Bilddateien, damit ein bereits bekannter Link nicht weiterhin funktioniert. Das setzt einen Webserver mit .htaccess/mod_rewrite-Unterstützung voraus (siehe Systemvoraussetzungen). Fehlt diese Unterstützung, funktioniert die Galerie dennoch ganz normal weiter – nur dieser zusätzliche Link-Schutz sowie sauber lesbare Galerie-URLs entfallen dann.

• Wird automatisch erkannt: erscheint ein Warnhinweis oben im eingeloggten Backend, fehlt die Unterstützung auf diesem Server
• Ohne Warnhinweis ist alles wie gewohnt abgesichert – keine weitere Aktion nötig
• Zugangsdaten und Passwörter sind davon unabhängig immer geschützt, unabhängig vom Server
• Betrifft einzig „nackte" nginx-Installationen ohne .htaccess-Kompatibilität; bei klassischem (Apache-basiertem) Webhosting tritt das praktisch nie auf