MODX [[!resizeImage]] Snippet (WIP 🧑‍🏭)

Snippet for resizing Images in MODX. It replaces pThumb in 99% of my projects, but can be used in parallel 😸

✅ Generates WebP
✅ Output srcset and aspect ratio for better web vitals
✅ Can use binary libs like convert (Imagine workaround on IONOS) and ffmpeg (for Videothumbnails)
✅ Output as base64 for Lazyloading Placeholders

Options

MODX-resizeImage/resizeimage.snippet.php

Lines 4 to 13 in 9f0cc0b

	$lib = $modx->getOption("lib", $scriptProperties, "Imagick");
	$libPath = $modx->getOption("libPath", $scriptProperties, "/Applications/MAMP/Library/bin/convert");
	$mode = $modx->getOption("mode", $scriptProperties, "");
	$type = $modx->getOption("type", $scriptProperties, "image");
	$input = $modx->getOption("input", $scriptProperties, "");
	$sizes = $modx->getOption("options", $scriptProperties, "");
	$quality = $modx->getOption("quality", $scriptProperties, 70);
	$fileExtension = $modx->getOption("fileExtension", $scriptProperties, "webp");
	$setRatio = $modx->getOption("setRatio", $scriptProperties, true);
	$cachePath = $modx->getOption("cachePath", $scriptProperties, "assets/image-cache/");

Examples

WebP Images as srcset

<img
    data-srcset[[!resizeImage?
        &input=`[[+url]]`
        &options=`2000,1250,800` ]]
    alt=""
/>

Generates this:

<img
  data-srcset="
    assets/image-cache/dummy1.6bee3066.2000x-70.webp 2000w,
    assets/image-cache/dummy1.143b6e11.1250x-70.webp 1250w,
    assets/image-cache/dummy1.b23222b6.800x-70.webp 800w
  "
  width="2000"
  height="1193"
  style="aspect-ratio: 2000/1193"
  alt=""
/>

ℹ️ Allways call the Snippet uncached, to prevent missing images when old images get deleted by the Snippet themself.

Lazyload base64 Placeholder

<img
    src[[!resizeImage?
        &input=`[[+url]]`
        &options=`100`
        &lib=`cli`                    
        &libPath=`[[++ffmpeg.binPath]]`
        &type=`video`
        &fileExtension=`png`
        &mode=`base64` ]]
    alt=""
/>

Roadmap

• Test and get Feedback
• Make it avaible as MODX Package