WvdS.DokuWiki.Image Dodatak

Dodatak: wvdsimage
Verzija: 1.2.0
Namespace: lib/plugins/wvdsimage/
Autor: Wolfgang van der Stille zeljko.petrusic@outlook.de
Licenca: GPL 2

Dodatak wvdsimage omogućuje base64-kodirane slike kao Data-URI izravno u src atributu <img> oznaka.

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

Ključne funkcije:

• base64-inline izlaz - Slike izravno ugrađene u HTML
• Serversko resizanje - Automatska prilagodba veličine
• Konverzija formata - PNG/JPEG/GIF u WebP
• Inteligentno caching - Obrađene slike se cacheiraju
• Helper API - Programski pristup za predloške i dodatke
• Inline-CSS podrška - style parametar za složeno pozicioniranje
• wvdssnippet integracija - Korištenje u HTML snippetima

• Responzivni logotipi - Slike visoke rezolucije koje se prilagođavaju kontejneru
• Optimizirane minijature - Automatsko smanjenje bez ručnih verzija slika
• Konverzija formata - JPEG u WebP za manje datoteke
• Offline dokumenti - PDF izvoz s ugrađenim slikama
• Logotipi predloška - Flat predložak koristi wvdsimage za renderiranje logotipa
• Smanjeni HTTP zahtjevi - Nisu potrebna odvojena preuzimanja slika
• Overlay slike - Složeno pozicioniranje s style parametrom
• Višekratno korištivi snippeti - Integracija s wvdssnippet za HTML blokove

{{wvds:image>mediaId|parametar1=vrijednost1|parametar2=vrijednost2}}

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

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

Zahtjev: Logotip koji se prilagođava širini kontejnera, ali nikad nije veći od 300px.

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

Rezultat:

• Izvorna slika (npr. 1200×480) se skalira na 300×120
• CSS width: 100% čini je responzivnom
• max-width: 300px sprječava povećanje preko 300px

Zahtjev: Optimizacija JPEG fotografije za brže učitavanje.

{{wvds:image>fotos:team.jpg|maxwidth=800|quality=80|format=webp|alt=Naš tim}}

Rezultat:

• Konvertira JPEG u WebP (oko 30% manje)
• Skalira na maksimalno 800px širine
• Kvaliteta 80% za dobar kompromis

Zahtjev: Ujednačene minijature za galeriju slika.

| {{wvds:image>galerie:slika1.jpg|maxwidth=150|maxheight=150|alt=Slika 1}} | {{wvds:image>galerie:slika2.jpg|maxwidth=150|maxheight=150|alt=Slika 2}} |

Zahtjev: Velika banner slika koja se rijetko mijenja.

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

Zahtjev: Dvije slike jedna preko druge (npr. laptop s tabletom ispred).

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

Rezultat:

• Laptop kao bazna slika (display:block)
• Tablet apsolutno pozicioniran, lagano rotiran sa sjenom
• Obje slike kao base64 inline (bez HTTP zahtjeva)

1. Parsiranje sintakse
   └── Izvlači mediaId i parametre iz {{wvds:image>...}}

2. Učitavanje izvorne slike
   └── Čita datoteku iz data/media/{namespace}/{datoteka}
   └── Validira format slike (PNG, JPEG, GIF, WebP)

3. Provjera cachea
   └── Generira hash: MD5(putanja + mtime + širina + visina + kvaliteta + format)
   └── Provjerava data/cache/wvdsimage/{hash}.{format}
   └── Kod cache pogotka: Učitava cacheiranu sliku

4. Obrada slike (kod cache promašaja)
   └── imagecreatefrom{format}() - Učitava izvornu sliku
   └── imagecreatetruecolor() - Kreira ciljnu sliku
   └── imagecopyresampled() - Visokokvalitetno skaliranje
   └── image{format}() - Sprema u ciljni format

5. Pohrana cachea
   └── Zapisuje obrađenu sliku u data/cache/wvdsimage/

6. HTML izlaz
   └── Generira <img src="data:image/{mime};base64,{podaci}" .../>

Cacheirane slike se pohranjuju u:

data/cache/wvdsimage/

Format naziva datoteke: {MD5-hash}.{format}

Preko Admin → Konfiguracija → wvdsimage:

• PHP GD ekstenzija - Mora biti aktivirana
• WebP podrška - Za format=webp potrebno (PHP 7.1+ s libwebp)
• Prava pisanja - Za data/cache/wvdsimage/

Dodatak je thread-safe. Paralelni zahtjevi za istu sliku mogu privremeno pokrenuti dvostruku obradu, ali cache se zapisuje atomski.

Novo u verziji 1.2.0: Oznaka wvds:image može se koristiti izravno u WvdS.DokuWiki.Snippet Dodatak snippetima.

Dodatak wvdssnippet automatski obrađuje {{wvds:image>...}} oznake unutar snippet datoteka preko wvdsimage helpera.

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

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

Korištenje na wiki stranici:

{{wvds:snippet>hero_images}}

• WvdS.DokuWiki.Snippet Dodatak - Višekratno korištivi HTML snippeti (podržava wvds:image oznake)
• WvdS.DokuWiki.Flat Predložak - Predložak koristi wvdsimage za renderiranje logotipa
• WvdS.DokuWiki.OpenGraph Dodatak - Open Graph meta oznake (koristi slike)
• PHP GD dokumentacija

Datoteka: lib/plugins/wvdsimage/syntax.php

Datoteka: lib/plugins/wvdsimage/helper.php

Helper omogućuje programski pristup obradi slika za predloške i dodatke.

// Učitaj helper
$wvdsimage = plugin_load('helper', 'wvdsimage');
 
// Renderiraj sliku iz Wiki-Media
$html = $wvdsimage->renderImage('wiki', 'wiki:logo.png', array(
    'maxwidth' => 300,
    'quality' => 90,
    'alt' => 'Logo',
    'class' => 'my-logo',
));
 
// Slika iz direktorija predloška
$html = $wvdsimage->renderImage('template', 'logo.png', array(
    'maxwidth' => 300,
));
 
// Slika iz apsolutne putanje datoteke
$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"/>

Kod grešaka vraća HTML komentar:

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

Flat predložak koristi helper za renderiranje logotipa:

// U 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 bez wvdsimage
    return '<img src="..." />';
}