Thumbnails verison 1

Output.php

@@ -54,23 +54,74 @@ class Output
             return;
         }
 
+        $thumbW = 150;
+        $thumbH = 150;
+
+        $placeholderUrl = DOKU_BASE . 'lib/images/blank.gif';
+        $syntax = plugin_load('syntax', 'luxtools');
+        $placeholderId = $syntax ? trim((string)$syntax->getConf('thumb_placeholder')) : '';
+        if ($placeholderId !== '' && function_exists('ml')) {
+            // ml() builds a fetch.php URL for a MediaManager item
+            $placeholderUrl = ml($placeholderId, ['w' => $thumbW, 'h' => $thumbH], true, '&');
+        }
+
         /** @var \Doku_Renderer_xhtml $renderer */
         $renderer = $this->renderer;
         $renderer->doc .= '<div class="filetools-plugin filetools-gallery">';
 
         foreach ($this->files as $item) {
             $url = $this->itemWebUrl($item, !empty($params['randlinks']));
+            $thumbUrl = $this->withQueryParams($url, [
+                'thumb' => 1,
+                'w' => $thumbW,
+                'h' => $thumbH,
+            ]);
             $safeUrl = hsc($url);
+            $safeThumbUrl = hsc($thumbUrl);
+            $safePlaceholderUrl = hsc($placeholderUrl);
             $label = hsc($item['name']);
 
             $renderer->doc .= '<a href="' . $safeUrl . '" class="media" title="' . $label . '">';
-            $renderer->doc .= '<img src="' . $safeUrl . '" alt="' . $label . '" width="150" loading="lazy" />';
+            $renderer->doc .= '<img'
+                . ' class="luxtools-thumb"'
+                . ' src="' . $safePlaceholderUrl . '"'
+                . ' data-thumb-src="' . $safeThumbUrl . '"'
+                . ' alt="' . $label . '"'
+                . ' width="' . $thumbW . '"'
+                . ' height="' . $thumbH . '"'
+                . ' loading="lazy"'
+                . ' decoding="async"'
+                . ' />';
             $renderer->doc .= '</a>';
         }
 
         $renderer->doc .= '</div>';
     }
 
+    /**
+     * Append query parameters to a URL.
+     *
+     * Preserves existing query and fragment and uses RFC3986 encoding.
+     *
+     * @param string $url
+     * @param array $params
+     * @return string
+     */
+    protected function withQueryParams(string $url, array $params): string
+    {
+        if ($params === []) return $url;
+
+        $fragment = '';
+        $hashPos = strpos($url, '#');
+        if ($hashPos !== false) {
+            $fragment = substr($url, $hashPos);
+            $url = substr($url, 0, $hashPos);
+        }
+
+        $glue = (strpos($url, '?') === false) ? '?' : '&';
+        return $url . $glue . http_build_query($params, '', '&', PHP_QUERY_RFC3986) . $fragment;
+    }
+
     /**
      * Renders the files as a table, including details if configured that way.
      *

_test/SyntaxTest.php

@@ -239,6 +239,9 @@ class plugin_luxtools_test extends DokuWikiTest
         $this->structureCheck($doc, $structure);
 
         $this->assertStringContainsString('exampleimage.png', $xhtml);
+        $this->assertStringContainsString('data-thumb-src=', $xhtml);
+        $this->assertStringContainsString('width="150"', $xhtml);
+        $this->assertStringContainsString('height="150"', $xhtml);
     }
 
     /**

conf/default.php

@@ -9,6 +9,9 @@ $conf['allow_in_comments'] = 0;
 $conf['defaults'] = '';
 $conf['extensions'] = '';
 
+// MediaManager ID for gallery thumbnail placeholder
+$conf['thumb_placeholder'] = ':wiki:thumb-placeholder.png';
+
 // Local opener service used by {{open>...}}.
 $conf['open_service_url'] = 'http://127.0.0.1:8765';
 $conf['open_service_token'] = '';

conf/metadata.php

@@ -12,5 +12,7 @@ $meta['allow_in_comments'] = array('onoff');
 $meta['defaults'] = array('string');
 $meta['extensions'] = array('string');
 
+$meta['thumb_placeholder'] = array('string');
+
 $meta['open_service_url'] = array('string');
 $meta['open_service_token'] = array('string');

file.php

@@ -17,6 +17,172 @@ if (!$syntax) die('plugin disabled?');
 $pathUtil = new Path($syntax->getConf('paths'));
 $path = $INPUT->str('root') . $INPUT->str('file');
 
+/**
+ * Send a file to the client with basic caching headers.
+ *
+ * @param string $path
+ * @param string $mime
+ * @param bool $download
+ * @param string|null $downloadName
+ * @param string|null $etag
+ * @param int|null $mtime
+ * @param int|null $maxAge
+ * @return void
+ */
+function luxtools_sendfile($path, $mime, $download = false, $downloadName = null, $etag = null, $mtime = null, $maxAge = null)
+{
+    header('Content-Type: ' . $mime);
+    header('X-Content-Type-Options: nosniff');
+
+    if ($download) {
+        $downloadName = $downloadName ?: basename($path);
+        header('Content-Disposition: attachment; filename="' . $downloadName . '"');
+    }
+
+    if ($etag !== null) {
+        header('ETag: "' . $etag . '"');
+    }
+    if ($mtime !== null) {
+        header('Last-Modified: ' . gmdate('D, d M Y H:i:s', $mtime) . ' GMT');
+    }
+
+    if ($maxAge !== null) {
+        header('Cache-Control: public, max-age=' . (int)$maxAge . ', immutable');
+    }
+
+    // Conditional request handling
+    if ($etag !== null && isset($_SERVER['HTTP_IF_NONE_MATCH'])) {
+        if (trim($_SERVER['HTTP_IF_NONE_MATCH']) === '"' . $etag . '"') {
+            http_status(304);
+            exit;
+        }
+    }
+    if ($mtime !== null && isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
+        $ims = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
+        if ($ims !== false && $ims >= $mtime) {
+            http_status(304);
+            exit;
+        }
+    }
+
+    http_sendfile($path);
+    readfile($path);
+    exit;
+}
+
+/**
+ * Create a thumbnail file using GD.
+ *
+ * @param string $src
+ * @param string $dst
+ * @param int $maxW
+ * @param int $maxH
+ * @param string $dstFormat 'jpg' or 'png'
+ * @param int $quality JPEG quality 0-100
+ * @return bool
+ */
+function luxtools_create_thumb_gd($src, $dst, $maxW, $maxH, $dstFormat, $quality)
+{
+    if (!function_exists('imagecreatetruecolor')) return false;
+    if (!is_readable($src)) return false;
+
+    $info = @getimagesize($src);
+    if (!is_array($info) || empty($info[0]) || empty($info[1]) || empty($info['mime'])) return false;
+
+    $srcW = (int)$info[0];
+    $srcH = (int)$info[1];
+    $srcMime = (string)$info['mime'];
+    if ($srcW <= 0 || $srcH <= 0) return false;
+
+    $maxW = max(1, (int)$maxW);
+    $maxH = max(1, (int)$maxH);
+
+    $scale = min($maxW / $srcW, $maxH / $srcH, 1);
+    $dstW = max(1, (int)floor($srcW * $scale));
+    $dstH = max(1, (int)floor($srcH * $scale));
+
+    switch ($srcMime) {
+        case 'image/jpeg':
+            if (!function_exists('imagecreatefromjpeg')) return false;
+            $srcImg = @imagecreatefromjpeg($src);
+            break;
+        case 'image/png':
+            if (!function_exists('imagecreatefrompng')) return false;
+            $srcImg = @imagecreatefrompng($src);
+            break;
+        case 'image/gif':
+            if (!function_exists('imagecreatefromgif')) return false;
+            $srcImg = @imagecreatefromgif($src);
+            break;
+        case 'image/webp':
+            if (!function_exists('imagecreatefromwebp')) return false;
+            $srcImg = @imagecreatefromwebp($src);
+            break;
+        default:
+            return false;
+    }
+
+    if (!$srcImg) return false;
+
+    $dstImg = imagecreatetruecolor($dstW, $dstH);
+    if (!$dstImg) {
+        imagedestroy($srcImg);
+        return false;
+    }
+
+    // Preserve transparency for formats that support it
+    if ($dstFormat === 'png') {
+        imagealphablending($dstImg, false);
+        imagesavealpha($dstImg, true);
+        $transparent = imagecolorallocatealpha($dstImg, 0, 0, 0, 127);
+        imagefilledrectangle($dstImg, 0, 0, $dstW, $dstH, $transparent);
+    }
+
+    $ok = imagecopyresampled($dstImg, $srcImg, 0, 0, 0, 0, $dstW, $dstH, $srcW, $srcH);
+    imagedestroy($srcImg);
+
+    if (!$ok) {
+        imagedestroy($dstImg);
+        return false;
+    }
+
+    // Write to a temporary file then rename atomically
+    $tmp = $dst . '.tmp.' . getmypid();
+    @io_mkdir_p(dirname($dst));
+
+    $written = false;
+    if ($dstFormat === 'png') {
+        if (!function_exists('imagepng')) {
+            $written = false;
+        } else {
+            // compression: 0 (none) .. 9 (max). Use a reasonable default.
+            $written = @imagepng($dstImg, $tmp, 6);
+        }
+    } else {
+        if (!function_exists('imagejpeg')) {
+            $written = false;
+        } else {
+            $q = max(0, min(100, (int)$quality));
+            $written = @imagejpeg($dstImg, $tmp, $q);
+        }
+    }
+    imagedestroy($dstImg);
+
+    if (!$written || !is_file($tmp)) {
+        @unlink($tmp);
+        return false;
+    }
+
+    // Best-effort atomic move
+    if (!@rename($tmp, $dst)) {
+        // fallback copy
+        $ok = @copy($tmp, $dst);
+        @unlink($tmp);
+        if (!$ok) return false;
+    }
+    return true;
+}
+
 try {
     $pathInfo = $pathUtil->getPathInfo($path, false);
     if ($pathUtil::isWikiControlled($pathInfo['path'])) {
@@ -30,13 +196,47 @@ try {
         exit;
     }
     [$ext, $mime, $download] = mimetype($pathInfo['path'], false);
-    $basename = basename($pathInfo['path']);
+
-    header('Content-Type: ' . $mime);
+    // Optional thumbnail mode: ?thumb=1&w=150&h=150
-    if ($download) {
+    $thumb = (int)$INPUT->int('thumb');
-        header('Content-Disposition: attachment; filename="' . $basename . '"');
+    $w = (int)$INPUT->int('w');
+    $h = (int)$INPUT->int('h');
+    $q = (int)$INPUT->int('q');
+    if ($q <= 0) $q = 80;
+
+    $isImage = is_string($mime) && str_starts_with($mime, 'image/');
+    $wantThumb = $thumb === 1 && $isImage && ($w > 0 || $h > 0);
+
+    if ($wantThumb) {
+        if ($w <= 0) $w = $h;
+        if ($h <= 0) $h = $w;
+
+        global $conf;
+        $srcMtime = @filemtime($pathInfo['path']) ?: time();
+
+        // Decide output format (prefer PNG when transparency is likely)
+        $dstFormat = ($mime === 'image/png' || $mime === 'image/gif') ? 'png' : 'jpg';
+        $dstMime = ($dstFormat === 'png') ? 'image/png' : 'image/jpeg';
+        $hash = sha1($pathInfo['path'] . '|' . $srcMtime . '|w=' . $w . '|h=' . $h . '|q=' . $q . '|f=' . $dstFormat);
+        $sub = substr($hash, 0, 2);
+        $cacheDir = rtrim($conf['cachedir'], '/');
+        $thumbPath = $cacheDir . '/luxtools/thumbs/' . $sub . '/' . $hash . '.' . $dstFormat;
+
+        if (!is_file($thumbPath)) {
+            $ok = luxtools_create_thumb_gd($pathInfo['path'], $thumbPath, $w, $h, $dstFormat, $q);
+            if (!$ok || !is_file($thumbPath)) {
+                // Fallback: serve original if we cannot thumbnail
+                luxtools_sendfile($pathInfo['path'], $mime, $download, basename($pathInfo['path']), null, $srcMtime, 3600);
+            }
+        }
+
+        // Cached thumbs are immutable because filename includes mtime
+        luxtools_sendfile($thumbPath, $dstMime, false, null, $hash, @filemtime($thumbPath) ?: $srcMtime, 31536000);
     }
-    http_sendfile($pathInfo['path']);
+
-    readfile($pathInfo['path']);
+    // Default: serve original file
+    $basename = basename($pathInfo['path']);
+    luxtools_sendfile($pathInfo['path'], $mime, $download, $basename, null, @filemtime($pathInfo['path']) ?: null, 3600);
 } catch (Exception $e) {
     header('Content-Type: text/plain');
     http_status(403);

lang/de/settings.php

@@ -2,5 +2,7 @@
 
 $lang['allow_in_comments'] = 'Files-Syntax in Kommentaren erlauben.';
 
+$lang['thumb_placeholder'] = 'MediaManager-ID für den Platzhalter der Galerie-Thumbnails';
+
 $lang['open_service_url'] = 'URL des lokalen Öffner-Dienstes für {{open>...}} (z.B. http://127.0.0.1:8765).';
 $lang['open_service_token'] = 'Token für den lokalen Öffner-Dienst (X-Filetools-Token).';

lang/en/settings.php

@@ -4,5 +4,7 @@ $lang['allow_in_comments'] = 'Whether to allow the files syntax to be used in co
 $lang['defaults'] = 'Default options. Use the same syntax as in inline configuration';
 $lang['extensions'] = 'Comma-separated list of allowed file extensions to list';
 
+$lang['thumb_placeholder'] = 'MediaManager ID for the gallery thumbnail placeholder';
+
 $lang['open_service_url'] = 'Local opener service URL for the {{open>...}} button (e.g. http://127.0.0.1:8765).';
 $lang['open_service_token'] = 'Token sent to the local opener service (X-Filetools-Token).';

lang/nl/settings.php

@@ -8,5 +8,7 @@ $lang['allow_in_comments'] = 'Of de files syntax toegestaan is voor gebruik in c
 $lang['defaults'] = 'Default options. Gebruik dezelfde syntax als de inline configuratie.';
 $lang['extensions'] = 'Komma-gescheiden lijst van toegestane bestandsextensies voor de lijst.';
 
+$lang['thumb_placeholder'] = 'MediaManager-ID voor de placeholder van galerij thumbnails';
+
 $lang['open_service_url'] = 'Lokale opener service-URL voor de {{open>...}} knop (bijv. http://127.0.0.1:8765).';
 $lang['open_service_token'] = 'Token dat naar de lokale opener service wordt gestuurd (X-Filetools-Token).';

script.js

@@ -3,6 +3,46 @@
 (function () {
   'use strict';
 
+  function initGalleryThumbs() {
+    var imgs = document.querySelectorAll('div.filetools-gallery img[data-thumb-src]');
+    if (!imgs || !imgs.length) return;
+
+    function loadThumb(img) {
+      var src = img.getAttribute('data-thumb-src') || '';
+      if (!src) return;
+      if (img.getAttribute('data-thumb-loading') === '1') return;
+      img.setAttribute('data-thumb-loading', '1');
+
+      var pre = new window.Image();
+      pre.onload = function () {
+        img.src = src;
+        img.removeAttribute('data-thumb-src');
+        img.removeAttribute('data-thumb-loading');
+      };
+      pre.onerror = function () {
+        img.removeAttribute('data-thumb-loading');
+      };
+      pre.src = src;
+    }
+
+    if ('IntersectionObserver' in window) {
+      var io = new window.IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (!entry.isIntersecting) return;
+          loadThumb(entry.target);
+          io.unobserve(entry.target);
+        });
+      }, { rootMargin: '200px' });
+
+      imgs.forEach(function (img) { io.observe(img); });
+    } else {
+      // Fallback: load soon after initial render
+      window.setTimeout(function () {
+        imgs.forEach(loadThumb);
+      }, 0);
+    }
+  }
+
   function getServiceUrl(el) {
     var url = el.getAttribute('data-service-url') || '';
     url = (url || '').trim();
@@ -120,4 +160,5 @@
   }
 
   document.addEventListener('click', onClick, false);
+  document.addEventListener('DOMContentLoaded', initGalleryThumbs, false);
 })();