Bugfix: Lightbox-Bilder werden nicht angezeigt #

Datum: 29. Oktober 2025
Problem: Viele Bilder werden nach Klick auf Thumbnails nicht in der Lightbox angezeigt
Beispiel: Artikel zum Flashback Symposium
Status: ✅ Vollständig gelöst

Problem-Analyse #

Ursprüngliches Problem #

Betroffene Dateien #

Implementierte Lösung #

1. eleventyImageTransformPlugin Konfiguration (.eleventy.js) #

Vorher:

// Inkonsistente/problematische Konfiguration
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    // Verschiedene Ansätze getestet, die nicht funktionierten
});

Nachher:

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    extensions: "html",
    formats: ["webp", "jpeg"],
    widths: [320, 480, 640, 768, 1024, 1440],
    defaultAttributes: {
        loading: "lazy",
        decoding: "async",
        sizes: "(min-width: 1024px) 1024px, 100vw"
    }
});

Wichtige Änderungen:

2. Lightbox JavaScript (_includes/layouts/base.njk) #

Vorher:

// Hardcodierte 1920px Größe
const lightboxSrc = thumbnailSrc.replace(/-\d+\.(webp|jpeg|jpg|png)$/, '-1920.$1');

Nachher:

// Intelligente srcset-Auswertung
const img = link.querySelector('img');
const srcset = img.getAttribute('srcset');
let lightboxSrc = thumbnailSrc;

if (srcset) {
    const srcsetEntries = srcset.split(',').map(entry => {
        const parts = entry.trim().split(' ');
        const url = parts[0];
        const width = parseInt(parts[1]);
        return { url, width };
    });
    
    // Größte verfügbare Bildgröße wählen
    const largestEntry = srcsetEntries.reduce((largest, current) => 
        current.width > largest.width ? current : largest
    );
    
    lightboxSrc = largestEntry.url;
}

Wichtige Verbesserungen:

3. Cache-Clearing und Rebuild #

Durchgeführte Schritte:

# Cache-Verzeichnisse geleert
Remove-Item -Recurse -Force _site\*
Remove-Item -Recurse -Force node_modules\.cache

# Vollständiger Rebuild
npm run build:11ty

Ergebnisse #

Vor der Lösung #

Nach der Lösung #

Testbeispiel: Flashback Symposium Artikel #

Technische Details #

Bildgenerierung #

Das Plugin erstellt jetzt konsistent folgende Größen für jedes Bild:

Jeweils in webp (modern, kleinere Dateigröße) und jpeg (Fallback) Format.

Browser-Kompatibilität #

Lessons Learned #

  1. Konsistente Konfiguration: Transform-Plugins brauchen einheitliche Width-Konfigurationen
  2. Dynamisches JavaScript: Hardcodierte Werte in JavaScript können bei variierenden Quellen problematisch sein
  3. srcset-Parsing: Moderne responsive Images erfordern intelligente JavaScript-Logik
  4. Cache-Management: Bei Plugin-Änderungen vollständiges Cache-Clearing notwendig

Auswirkungen #

Zukünftige Überlegungen #