WvdS.DokuWiki.Image Plugin

Plugin: wvdsimage
Version: 1.2.0
Namespace: lib/plugins/wvdsimage/
Autor: Wolfgang van der Stille zeljko.petrusic@outlook.de
Lizenz: GPL 2

Das wvdsimage 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 wvdsimage -->
<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
• wvdssnippet 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 wvdsimage für Logo-Rendering
• Reduzierte HTTP-Requests - Keine separaten Bild-Downloads nötig
• Bild-Overlays - Komplexe Positionierung mit style Parameter
• Wiederverwendbare Snippets - Integration mit wvdssnippet für HTML-Bausteine

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

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

{{wvds: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.

{{wvds: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.

{{wvds: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.

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

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

{{wvds: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;">
  {{wvds:image>de:laptop.png|maxwidth=400|alt=Laptop|style=display:block}}
  {{wvds: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 {{wvds: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/wvdsimage/{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/wvdsimage/

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

Gecachte Bilder werden gespeichert in:

data/cache/wvdsimage/

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

Über Admin → Konfiguration → wvdsimage:

• 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/wvdsimage/

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 wvds:image Tag kann direkt in WvdS.DokuWiki.Snippet Plugin-Snippets verwendet werden.

Das wvdssnippet-Plugin verarbeitet {{wvds:image>...}} Tags innerhalb von Snippet-Dateien automatisch über den wvdsimage-Helper.

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

<div class="hero-devices" style="position: relative; display: inline-block; margin: 20px 0;">
  {{wvds:image>de:laptop.png|maxwidth=400|alt=Laptop|style=display:block}}
  {{wvds: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:

{{wvds:snippet>hero_images}}

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

Datei: lib/plugins/wvdsimage/syntax.php

Datei: lib/plugins/wvdsimage/helper.php

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

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

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

Bei Fehlern wird ein HTML-Kommentar zurückgegeben:

<!-- wvdsimage: 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() {
    $wvdsimage = plugin_load('helper', 'wvdsimage');
    if ($wvdsimage) {
        return $wvdsimage->renderImage('wiki', $logoPath, array(
            'maxwidth' => $maxWidth,
            'quality' => $quality,
            'alt' => $siteTitle,
            'class' => 'logo-img',
        ));
    }
    // Fallback ohne wvdsimage
    return '<img src="..." />';
}