Bildskalierung

Dokumentation für den Bildskalierungs-Endpoint

Neleto hat einen Endpoint, der Bilder automatisch auf die angeforderte Größe skaliert und das Ergebnis cached. Dieser Endpoint is unter dem Pfad: /images/user-upload/<datei-id>?options=<optionen> verfügbar.

Dieser Endpoint kann in Component-Templates einfach mit der image_path Funktion verwendet werden:

{{image_path(file, "s_100,f_webp")}}

wobei file ein File Objekt aus der Eigenschaft relations ist. Ein vollständigeres Beispiel:

{{#if relations.file as file}}
    <img src="{{image_path(file, "s_100,f_webp")}}" alt="{{file.title}}">
{{/if}}

Dabei wird ein Bild mit 100px Breite und 100px Höhe im Webp-Format erstellt.

Optionen

Optionen werden durch ein Komma getrennt und in folgendem Format angegeben:

<option-name>_<option-wert>

wobei <option-name> ein einzelner Buchstabe ist und <option-wert> von der Option abhängig ist.

Falls ein Parserfehler auftritt, also wenn der Wert nicht das Format hat, das die Option erwartet, wird das Parsen aller Optionen abgebrochen.

Die Optionen werden in der gegebenen Reihenfolge angewendet, aber Format und Qualität-Optionen werden immer zuletzt angewendet. Zum Beispiel:

?options=f_webp,s_100,q_80

skaliert das Bild als erstes auf 100px Breite und Höhe, und weil es keine weiteren Optionen außer Format und Qualität gibt, wird es als letztes in webp umgewandelt. Die Qualität-Option wird ignoriert, da sie nur mit jpeg funktioniert.

Die folgenden Optionen sind verfügbar:

Größe

Setzt die Breite und Höhe des Bildes auf den selben Wert in Pixeln.

Beispiele

?options=s_100

?options=s_300

Höhe

Setzt die Höhe des Bildes in Pixeln.

Beispiele

?options=h_100

?options=h_300,w_100

Breite

Setzt die Breite des Bildes in Pixeln.

Beispiele

?options=w_100

?options=w_200,h_100

Format

Setzt das Ausgabeformat des Bildes. Verfügbare Formate sind:

webp
jpeg
png
avif
gif

Beispiele

?options=f_webp

Qualität

Setzt die Qualität des Ausgabeformats. Funktioniert nur mit den Format jpeg.

Diese Option ist nur verfügbar, wenn das Format auf jpeg gesetzt ist. Ansonsten wird diese Option ignoriert.

Beispiele

?options=q_80,f_jpeg

Extrahieren

Extrahiert einen Bereich des Bildes. Vergleichbar mit einem Crop. Diese Option sind immer 4 Zahlen, getrennt durch _, in folgender Reihenfolge: Oben, Links, Breite, Höhe. Die Einheiten sind in Pixeln.

Beispiele

?options=e_10_10_200_200

?options=e_0_0_100_100

Passung

Setzt die Passung des Bildes. Funktioniert nur wenn auch die Größe, Breite oder Höhe gesetzt sind. Verfügbare Werte sind:

contain oder inside

Das Bild wird so skaliert, dass das gesamte Bild in die angegebene Größe passt. Dadurch können Ränder entstehen, weil das Seitenverhältnis beibehalten wird.

cover oder outside

Das Bild wird so skaliert, dass die gesamte Größe ausgefüllt wird. Das Bild Seitenverhältnis wird dabei beibehalten, es kann also passieren, dass Teile des Bildes am Ende nicht sichtbar sind.

fill

Das Bild skaliert ohne das Seitenverhältnis beizubehalten, dass die gesamte Größe ausgefüllt wird.

Diese Option ist nur verfügbar, wenn die Größe, Breite oder Höhe gesetzt sind.

Beispiele

?options=s_100,f_contain

?options=s_500,f_cover