Thumb3x – Dokumentation - German

01.thumbx3.readme.md

Intro

thumbx3 ist eine Leistungsstarke Thumbnaillösung für MODX3.

In einem Test wurde komplexe Aufgaben wie ein Blur Filter etwa in der hälte der Zeit umgesetzt. Ob das immer so ist muß ich irgendwann mal testen.

Voraussetzungen

In der Doku habe ich keine Infos dazu gefunden. Bei mir hat es bislang keine Probleme gegeben (Hetzner + Ubuntu 24.04 + PLESK)

Installation

Das Extra findet man u.a. im MODx Standard Repository.

02.thumbx3.docs.md

Thumb3x – Dokumentation

Quellen:

• Russian: https://docs.ivan345.com/books/thumb3x/page/thumb3x-dokumentaciia
• English: https://docthumb3x.ivan345.com/en/

Letzes Update: 31.03.2026

Thumb3x: Moderne Bildverarbeitung für MODX 3

Diese Komponente wurde entwickelt, um eine Lücke im MODX-3-Ökosystem zu schließen, wo moderne und zuverlässige Bildbearbeitungswerkzeuge praktisch nicht existieren. Die meisten bestehenden Lösungen wurden seit über 10 Jahren nicht aktualisiert und nutzen die Vorteile der neuen Systemversion nicht.

Hauptmerkmale

• Moderne Formate: Konvertierung in WebP und AVIF während der Laufzeit.
• Fortschrittliche Engine: Basierend auf der leistungsstarken Glide 3.0.1 Bibliothek.
• MODX 3-Integration: Volle Unterstützung für "Dateiquellen".
• Flexible Bearbeitung: Filter, Effekte, Wasserzeichen und präzise Positionierung.
• Fenom-Unterstützung: Komfortabler Snippet-Aufruf mit Übergabe von Parametern als Arrays.
• Cache-Verwaltung: Die generierten Dateien werden in einer Datenbank mithilfe einer praktischen Tabelle im Admin-Panel protokolliert.

Standard MODX-Anruf

<img src="[[!Thumb3x? &input=`path/to/image.jpg` &options=`w=300&h=200`]]" alt="">

Anruf über Fenom

{'!Thumb3x' | snippet : [
    'input' => 'path/to/image.jpg',
    'options' => [
        'w' => 300,
        'h' => 200
    ]
]}

Grundlegende Snippet-Parameter

Parameter	Alternative	Beschreibung	Beispiel
input	i	(Erforderlich) Pfad zum Quellbild.	&input=image.jpg`
sourceId		Die „Dateiquellen-ID“ des Originalbildes. Standardmäßig wird der Wert aus den Systemeinstellungen verwendet.	&sourceId=2`
quality	q	(Überschrieben &options) Standardqualität.	&quality=75'

Warnung Wichtig: Alle innerhalb der Zeile angegebenen Parameter ( q, fmetc.) &optionshaben immer die höchste Priorität.

Verarbeitungsparameter ( &options)

Offizielle Glide-Dokumentation

Die Thumb3x-Komponente nutzt die Glide- Bibliothek für die gesamte Bildbearbeitung. Das bedeutet, dass Sie alle von der Bibliothek unterstützten Parameter verwenden können.

Die vollständigsten und aktuellsten Informationen zu allen relevanten Parametern finden Sie stets auf der offiziellen Website: https://glide.thephpleague.com/****

Abmessungen und Ausrichtung

Parameter	Schlüssel	Beschreibung	Beispiel
Breite	w	Die Breite des endgültigen Bildes in Pixeln.	w=300
Höhe	h	Die Höhe des endgültigen Bildes in Pixeln.	h=200
Einpassen	fit	So fügen Sie ein Bild ein. Grundwerte: contain, max, stretch, crop.	fit=crop
Trimmen	crop	Präziser Zuschnitt: Breite, Höhe, x, y.	crop=200,150,20,50
DPR	dpr	Der Retina-Display-Multiplikator dpr=2sorgt dafür, dass das Bild doppelt so groß angezeigt wird.	dpr=2
Orientierung	or	Dreht das Bild. Werte: auto, 0, 90, 180, 270.	or=90
Spiegelung	flip	Spiegelt das Bild. Werte: v(vertikal), h(horizontal), both.	flip=h

Bildkorrektur und Effekte

Parameter	Schlüssel	Beschreibung	Beispiel
Helligkeit	bri	Helligkeitseinstellung (-100 bis +100).	bri=20
Kontrast	con	Kontrasteinstellung (-100 bis +100).	con=-30
Gamma	gam	Gammakorrektur (0,1 bis 9,99).	gam=2.2
Schärfe	sharp Schärfen (0 bis 100).	sharp=10
Verwischen	blur	Gaußscher Weichzeichner (0 bis 100).	blur=15
Pixelierung	pixel	Pixelierungseffekt (0 bis 1000).	pixel=10
Filter	filt	Wendet Filter an: greyscaleoder sepia.	filt=greyscale

Hintergrund und Rahmen

Parameter	Schlüssel	Beschreibung	Beispiel
Hintergrund	bg	Hintergrundfarbe. Format: RRGGBB.	bg=CCCCCC
Rahmen	border	Fügt einen Rahmen hinzu. Format: Breite, Farbe, Typ. Typ: overlayoder shrink.	border=5,000000,overlay

Wasserzeichen

Parameter	Schlüssel	Beschreibung	Beispiel
Weg	mark	(Erforderlich) Der Name der Wasserzeichendatei.	mark=logo.png
Breite	markw	Breite des Wasserzeichens (in px oder %).	markw=15w
Höhe	markh	Höhe des Wasserzeichens (in px oder %).	markh=50
Einzug X	markx	Horizontaler Einzug (negative Werte - vom rechten Rand).	markx=-20
Einzug Y	marky	Vertikaler Einzug (negative Werte - von der Unterkante).	marky=-20
Einzüge	markpad	Einkerbungen an allen Seiten.	markpad=10
Position	markpos	Position: top-left, center, bottom-rightetc.	markpos=top-left
Transparenz	markalpha	Transparenz des Wasserzeichens (0-100).	markalpha=50

Ausgabeformat

Parameter	Schlüssel	Beschreibung	Werte	Beispiel
Format	fm	Das Format des endgültigen Bildes.	jpg, png, gif, webp,avif	fm=webp
Qualität	q	Qualität für jpg, webp, avif.	0 bis 100	q=80

Anwendungsbeispiele

Beispiel 1: Wasserzeichen-Overlay (Standard-MODX-Aufruf)

Aufgabe:logo.png In der unteren rechten Ecke mit einer Einbuchtung und Transparenz platzieren .

<img 
    src="[[!Thumb3x?
        &input=`portfolio/image-01.jpg`
        &watermark=`assets/watermark/logo.png`
        &options=w=1200&mark=logo.png&markpos=bottom-right&markpad=30&markalpha=50`
]]" 
    alt="Portfolio mit Wasserzeichen"
>

Beispiel 2: Anruf über Fenom

Herausforderung: Führen Sie dieselbe Operation mit der besser lesbaren Syntax von Fenom und arraybasierten Parametern durch.

{* Parameter für Glide als Array definieren *}

{var $params = [
        'w' => 1200,
        'h' => 800,
        'mark' => 'logo.png',
        'markpos' => 'bottom-right',
        'markpad' => 20,
        'markalpha' => 60
    ]
}

{* Den Ausschnitt bestimmen *}

<img src="{'!Thumb3x' | snippet : [
        'input' => 'portfolio/image-01.jpg',
        'watermark' => 'assets/images/logo.png',
        'options' => $params
       ]
    }" alt="Portfolio Image">

Erläuterung: Der Hauptvorteil von Fenom besteht hier in der Möglichkeit, alle Verarbeitungsparameter in einem übersichtlichen Array $params zu sammeln, was den Template-Code wesentlich sauberer und leichter lesbar und bearbeitbar macht.