ImageSizer einrichten
und verwenden

Installation

Laden Sie das Plugin als ZIP-Datei herunter. Öffnen Sie danach den Administrationsbereich Ihrer Joomla!-Website und gehen Sie auf System Installieren Erweiterungen. Ziehen Sie die ZIP-Datei in das Uploadfeld oder wählen Sie sie über den Dateidialog aus.

Nach der Installation finden Sie ImageSizer unter System Plugins. Suchen Sie dort nach ImageSizer und setzen Sie den Status auf Aktiviert. Erst danach verarbeitet das Plugin Ihre Bilder.

Lightbox und Seitenausgabe

Diese Gruppe bestimmt, womit vergrößerte Bilder geöffnet werden und wann ImageSizer in die Seite eingreift.

Lightbox

Die Bibliothek, mit der das Originalbild geöffnet wird. 21 Lightboxen liegen fertig im Plugin, darunter fslightbox, GLightbox, Fancybox, lightGallery und Magnific Popup. Bei einigen steht ein Hinweis, dass sie jQuery benötigen. Standard: fslightbox

Lightbox nur über Klassen

Bei Ja werden nur Bilder mit der CSS-Klasse lightbox berücksichtigt. Bei Nein gilt die Lightbox für alle passenden Bilder. Standard: Nein

Thumbnails nur über Klassen

Bei Ja erhalten nur Bilder mit der CSS-Klasse thumb ein Thumbnail. Standard: Nein

Plugin-Event

Wann ImageSizer die Seite verarbeitet. Zur Wahl stehen Kein Event, onContentPrepare und onAfterRender. onContentPrepare greift beim Aufbereiten des Beitragsinhalts, onAfterRender arbeitet am fertigen HTML der Seite und erfasst damit auch Module. Standard: onContentPrepare

Bildgenerierung

Seitenaufbau: Die Bilder werden beim Aufruf der Seite erzeugt.
Request: Jedes Bild wird über einen zusätzlichen, signierten Request erzeugt. Das hält den Seitenaufbau kurz, weil die Bildberechnung ausgelagert wird. Standard: Seitenaufbau

Ausgeschlossene Pfade

Ein Pfadfragment je Zeile. Bilder, deren Quelle eines dieser Fragmente enthält, bleiben unverändert. Nützlich für Template-Grafiken, die bereits optimiert sind. Standard: /templates/yootheme/

Thumbnails

ImageSizer legt zu jedem Bild eine verkleinerte Fassung an und verlinkt von dort auf das Original. Gelöschte Bilder nehmen ihre Thumbnails mit: Das Plugin merkt sich, welche Dateien es erzeugt hat, und räumt sie mit auf.

Thumbnails erstellen

Für jedes hochgeladene Bild wird automatisch ein Thumbnail erstellt. Standard: Nein

Thumbnail-Ordner

Ordner relativ zur Wurzel der Website, in dem die Thumbnails landen. Standard: thumbs

Thumbnail-Ordner anzeigen

Blendet den Thumbnail-Ordner im Medienmanager ein. Normalerweise bleibt er verborgen, damit die Redaktion nicht versehentlich darin arbeitet. Standard: Nein

Thumbnail-Breite und Thumbnail-Höhe

Kantenlängen in Pixel, zwischen 16 und 4096. Standard: 256 × 256

Generierungsmodus

Verkleinern behält das Seitenverhältnis und passt das Bild in die angegebene Fläche ein.
Beschneiden schneidet aus der Mitte heraus auf das Zielmaß.
Verkleinern und beschneiden rechnet erst herunter und schneidet dann den Überstand ab, sodass das Thumbnail exakt die Zielmaße füllt. Standard: Verkleinern und beschneiden

Bild verkleinert einfügen

Über den Editor eingefügte Bilder erhalten Breite und Höhe aus der Thumbnail-Einstellung. Standard: Nein

Upload

Hier greift ImageSizer schon beim Hochladen ein, also bevor ein zu großes Bild überhaupt in der Mediathek landet.

Bilder verkleinern

Hochgeladene Bilder werden auf die maximale Breite und Höhe verkleinert. Standard: Nein

Maximale Breite und Maximale Höhe

Grenzwerte in Pixel, bis 16000. Der Wert 0 bedeutet unbegrenzt. Standard: 0

Qualität/Komprimierung (%)

Gilt für alle erzeugten Bilder, erlaubt sind Werte zwischen 5 und 100. Niedrigere Werte sparen Speicher, hohe erhalten Details. Standard: 80

Beim Upload umbenennen

Neue Uploads werden so umbenannt, wie es in den Joomla!-Einstellungen unter Suchmaschinenoptimierung konfiguriert ist. Damit verschwinden Leerzeichen, Umlaute und Sonderzeichen aus Dateinamen. Standard: Nein

Standard-Bildformat

Bildformat beibehalten, WebP-Format oder AVIF-Format. Beim Upload wird zusätzlich eine Datei im gewählten Format erzeugt. Unterstützt Ihr Hosting kein AVIF, speichert ImageSizer stattdessen WebP und weist im Backend darauf hin. Standard: Bildformat beibehalten

In Format umwandeln

Statt einer zusätzlichen Kopie wird das hochgeladene Bild direkt in das gewählte Format umgewandelt. Erscheint nur, wenn ein Format gewählt ist. Standard: Nein

Alternative Bildgrößen (srcset)

Die Attribute srcset und sizes im img-Tag ermöglichen responsive Bilder: Der Browser sucht sich aus mehreren angebotenen Breiten die passende aus. ImageSizer schreibt das srcset-Attribut automatisch und erzeugt die zugehörigen Bilddateien gleich mit.

Tragen Sie im Reiter Alternative Bildgrößen je Zeile eine Breite in Pixel ein. Sie können beliebig viele Zeilen anlegen.

Externe Dienste

Zwei optionale Anbindungen, beide mit eigenem Zugangsschlüssel. Ohne Schlüssel bleiben sie inaktiv. Seit 6.0.0 laufen beide über die in Joomla! enthaltenen HTTP-Transporte, cURL wird nicht mehr vorausgesetzt.

Mit TinyPNG optimieren

Alle hochgeladenen Bilder laufen zusätzlich über TinyPNG. Dafür ist eine Registrierung bei tinypng.com nötig, den dort erzeugten Schlüssel tragen Sie im Feld TinyPNG-Key ein.

OpenAI

Erzeugt fehlende Bilder mit KI. Nötig sind ein Konto bei openai.com und der dort erstellte OpenAI-API-Key.

OpenAI-Modell

Zur Wahl stehen gpt-image-1, gpt-image-1-mini, gpt-image-1.5, gpt-image-2, dall-e-3 und dall-e-2. gpt-image-1 setzt eine verifizierte OpenAI-Organisation voraus, dall-e-3 ist die Alternative für andere Konten. Standard: gpt-image-1

Zeitlimit

Maximale Wartezeit in Sekunden auf das generierte Bild, zwischen 1 und 3600. Standard: 120

Bildergalerie einfügen

Sie können den kompletten Inhalt eines Ordners als Galerie ausgeben, ohne jedes Bild einzeln einzufügen. Schreiben Sie dazu diesen Platzhalter in den Beitrag:

{imagesizer folder="images/referenzen"}

Nach dem Speichern erscheinen alle Bilder aus dem Ordner. Kommen später Bilder hinzu oder fallen welche weg, wird das beim nächsten Seitenaufruf berücksichtigt.

Parameter

{imagesizer folder="images/team" limit="12" mode="c" width="300" height="300" recurse="0"}

Alle weiteren Attribute, die Sie angeben, werden unverändert an die einzelnen img-Tags durchgereicht. So können Sie der Galerie zum Beispiel eine eigene class mitgeben.

CSS-Klassen für einzelne Bilder

Über Klassen am img-Tag steuern Sie einzelne Bilder gezielt. Das ist dann nützlich, wenn die allgemeine Einstellung für ein bestimmtes Bild nicht passen soll.

<img src="images/beispiel.jpg" class="lightbox" alt="Beschreibung">
<img src="images/logo.png" class="nolightbox" alt="Firmenlogo">

Bilder mit KI erzeugen

Ist die OpenAI-Anbindung eingerichtet, kann ImageSizer ein fehlendes Bild aus seiner Beschreibung erzeugen. Wechseln Sie dafür im Joomla!-Editor in die HTML-Ansicht und fügen Sie einen Bild-Tag ein, der auf eine noch nicht existierende Datei zeigt:

<img src="images/name-des-bildes.webp" alt="Tanzendes lustiges Hühnchen" width="200" height="200">

Über width und height legen Sie die gewünschte Größe fest, über alt beschreiben Sie möglichst genau, was zu sehen sein soll. Speichern Sie den Beitrag und rufen Sie die Seite im Browser auf.

Zunächst erscheint ein Platzhalter, während das Bild erzeugt wird. Das kann bis zu 45 Sekunden dauern. Nach einem erneuten Aufruf der Seite ist das fertige Bild sichtbar.

Wenn etwas klemmt

• Es passiert gar nichts. Prüfen Sie, ob das Plugin unter System, Plugins auf Aktiviert steht und ob Plugin-Event nicht auf Kein Event gesetzt ist.
• Bilder in Modulen bleiben unverändert. Stellen Sie das Plugin-Event auf onAfterRender, damit die gesamte Seite verarbeitet wird und nicht nur der Beitragsinhalt.
• Bestimmte Bilder werden übersprungen. Sehen Sie in Ausgeschlossene Pfade nach. Voreingestellt ist /templates/yootheme/.
• AVIF kommt nicht an. Nicht jedes Hosting unterstützt das Format. ImageSizer weicht dann auf WebP aus und meldet das im Backend.
• Die Lightbox öffnet nicht. Einige Bibliotheken benötigen jQuery, was in der Auswahlliste vermerkt ist. Seit 6.0.0 wird jQuery nur noch für diese geladen.

Kommen Sie nicht weiter, hilft der Kontakt zu reDim weiter.