Die technische Entstehung und Architektur des hallwebsite Filter Gallery Plugins

Einleitung: Ein Galerie-Plugin aus Entwicklerperspektive

Die Entwicklung des Hallo Filter Gallery Plugins begann mit einer klaren technischen Fragestellung:
Wie lässt sich eine leistungsfähige, filterbare Galerie umsetzen, ohne WordPress zu verbiegen oder unnötige Datenmodelle einzuführen?

Viele existierende Lösungen arbeiten mit eigenen Datenstrukturen, duplizieren Medien oder bauen komplexe Zwischenebenen aus Custom Post Types, Meta-Abfragen und proprietären Datenformaten. Das Ergebnis ist oft schwer wartbarer Code, eingeschränkte Flexibilität und unnötige Performancekosten.

Das Ziel dieses Plugins war von Anfang an ein anderes:
Die WordPress Media Library selbst sollte die Datenquelle sein.

Zentrale Architekturentscheidung: Medien sind die Inhalte

Eine der wichtigsten Entscheidungen war, keinen eigenen „Bild“-Post-Type einzuführen. Stattdessen greift das Plugin direkt auf WordPress Attachments zu.

Technisch bedeutet das:

• Bilder bleiben ganz normale attachment Posts
• keine Duplikate
• keine Shadow-Posts
• keine Synchronisationsprobleme

Alle Informationen – Metadaten, Taxonomien, Alt-Texte, Beschreibungen – existieren bereits in WordPress. Das Plugin nutzt diese Daten direkt, ohne sie zu kopieren oder umzubauen.

Custom Taxonomies direkt auf Attachments – ohne Umwege

Ein Kernfeature des Plugins ist die Filterung über beliebige Taxonomien, die für attachment registriert sind.
Das ist entscheidend, denn genau hier setzen Tools wie JetEngine oder ACF an.

Warum das wichtig ist

Statt Bilder erst einem Custom Post Type zuzuordnen (z. B. „Projekt“, „Portfolio“, „Eintrag“), können Taxonomien direkt den Medien selbst zugewiesen werden:

• Farben
• Themen
• Stilrichtungen
• Kunden
• Materialien
• Orte
• Emotionen
• beliebige Metadaten

Das Plugin liest diese Taxonomien direkt per get_the_terms() vom Attachment aus und baut daraus automatisch:

• Filtergruppen
• Filterbuttons
• Filterlogik
• Datenattribute im Frontend

Kein Zwischenschritt. Kein Mapping. Kein zusätzlicher Query-Layer.

Galerie als Container, nicht als Datenquelle

Warum gibt es trotzdem einen Custom Post Type „Galleries“?

Ganz bewusst aus einem anderen Grund:
Nicht als Quelle für Inhalte, sondern als Container für Konfiguration und Reihenfolge.

Eine Galerie speichert lediglich:

• welche Attachments verwendet werden
• in welcher Reihenfolge sie erscheinen
• optionale pro-Galerie-Einstellungen

Die Bilder selbst bleiben vollständig unabhängig.
Das bringt mehrere Vorteile:

• dieselbe Bildsammlung kann mehrfach verwendet werden
• unterschiedliche Filter- oder Layout-Einstellungen pro Seite
• keine Redundanz in der Datenbank
• saubere Trennung von Inhalt und Darstellung

Filterlogik: deterministisch, nachvollziehbar, erweiterbar

Die Filterlogik wurde bewusst vollständig im Frontend umgesetzt – basierend auf vorab generierten Datensätzen.

Technisches Prinzip

Beim Rendern der Galerie:

• jedes Bild erhält ein data-terms Attribut
• darin: ein JSON-Objekt mit allen Taxonomien und zugehörigen Term-Slugs
• Beispiel: { "farbe": ["rot", "blau"], "material": ["holz"] }

Die Filterung erfolgt dann rein clientseitig:

• kein Reload
• kein AJAX
• keine zusätzlichen Queries
• keine serverseitige Neuberechnung

Das Ergebnis ist:

• sofortiges Feedback
• stabile Performance auch bei vielen Bildern
• vorhersehbares Verhalten

Filtermodi: logische Klarheit

Ein häufiger Fehler in Galerie-Plugins ist eine unklare oder inkonsistente Filterlogik.
Hier wurde bewusst auf explizite Modi gesetzt:

• ODER innerhalb einer Taxonomie, UND zwischen Taxonomien
  (der praxisnahe Standard)
• ODER über alles
• UND über alles

Die Logik ist transparent, testbar und leicht erweiterbar – auch für zukünftige Filterarten.

Reset-Logik als Teil der UX-Architektur

Reset-Buttons sind kein kosmetisches Detail, sondern Teil der Interaktionslogik.

Technisch umgesetzt wurde:

• Reset-Buttons sind standardmäßig unsichtbar
• sie erscheinen nur, wenn ein Filter aktiv ist
• Gruppen-Resets reagieren ausschließlich auf ihre eigene Taxonomie
• ein globaler „Reset All“ reagiert auf den Gesamtzustand

Das reduziert visuelle Unruhe und verhindert unnötige Interaktionselemente.

Darstellung: Layout-Engines statt CSS-Spielereien

Statt alles über CSS-Tricks zu lösen, arbeitet das Plugin mit klar getrennten Layout-Engines:

Masonry

• JS-basiert
• deterministische Spalten
• saubere Reflow-Logik bei Resize und Filteränderungen

Fixed Grid mit Seitenverhältnis

• CSS Grid
• aspect-ratio
• optionales Cropping (object-fit)
• zusätzlich: individuelle Seitenverhältnisse pro Bild

Justified Mosaic (Google-Photos-Stil)

• echte Breitenberechnung
• präzise Rundungskorrektur
• keine schleichenden Pixelabweichungen
• stabile Reihen auch bei Filteränderungen

Gerade beim Mosaic-Layout wurde bewusst viel Zeit in numerische Stabilität investiert, um visuelle Drift zu vermeiden.

Individuelle Seitenverhältnisse pro Bild (technisch sauber gelöst)

Ein besonderes Feature ist die Möglichkeit, pro Bild ein eigenes Seitenverhältnis festzulegen.

Technisch umgesetzt als:

• Metadaten innerhalb der Galerie
• kein globaler Eingriff ins Attachment
• Unterstützung für:
  • feste Presets (1:1, 4:3, 3:2, 16:9)
  • benutzerdefinierte Werte (z. B. 7:5)

Damit bleibt die Media Library neutral, während die Galerie maximale Freiheit bietet.

Lightbox: Kadence-first, fallback-autark

Die Lightbox-Architektur folgt einem klaren Prinzip:

1. Wenn Kadence verfügbar ist → nutzen
2. Wenn nicht → eigene Fallback-Lightbox

Die Fallback-Lightbox ist bewusst:

• vollständig autark
• unabhängig von Theme-CSS
• inline-styled gegen CSS-Leaks
• filter-aware (nur sichtbare Bilder werden navigiert)

Das verhindert typische Konflikte mit globalen Stylesheets.

Shortcode-System: deklarativ statt magisch

Der Shortcode ist bewusst einfach gehalten:

• klare Attribute
• keine verschachtelten Konstrukte
• keine impliziten Defaults

Wichtigstes Prinzip:
Shortcode-Einstellungen überschreiben globale Einstellungen immer.

Das macht das Verhalten vorhersagbar und reduziert Fehlkonfigurationen.

Fazit: Direkter Zugriff statt Umwege

Die technische Leitidee dieses Plugins lässt sich auf einen Satz reduzieren:

Nutze die Stärken von WordPress, statt sie zu umgehen.

Durch den direkten Zugriff auf Medien, Taxonomien und Metadaten entstehen:

• weniger Code
• weniger Fehlerquellen
• bessere Performance
• höhere Flexibilität

Das Hallo Filter Gallery Plugin ist kein generisches „Alleskönner“-Tool, sondern eine gezielt entwickelte Lösung für Projekte, in denen Kontrolle, Struktur und saubere Datenmodelle wichtiger sind als visuelle Effekthascherei.