WvdS.DokuWiki.Image Vtičnik

Responsive Image slike pomanjša na strežniku in jih postreže v velikosti, ki jo stran zares potrebuje — z medpomnilnikom in po želji kot vdelan izhod Base64. Paket je namenjen avtorjem, ki sliko vstavijo v določeni velikosti, ne da bi jo prej obrezali, in upraviteljem, ki spremljajo čas nalaganja in medpomnilnik.

Vstavite oznako → Izberite velikost in izhod → Preverite rezultat

Vticnik wkimage 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 wkimage -->
<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 wkimage za upodabljanje logotipov
• Zmanjšane HTTP zahteve - Ni potrebe po ločenih prenosih slik

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

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

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

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

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

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

Zahteva: Velika pasica, ki se redko spreminja.

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

Zahteva: Postaviti dve sliki eno nad drugo (npr. prenosnik s tablico pred njim).

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

Rezultat:

• Prenosnik kot osnovna slika (display:block)
• Tablica absolutno pozicionirana, rahlo zasukana s senco
• Obe sliki vgrajeni kot base64 (brez HTTP zahtev)

1. Razčlenjevanje sintakse
   └── Izvlece mediaId in parametre iz {{wk: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/wkimage/{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/wkimage/

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

Predpomnjene slike so shranjene v:

data/cache/wkimage/

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

Preko Skrbnik → Konfiguracija → wkimage:

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

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

Novo v različici 1.2.0: oznako wk:image je mogoče uporabiti neposredno v izsečkih WvdS.DokuWiki.Snippet Vtičnik.

Vtičnik wksnippet samodejno obdela oznake {{wk:image>...}} znotraj datotek izsečkov prek pomočnika wkimage.

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

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

Uporaba na wiki strani:

{{wk:snippet>hero_images}}

• WvdS.DokuWiki.Flat Predloga - Predloga uporablja wkimage za upodabljanje logotipov
• Predogled ob deljenju - Open Graph meta oznake (uporablja slike)
• PHP GD dokumentacija

Datoteka: lib/plugins/wkimage/syntax.php

Datoteka: lib/plugins/wkimage/helper.php

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

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

Vrne popolno <img> oznako z base64 Data-URI:

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

Ob napakah vrne HTML komentar:

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

Predloga Flat uporablja helper za upodabljanje logotipov:

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

<wk:audit stack=„doku“ title=„wkimage Vtičnik“>

<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

Vticnik: wkimage
Verzija: 1.1.0
Imenski prostor: lib/plugins/wkimage/
Avtor: Wolfgang van der Stille Wolfgang.van.der.Stille@gmail.com (The White Knight Labs)
Licenca: GPL 2