Plugin: wvdsimage
Versione: 1.2.0
Namespace: lib/plugins/wvdsimage/
Autore: Wolfgang van der Stille zeljko.petrusic@outlook.de
Licenza: GPL 2

Il plugin wvdsimage consente immagini codificate base64 come Data-URI direttamente nell'attributo src dei tag <img>.

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

Funzioni principali:

• Output inline base64 - Immagini incorporate direttamente nell'HTML
• Ridimensionamento lato server - Adattamento automatico delle dimensioni
• Conversione formato - PNG/JPEG/GIF a WebP
• Caching intelligente - Le immagini elaborate vengono cachate
• Helper API - Accesso programmatico per template e plugin
• Supporto CSS inline - Parametro style per posizionamento complesso
• Integrazione wvdssnippet - Utilizzabile negli snippet HTML

• Logo responsive - Immagini ad alta risoluzione che si adattano al container
• Miniature ottimizzate - Riduzione automatica senza versioni manuali
• Conversione formato - JPEG a WebP per file più piccoli
• Documenti offline - Export PDF con immagini incorporate
• Logo template - Il template Flat usa wvdsimage per il rendering del logo
• Riduzione richieste HTTP - Nessun download separato delle immagini
• Overlay immagini - Posizionamento complesso con parametro style
• Snippet riutilizzabili - Integrazione con wvdssnippet per blocchi HTML

{{wvds:image>mediaId|parametro1=valore1|parametro2=valore2}}

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

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

Requisito: Logo che si adatta alla larghezza del container, ma mai più grande di 300px.

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

Risultato:

• Immagine sorgente (es. 1200×480) viene scalata a 300×120
• CSS width: 100% la rende responsive
• max-width: 300px impedisce l'ingrandimento oltre 300px

Requisito: Ottimizzazione foto JPEG per caricamento più veloce.

{{wvds:image>fotos:team.jpg|maxwidth=800|quality=80|format=webp|alt=Il nostro team}}

Risultato:

• Converte JPEG in WebP (circa 30% più piccolo)
• Scala a massimo 800px di larghezza
• Qualità 80% per buon compromesso

Requisito: Miniature uniformi per galleria immagini.

| {{wvds:image>galleria:img1.jpg|maxwidth=150|maxheight=150|alt=Immagine 1}} | {{wvds:image>galleria:img2.jpg|maxwidth=150|maxheight=150|alt=Immagine 2}} |

Requisito: Grande immagine banner che cambia raramente.

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

Requisito: Due immagini sovrapposte (es. laptop con tablet davanti).

<div style="position: relative; display: inline-block;">
  {{wvds:image>it:laptop.png|maxwidth=400|alt=Laptop|style=display:block}}
  {{wvds:image>it: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>

Risultato:

• Laptop come immagine base (display:block)
• Tablet posizionato in modo assoluto, leggermente ruotato con ombra
• Entrambe le immagini come base64 inline (nessuna richiesta HTTP)

1. Parsing sintassi
   └── Estrae mediaId e parametri da {{wvds:image>...}}

2. Caricamento immagine sorgente
   └── Legge file da data/media/{namespace}/{file}
   └── Valida formato immagine (PNG, JPEG, GIF, WebP)

3. Verifica cache
   └── Genera hash: MD5(percorso + mtime + larghezza + altezza + qualità + formato)
   └── Verifica data/cache/wvdsimage/{hash}.{format}
   └── Su cache hit: Carica immagine cachata

4. Elaborazione immagine (su cache miss)
   └── imagecreatefrom{format}() - Carica immagine sorgente
   └── imagecreatetruecolor() - Crea immagine destinazione
   └── imagecopyresampled() - Scaling di alta qualità
   └── image{format}() - Salva nel formato destinazione

5. Salvataggio cache
   └── Scrive immagine elaborata in data/cache/wvdsimage/

6. Output HTML
   └── Genera <img src="data:image/{mime};base64,{dati}" .../>

Le immagini cachate vengono salvate in:

data/cache/wvdsimage/

Formato nome file: {MD5-hash}.{formato}

Tramite Admin → Configurazione → wvdsimage:

• Estensione PHP GD - Deve essere attivata
• Supporto WebP - Per format=webp richiesto (PHP 7.1+ con libwebp)
• Permessi scrittura - Per data/cache/wvdsimage/

Il plugin è thread-safe. Richieste parallele per la stessa immagine possono temporaneamente causare elaborazione doppia, ma la cache viene scritta in modo atomico.

Nuovo nella versione 1.2.0: Il tag wvds:image può essere usato direttamente negli snippet WvdS.DokuWiki.Snippet Plugin.

Il plugin wvdssnippet elabora automaticamente i tag {{wvds:image>...}} all'interno dei file snippet tramite l'helper wvdsimage.

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

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

Utilizzo nella pagina wiki:

{{wvds:snippet>hero_images}}

• WvdS.DokuWiki.Snippet Plugin - Snippet HTML riutilizzabili (supporta tag wvds:image)
• WvdS.DokuWiki.Flat Template - Template usa wvdsimage per rendering logo
• WvdS.DokuWiki.OpenGraph Plugin - Meta tag Open Graph (usa immagini)
• Documentazione PHP GD

File: lib/plugins/wvdsimage/syntax.php

File: lib/plugins/wvdsimage/helper.php

L'helper consente accesso programmatico all'elaborazione immagini per template e plugin.

// Carica helper
$wvdsimage = plugin_load('helper', 'wvdsimage');
 
// Renderizza immagine da Wiki-Media
$html = $wvdsimage->renderImage('wiki', 'wiki:logo.png', array(
    'maxwidth' => 300,
    'quality' => 90,
    'alt' => 'Logo',
    'class' => 'my-logo',
));
 
// Immagine dalla directory template
$html = $wvdsimage->renderImage('template', 'logo.png', array(
    'maxwidth' => 300,
));
 
// Immagine da percorso file assoluto
$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"/>

In caso di errori restituisce un commento HTML:

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