Image section with TypoScript

The output of images can be influenced in many ways using TypoScript.

The following original image was used to illustrate the settings:

Original image

Compress images

Compressed image

Sometimes it may be necessary to crop to a certain size. With the TypoScript object IMG_RESOURCE, the width and height parameters are used to determine the displayed image size:

file.width = 300 
file.height = 100

The image appears in the new size, but has been compressed.

Scaling and positioning images

Image scaled

The distortion can be avoided by adding the letter m to one or both parameters:

file.width = 300m
file.height = 100

In this case, the image is scaled to a height of 100 pixels, the width is determined automatically by the aspect ratio.

If the letter c is used, the image is fitted into a frame of the specified size. The proportions are retained and the image is centered. With the parameters

file.width = 120c
file.height = 120

a square image can be created from the rectangular one. Optionally, a shift in the range -100 to +100 (%) can be specified, allowing the frame to be positioned horizontally (for width) or vertically (height) above the original image:

Image cropped
width=120c
height=120
Image cropped
width=120c-100
height=120
Image cropped
width=120c+100
height=120

Further customization options

Of course, the frame does not have to be square; any window can be defined:

Define image section with height and width
width=380
height=100c
Define image section with height and width
width=380
height=100c-100
Define image section with height and width
width=380
height=100c+100

This page contains automatically translated content.

Updated: 09.04.2025