Cropping of images in typo3 with typoscript

This posting is based on version 4.3.3 of typo3.

It is often necessary to display thumbnails with fixed width and height values for each image (e.g. some image gallery…), which is a challenge if you have images of different formats (4:3, 16:9,…).

Typo3 offers the “cropping” function, which means the original image is scaled to a given width and height – to preserve the proportions of the image, it automatically resizes the images to match the given values.

E.g. if you want to scale all images in a content element of type “Image” to 160 x 120, you can use the following Typoscript code:


tt_content.image.20 {
1.file.width.field >
1.file.width = 160c
1.file.height = 120c
1.file.width.override.field = imagewidth
1.file.height.override.field = imageheight
}

It is very important to add the postfix “c” (for crop) to the pixel value.

In a concrete project, i had the challenge to render the thumbnails only for certain “Image” elements, not for the whole site. I chose to use the “Frame” (section_frame) property of the content element. So if you want to apply above settings only to content elements, which fit a defined section_frame value, you can use the following Typoscript:

tmp.CONTENT.HEADER.CONTENT < tt_content.image.10 tmp.CONTENT.IMAGE.CONTENT < tt_content.image.20 tt_content.image = CASE tt_content.image { key.field = section_frame # id of the frame 3 = COA 3 { 10 >
10 < tmp.CONTENT.HEADER.CONTENT 20 >
20 < tmp.CONTENT.IMAGE.CONTENT 20 { # cropping f. gallery 1.file.width.field >
1.file.width = 160c
1.file.height = 120c
1.file.width.override.field = imagewidth
1.file.height.override.field = imageheight
}
}
# rendering for all other frame values
default = COA
default {
10 >
10 < tmp.CONTENT.HEADER.CONTENT 20 >
20 < tmp.CONTENT.IMAGE.CONTENT } } tmp.CONTENT.HEADER.CONTENT >
tmp.CONTENT.IMAGE.CONTENT >

In the above example, the value 3 is the selected value for section_frame. Its important to copy the existing values to the new COA object and then override the needed settings.

I spent some time to find a solution for this specific problem – hopefully this will help somebody to save some time….

5 thoughts on “Cropping of images in typo3 with typoscript

  1. Henny

    i have a variant of your script that don’t crashes with other extensions like lightbox…

    tt_content.image.20.1.file {
    width.override = 210c
    height.override = 134c

    width.override.if {
    value = 21,25
    isInList.field = section_frame
    }

    height.override.if {
    value = 21,25
    isInList.field = section_frame
    }
    }

    because some lightbox extension link up on tt_content.20.1. so if it’s a COA the extension won’t work

  2. admin Post author

    @Henny
    thankyou! as i am not an typoscript expert, i just try to share my experiences – your solutions is far more elegant…

  3. simon

    @Henny
    How would you make that work with multiple overrides?

    Something like:

    tt_content.image.20.1.file {
    width.override = 210c
    height.override = 134c
    width.override.if {
    value = 21
    isInList.field = section_frame
    }
    height.override.if {
    value = 21
    isInList.field = section_frame
    }
    }tt_content.image.20.1.file {
    width.override = 110c
    height.override = 34c
    width.override.if {
    value = 25
    isInList.field = section_frame
    }
    height.override.if {
    value = 25
    isInList.field = section_frame
    }
    }
    .. which doesn’t work

Leave a Reply

Your email address will not be published. Required fields are marked *