WvdS Responsive Image Plugin

Responsive Image skaliert Bilder auf dem Server und liefert sie in der Größe aus, die die Seite tatsächlich braucht — mit Zwischenspeicher und wahlweise als eingebettete Base64-Ausgabe. Gedacht ist das Paket für Autoren, die ein Bild in einer bestimmten Größe einsetzen, ohne es vorher zu beschneiden, und für Verwalter, die Ladezeiten und Zwischenspeicher im Blick behalten.

Schnelleinstieg: Ein Bild in der gewünschten Größe einbinden — der kürzeste Weg zum ersten Ergebnis, in drei Schritten.

Marke setzen → Größe und Ausgabe wählen → Ergebnis prüfen

Das wkimage Plugin ermöglicht base64-kodierte Bilder als Data-URI direkt im src-Attribut von <img>-Tags.

<!-- Standard DokuWiki -->
<img src="/lib/exe/fetch.php?media=wiki:logo.png" />
 
<!-- Mit wkimage -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..." />

Kernfunktionen:

• base64-Inline-Ausgabe - Bilder direkt im HTML eingebettet
• Serverseitiges Resizing - Automatische Größenanpassung
• Format-Konvertierung - PNG/JPEG/GIF zu WebP
• Intelligentes Caching - Verarbeitete Bilder werden gecacht
• Helper-API - Programmatischer Zugriff für Templates und Plugins
• Inline-CSS Support - style Parameter für komplexe Positionierung
• wksnippet Integration - Verwendbar in HTML-Snippets

• Responsive Logos - Hochauflösende Quellbilder, die sich an Container anpassen
• Optimierte Thumbnails - Automatische Verkleinerung ohne manuelle Bildversionen
• Format-Konvertierung - JPEG zu WebP für kleinere Dateigrößen
• Offline-Dokumente - PDF-Export mit eingebetteten Bildern
• Template-Logos - Flat Template nutzt wkimage für Logo-Rendering
• Reduzierte HTTP-Requests - Keine separaten Bild-Downloads nötig
• Bild-Overlays - Komplexe Positionierung mit style Parameter
• Wiederverwendbare Snippets - Integration mit wksnippet für HTML-Bausteine

{{wk:image>mediaId|parameter1=wert1|parameter2=wert2}}

{{wk:image>wiki:logo.png}}

{{wk:image>wiki:logo.png|width=100%|maxwidth=600|quality=85|format=webp|cache=1w|alt=Firmenlogo|class=logo-responsive|style=border-radius:8px|lazy=1}}

Anforderung: Logo soll sich an die Containerbreite anpassen, aber nie größer als 300px werden.

{{wk:image>wiki:logo_hires.png|width=100%|maxwidth=300|alt=WvdS Logo}}

Ergebnis:

• Quellbild (z.B. 1200×480) wird auf 300×120 skaliert
• CSS width: 100% macht es responsiv
• max-width: 300px verhindert Vergrößerung über 300px

Anforderung: JPEG-Foto optimieren für schnellere Ladezeit.

{{wk:image>fotos:team.jpg|maxwidth=800|quality=80|format=webp|alt=Unser Team}}

Ergebnis:

• Konvertiert JPEG zu WebP (ca. 30% kleiner)
• Skaliert auf maximal 800px Breite
• Qualität 80% für guten Kompromiss

Anforderung: Einheitliche Thumbnails für Bildergalerie.

| {{wk:image>galerie:bild1.jpg|maxwidth=150|maxheight=150|alt=Bild 1}} | {{wk:image>galerie:bild2.jpg|maxwidth=150|maxheight=150|alt=Bild 2}} |

Anforderung: Großes Banner-Bild, das sich selten ändert.

{{wk:image>design:hero-banner.png|width=100%|maxwidth=1920|quality=90|cache=1m|alt=Willkommen}}

Anforderung: Zwei Bilder übereinander positionieren (z.B. Laptop mit Tablet davor).

<div style="position: relative; display: inline-block;">
  {{wk:image>de:laptop.png|maxwidth=400|alt=Laptop|style=display:block}}
  {{wk:image>de:tablet.png|maxwidth=180|alt=Tablet|style=position:absolute;right:-30px;bottom:10px;transform:rotate(-5deg);box-shadow:0 4px 15px rgba(0,0,0,0.3)}}
</div>

Ergebnis:

• Laptop als Basis-Bild (display:block)
• Tablet absolut positioniert, leicht gedreht mit Schatten
• Beide Bilder als base64 inline (keine HTTP-Requests)

1. Syntax-Parsing
   └── Extrahiert mediaId und Parameter aus {{wk:image>...}}

2. Quellbild laden
   └── Liest Datei aus data/media/{namespace}/{datei}
   └── Validiert Bildformat (PNG, JPEG, GIF, WebP)

3. Cache-Prüfung
   └── Generiert Hash: MD5(pfad + mtime + breite + höhe + qualität + format)
   └── Prüft data/cache/wkimage/{hash}.{format}
   └── Bei Cache-Hit: Lädt gecachtes Bild

4. Bildverarbeitung (bei Cache-Miss)
   └── imagecreatefrom{format}() - Lädt Quellbild
   └── imagecreatetruecolor() - Erstellt Zielbild
   └── imagecopyresampled() - Hochwertige Skalierung
   └── image{format}() - Speichert in Zielformat

5. Cache-Speicherung
   └── Schreibt verarbeitetes Bild nach data/cache/wkimage/

6. HTML-Ausgabe
   └── Generiert <img src="data:image/{mime};base64,{daten}" .../>

Gecachte Bilder werden gespeichert in:

data/cache/wkimage/

Dateinamen-Format: {MD5-Hash}.{format}

Über Admin → Konfiguration → wkimage:

• PHP GD-Extension - Muss aktiviert sein
• WebP-Unterstützung - Für format=webp benötigt (PHP 7.1+ mit libwebp)
• Schreibrechte - Für data/cache/wkimage/

Das Plugin ist thread-safe. Parallele Anfragen für dasselbe Bild können temporär doppelte Verarbeitung auslösen, aber der Cache wird atomar geschrieben.

Neu in Version 1.2.0: Das wk:image Tag kann direkt in WvdS Snippet Plugin-Snippets verwendet werden.

Das wksnippet-Plugin verarbeitet {{wk:image>...}} Tags innerhalb von Snippet-Dateien automatisch über den wkimage-Helper.

Datei: lib/plugins/wksnippet/snippets/hero_images.html

<div class="hero-devices" style="position: relative; display: inline-block; margin: 20px 0;">
  {{wk:image>de:laptop.png|maxwidth=400|alt=Laptop|style=display:block}}
  {{wk:image>de:tablet.png|maxwidth=180|alt=Tablet|style=position:absolute;right:-30px;bottom:10px;transform:rotate(-5deg);box-shadow:0 4px 15px rgba(0,0,0,0.3)}}
</div>

Verwendung in Wiki-Seite:

{{wk:snippet>hero_images}}

• WvdS Snippet Plugin - Wiederverwendbare HTML-Snippets (unterstützt wk:image Tags)
• WvdS.DokuWiki.Flat Template - Template nutzt wkimage für Logo-Rendering
• Vorschau beim Teilen - Open Graph Meta-Tags (nutzt Bilder)
• PHP GD-Dokumentation

Datei: lib/plugins/wkimage/syntax.php

Datei: lib/plugins/wkimage/helper.php

Der Helper ermöglicht programmatischen Zugriff auf die Bildverarbeitung für Templates und Plugins.

// Helper laden
$wkimage = plugin_load('helper', 'wkimage');
 
// Bild aus Wiki-Media rendern
$html = $wkimage->renderImage('wiki', 'wiki:logo.png', array(
    'maxwidth' => 300,
    'quality' => 90,
    'alt' => 'Logo',
    'class' => 'my-logo',
));
 
// Bild aus Template-Verzeichnis
$html = $wkimage->renderImage('template', 'logo.png', array(
    'maxwidth' => 300,
));
 
// Bild aus absolutem Dateipfad
$html = $wkimage->renderImage('file', '/path/to/image.jpg', array(
    'maxwidth' => 800,
    'format' => 'webp',
));

Gibt einen vollständigen <img>-Tag mit base64 Data-URI zurück:

<img src="data:image/png;base64,iVBORw0KGgoAAAA..." width="300" height="120" alt="Logo" class="my-logo"/>

Bei Fehlern wird ein HTML-Kommentar zurückgegeben:

<!-- wkimage: file not found: wiki:missing.png -->

Das Flat Template nutzt den Helper für Logo-Rendering:

// In lib/tpl/flat/lang_helper.php
function tpl_renderLogo() {
    $wkimage = plugin_load('helper', 'wkimage');
    if ($wkimage) {
        return $wkimage->renderImage('wiki', $logoPath, array(
            'maxwidth' => $maxWidth,
            'quality' => $quality,
            'alt' => $siteTitle,
            'class' => 'logo-img',
        ));
    }
    // Fallback ohne wkimage
    return '<img src="..." />';
}

<wk:audit stack=„doku“ title=„wkimage Plugin“>

<wk:include ref="code:qualitaet" critical="true">[x][x][x][x]</wk:include>
<wk:include ref="stacks:dokuwiki-php">[x][x][x][x][x]</wk:include>
<wk:include ref="sicherheit:kritis" critical="true">[x][x][x][-][-]</wk:include>

</wk:audit>

DISCUSSION

Plugin: wkimage
Version: 1.2.0
Namespace: lib/plugins/wkimage/
Autor: Wolfgang van der Stille Wolfgang.van.der.Stille@gmail.com (The White Knight Labs)
Lizenz: GPL 2