Feste Bildgrößen in TYPO3

Manchmal kommt es vor, dass man bei der Ausgabe auf der Website eine bestimmte Bildgröße und auch ein bestimmtes Seitenverhältnis der Bilder haben möchte, egal welches Bild der Editor auch auswählt. Dies ist z.B. häufig der Fall, wenn man z.B. eine Liste von News-Beiträgen mit einem Vorschaubild anzeigen möchte. Da würde es vermutlich seltsam aussehen, wenn die Bilder unterschiedlich groß sind oder mal Hochformat und mal Querformat oder verschiedene Seitenverhältnisse haben.

Aber zum Glück bietet TYPO3 dafür die "Crop-Scaling"-Funktion an.

Das bedeutet, die Bilder werden zunächst auf die richtige Größe skaliert ohne sie zu verzerren und falls  das Seitenverhältnis nicht passt, werden die Bilder noch entweder oben & unten oder links & rechts  beschnitten, so dass das gewünschte Seitenverhältnis stimmt.

Das Beschneiden geschieht standardmäßig ausgehend von der Mitte des Bildes. Dies kann jedoch dazu führen, dass die Köpfe der Personen auf dem Bild ab- oder angeschnitten werden. Vor allem, wenn man z.B. ein Porträt im Hochformat, in ein Querformat "zurecht schneidet".

Dies kann man (oft) dadurch verhindern, dass man den Ausgangspunkt des Beschneidens ins obere Bild-Drittel verlegt, denn dort befinden sich meistens die Köpfe. 
Dazu kann man in TYPO3 einen prozentualen Offset (-100 ... +100) ausgehend von der Mitte angeben. 

file {
    width = 420c
    height = 280c-33
}

Mit diesen Angaben wird die Breite zunächt auf 420px skaliert und dann falls notwendig - ausgehend von der Mitte (da kein Offset angegeben) - beschnitten. 

Die Höhe wird dabei auf 280px skaliert und falls notwendig bei 33% oberhalb der Mitte beschnitten. Die Verlagerung des Ausgangspunkt um 33% nach oben bewirkt, dass unten mehr beschnitten wird als oben, so dass hoffentlich niemand geköpft wird. ;-)

 

Weitere Infos findest Du in der TYPO3-Dokumentation: 
https://docs.typo3.org/m/typo3/reference-typoscript/10.4/en-us/Functions/Imgresource.html?highlight=crop#width

Comments

No Comments

Write comment

* These fields are required