Responsive Image

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.

Hitri začetek: vstavljanje slike v želeni velikosti – najkrajša pot do prvega rezultata, v treh korakih.

Vstavite oznako → Izberite velikost in izhod → Preverite rezultat

Vtičnik wkimage omogoča slike, kodirane v base64, 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:

• Vdelan izhod base64 – slike so vdelane neposredno v HTML
• Spreminjanje velikosti na strežniku – velikost se prilagodi samodejno
• Pretvorba oblik zapisa – PNG/JPEG/GIF v WebP
• Premišljeno predpomnjenje – obdelane slike se shranijo v predpomnilnik
• API pomočnika – programski dostop za predloge in vtičnike
• Podpora za vgrajeni CSS – parameter style za zahtevnejšo postavitev
• Povezava z wksnippet – uporabno v izsekih HTML

• Odzivni logotipi – izvorne slike visoke ločljivosti, ki se prilagodijo vsebniku
• Optimizirane sličice – samodejna pomanjšava brez ročno pripravljenih različic slik
• Pretvorba oblik zapisa – JPEG v WebP za manjše datoteke
• Dokumenti brez povezave – izvoz PDF z vdelanimi slikami
• Logotipi predlog – predloga Flat uporablja wkimage za izris logotipa
• Manj zahtev HTTP – slik ni treba prenašati posebej
• Prekrivanje slik – zahtevnejša postavitev s parametrom style
• Ponovno uporabni izseki – povezava z wksnippet za gradnike HTML

{{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|style=border-radius:8px|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 preprečuje povečanje 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 največ 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
   └── Izlušči mediaId in parametre iz {{wk:image>...}}

2. Nalaganje izvorne slike
   └── Prebere datoteko iz data/media/{namespace}/{datoteka}
   └── Preveri obliko zapisa 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/

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

Prek Skrbništvo → Splošne nastavitve → wkimage:

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

Vtičnik je varen za niti. Vzporedne zahteve za isto sliko lahko začasno sprožijo podvojeno obdelavo, vendar se predpomnilnik zapisuje atomarno.

Novo v različici 1.2.0: oznako wk:image je mogoče uporabiti neposredno v izsekih Snippet.

Vtičnik wksnippet oznake {{wk:image>...}} v datotekah izsekov samodejno obdela prek pomočnika wkimage.

Datoteka: <savedir>/wksnippet/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 strani wikija:

{{wk:snippet>hero_images}}

• Snippet – ponovno uporabni izseki HTML (podpirajo oznake wk:image)
• WvdS.DokuWiki.Flat Template – predloga uporablja wkimage za izris logotipa
• Predogled ob deljenju – metaoznake Open Graph (uporabljajo slike)
• Dokumentacija PHP GD (v angleščini)

Datoteka: lib/plugins/wkimage/syntax.php

Datoteka: lib/plugins/wkimage/helper.php

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

// Nalaganje pomočnika
$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 pomočnik za izris logotipa:

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

Vtičnik: wkimage
Različica: 1.2.0
Imenski prostor: lib/plugins/wkimage/
Avtor: Wolfgang van der Stille Wolfgang.van.der.Stille@gmail.com (The White Knight Labs)
Licenca: GPL 2