Zum Hauptinhalt springen
EN DE
← blog/

TYPO3

Feste Bildgrößen in TYPO3

Published by Sven Kalbhenn · 0 Kommentare

Wie man in TYPO3 feste Bildgrößen erzwingen kann, ohne die Bilder zu verzerren und Köpfe abzuschneiden.

Feste Bildgrößen in TYPO3

ohne zu verzerren und Köpfe abzuschneiden

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

Tags:#TYPO3

Über den Autor: Sven Kalbhenn

Senior-TYPO3-Berater und Softwareentwickler

Über den Autor: Sven Kalbhenn

Senior TYPO3 Consultant & Software Developer

Kommentare (0)

Keine Kommentare

Kommentar schreiben

Your email is never published.

* Diese Felder sind erforderlich