WvdS.DokuWiki.Image Plugin

Plugin: wvdsimage
Version: 1.1.0
Namespace: lib/plugins/wvdsimage/
Author: Wolfgang van der Stille zeljko.petrusic@outlook.de
License: GPL 2

The wvdsimage plugin enables base64-encoded images as Data-URI directly in the src attribute of <img> tags.

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

Core Features:

• base64 Inline Output - Images embedded directly in HTML
• Server-side Resizing - Automatic size adjustment
• Format Conversion - PNG/JPEG/GIF to WebP
• Intelligent Caching - Processed images are cached
• Helper API - Programmatic access for templates and plugins

• Responsive Logos - High-resolution source images that adapt to containers
• Optimized Thumbnails - Automatic resizing without manual image versions
• Format Conversion - JPEG to WebP for smaller file sizes
• Offline Documents - PDF export with embedded images
• Template Logos - Flat Template uses wvdsimage for logo rendering
• Reduced HTTP Requests - No separate image downloads needed

{{wvds:image>mediaId|parameter1=value1|parameter2=value2}}

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

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

Requirement: Logo should adapt to container width but never exceed 300px.

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

Result:

• Source image (e.g., 1200×480) is scaled to 300×120
• CSS width: 100% makes it responsive
• max-width: 300px prevents enlargement beyond 300px

Requirement: Optimize JPEG photo for faster loading.

{{wvds:image>photos:team.jpg|maxwidth=800|quality=80|format=webp|alt=Our Team}}

Result:

• Converts JPEG to WebP (approx. 30% smaller)
• Scales to maximum 800px width
• Quality 80% for good compromise

Requirement: Uniform thumbnails for image gallery.

| {{wvds:image>gallery:image1.jpg|maxwidth=150|maxheight=150|alt=Image 1}} | {{wvds:image>gallery:image2.jpg|maxwidth=150|maxheight=150|alt=Image 2}} |

Requirement: Large banner image that rarely changes.

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

1. Syntax Parsing
   └── Extracts mediaId and parameters from {{wvds:image>...}}

2. Load Source Image
   └── Reads file from data/media/{namespace}/{file}
   └── Validates image format (PNG, JPEG, GIF, WebP)

3. Cache Check
   └── Generates hash: MD5(path + mtime + width + height + quality + format)
   └── Checks data/cache/wvdsimage/{hash}.{format}
   └── On cache hit: Loads cached image

4. Image Processing (on cache miss)
   └── imagecreatefrom{format}() - Loads source image
   └── imagecreatetruecolor() - Creates target image
   └── imagecopyresampled() - High-quality scaling
   └── image{format}() - Saves in target format

5. Cache Storage
   └── Writes processed image to data/cache/wvdsimage/

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

Cached images are stored in:

data/cache/wvdsimage/

Filename format: {MD5-hash}.{format}

Via Admin → Configuration → wvdsimage:

• PHP GD Extension - Must be enabled
• WebP Support - Required for format=webp (PHP 7.1+ with libwebp)
• Write Permissions - For data/cache/wvdsimage/

The plugin is thread-safe. Parallel requests for the same image may temporarily trigger duplicate processing, but the cache is written atomically.

• WvdS.DokuWiki.Flat Template - Template uses wvdsimage for logo rendering
• WvdS.DokuWiki.OpenGraph Plugin - Open Graph meta tags (uses images)
• PHP GD Documentation

File: lib/plugins/wvdsimage/syntax.php

File: lib/plugins/wvdsimage/helper.php

The helper provides programmatic access to image processing for templates and plugins.

// Load helper
$wvdsimage = plugin_load('helper', 'wvdsimage');
 
// Render image from wiki media
$html = $wvdsimage->renderImage('wiki', 'wiki:logo.png', array(
    'maxwidth' => 300,
    'quality' => 90,
    'alt' => 'Logo',
    'class' => 'my-logo',
));
 
// Render image from template directory
$html = $wvdsimage->renderImage('template', 'logo.png', array(
    'maxwidth' => 300,
));
 
// Render image from absolute file path
$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"/>

On errors, an HTML comment is returned:

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

The Flat Template uses the helper for logo rendering:

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