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

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

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

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

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. Kein Plugin, kein Add-on nötig.

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.

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

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