WvdS.DokuWiki.Image Vticnik

Vticnik: wvdsimage
Verzija: 1.1.0
Imenski prostor: lib/plugins/wvdsimage/
Avtor: Wolfgang van der Stille zeljko.petrusic@outlook.de
Licenca: GPL 2

Vticnik wvdsimage omogoca base64-kodirane slike kot Data-URI neposredno v atributu src oznak <img>.

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

Osnovne funkcije:

• base64 vgrajeni izhod - Slike vgrajene neposredno v HTML
• Strežniško spreminjanje velikosti - Samodejna prilagoditev velikosti
• Pretvorba formatov - PNG/JPEG/GIF v WebP
• Inteligentno predpomnjenje - Obdelane slike se predpomnijo
• Helper API - Programski dostop za predloge in vtičnike

• Odzivni logotipi - Visoko ločljivostne izvorne slike, ki se prilagajajo vsebnikom
• Optimizirane sličice - Samodejno spreminjanje velikosti brez ročnih različic slik
• Pretvorba formatov - JPEG v WebP za manjše datoteke
• Dokumenti brez povezave - PDF izvoz z vgrajenimi slikami
• Logotipi predlog - Predloga Flat uporablja wvdsimage za upodabljanje logotipov
• Zmanjšane HTTP zahteve - Ni potrebe po ločenih prenosih slik

{{wvds:image>mediaId|parameter1=vrednost1|parameter2=vrednost2}}

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

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

Zahteva: Logotip naj se prilagaja širini vsebnika, vendar nikoli ne presega 300px.

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

Rezultat:

• Izvorna slika (npr. 1200×480) je pomanjšana na 300×120
• CSS width: 100% jo naredi odzivno
• max-width: 300px preprecuje povecanje preko 300px

Zahteva: Optimizirati JPEG fotografijo za hitrejše nalaganje.

{{wvds:image>fotografije:ekipa.jpg|maxwidth=800|quality=80|format=webp|alt=Naša ekipa}}

Rezultat:

• Pretvori JPEG v WebP (pribl. 30% manjše)
• Pomanjša na najvec 800px širine
• Kakovost 80% za dober kompromis

Zahteva: Enotne sličice za galerijo slik.

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

Zahteva: Velika pasica, ki se redko spreminja.

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

1. Razčlenjevanje sintakse
   └── Izvlece mediaId in parametre iz {{wvds:image>...}}

2. Nalaganje izvorne slike
   └── Prebere datoteko iz data/media/{namespace}/{datoteka}
   └── Preveri format slike (PNG, JPEG, GIF, WebP)

3. Preverjanje predpomnilnika
   └── Ustvari zgoščeno vrednost: MD5(pot + mtime + širina + višina + kakovost + format)
   └── Preveri data/cache/wvdsimage/{hash}.{format}
   └── Ob zadetku predpomnilnika: Naloži predpomnjeno sliko

4. Obdelava slike (ob zgrešitvi predpomnilnika)
   └── imagecreatefrom{format}() - Naloži izvorno sliko
   └── imagecreatetruecolor() - Ustvari ciljno sliko
   └── imagecopyresampled() - Visokokakovostno skaliranje
   └── image{format}() - Shrani v ciljni format

5. Shranjevanje v predpomnilnik
   └── Zapiše obdelano sliko v data/cache/wvdsimage/

6. HTML izhod
   └── Ustvari <img src="data:image/{mime};base64,{podatki}" .../>

Predpomnjene slike so shranjene v:

data/cache/wvdsimage/

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

Preko Skrbnik → Konfiguracija → wvdsimage:

• PHP GD razširitev - Mora biti omogocena
• Podpora WebP - Potrebna za format=webp (PHP 7.1+ z libwebp)
• Pravice za pisanje - Za data/cache/wvdsimage/

Vticnik je varen za niti. Vzporedne zahteve za isto sliko lahko zacasno sprozijo podvojeno obdelavo, vendar se predpomnilnik zapisuje atomarno.

• WvdS.DokuWiki.Flat Predloga - Predloga uporablja wvdsimage za upodabljanje logotipov
• WvdS.DokuWiki.OpenGraph Vticnik - Open Graph meta oznake (uporablja slike)
• PHP GD dokumentacija

Datoteka: lib/plugins/wvdsimage/syntax.php

Datoteka: lib/plugins/wvdsimage/helper.php

Helper omogoča programski dostop do obdelave slik za predloge in vtičnike.

// Nalaganje helperja
$wvdsimage = plugin_load('helper', 'wvdsimage');
 
// Upodabljanje slike iz wiki medijev
$html = $wvdsimage->renderImage('wiki', 'wiki:logo.png', array(
    'maxwidth' => 300,
    'quality' => 90,
    'alt' => 'Logo',
    'class' => 'my-logo',
));
 
// Upodabljanje slike iz imenika predloge
$html = $wvdsimage->renderImage('template', 'logo.png', array(
    'maxwidth' => 300,
));
 
// Upodabljanje slike iz absolutne poti datoteke
$html = $wvdsimage->renderImage('file', '/pot/do/slike.jpg', array(
    'maxwidth' => 800,
    'format' => 'webp',
));

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

Ob napakah vrne HTML komentar:

<!-- wvdsimage: file not found: wiki:manjkajoča.png -->

Predloga Flat uporablja helper za upodabljanje logotipov:

// V 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',
        ));
    }
    // Rezervni način brez wvdsimage
    return '<img src="..." />';
}