imgResource
An imgResource one of the following:
-
A resource plus imgResource properties.
Filetypes can be anything among the allowed types defined in the configuration variable
$GLOBALS
. Standard is gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg,webp.['TYPO3_ CONF_ VARS'] ['GFX'] ['imagefile_ ext'] - A GIFBUILDER object. See the object reference for GIFBUILDER.
Here "file" is an imgResource:
10 = IMAGE
10 {
file = fileadmin/toplogo.gif
file.width = 200
}
GIFBUILDER:
10 = IMAGE
10.file = GIFBUILDER
10.file {
# GIFBUILDER properties here...
}
Properties
ext
ext
-
- Type
- string / stdWrap
- Default
- web
Target file extension for the processed image. The value
web
checks if the file extension is one of gif, jpg, jpeg, png, or svg and if not it will find the best target extension. The target extension must be in the list of file extensions perceived as images. This is defined in$GLOBALS
in the install tool.['TYPO3_ CONF_ VARS'] ['GFX'] ['imagefile_ ext'] Standard is gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg,webp.
width
width
-
- Type
- integer / stdWrap
If both the width and the height are set and one of the numbers is appended by an
m
, the proportions will be preserved and thus width and height are treated as maximum dimensions for the image. The image will be scaled to fit into the rectangle of the dimensions width and height.If both the width and the height are set and at least one of the numbers is appended by a
c
, crop-scaling will be enabled. This means that the proportions will be preserved and the image will be scaled to fit around a rectangle with width/height dimensions. Then, a centered portion from inside of the image (size defined by width/height) will be cut out.The
c
can have a percentage value (-100 ... +100) after it, which defines how much the cropping will be moved off the center to the border.Notice that you can only use either
m
orc
at the same time!ExamplesThis crops 120x80px from the center of the scaled image:
lib.image { width = 120c height = 80c }
Copied!This crops 100x100px; from landscape-images at the left and portrait- images centered:
lib.image { width = 100c-100 height = 100c }
Copied!This crops 100x100px; from landscape-images a bit right of the center and portrait-images a bit higher than centered:
lib.image { width = 100c+30 height = 100c-25 }
Copied!
height
height
params
params
sample
sample
-
- Type
- boolean
- Default
- 0
If set,
-sample
is used to scale images instead of-geometry
. Sample does not use anti-aliasing and is therefore much faster.
noScale
noScale
-
If set, the image itself will never be scaled. Only width and height are calculated according to the other properties, so that the image is displayed resized, but the original file is used. Can be used for creating PDFs or printing of pages, where the original file could provide much better quality than a rescaled one.
ExamplesHere
test.
could have 1600 x 1200 pixels for example:jpg file = fileadmin/test.jpg file.width = 240m file.height = 240m file.noScale = 1
Copied!This example results in an image tag like the following. Note that
src="fileadmin/
is the original file:test. jpg" <img src="fileadmin/test.jpg" width="240" height="180" />
Copied!
crop
crop
-
Changed in version 13.2
SVG images are now processed natively in SVG during cropping. To keep the old behaviour of transferring them into PNG, you can set ext to
png
explicitly.It is possible to define an area that should be taken (cropped) from the image. When not defined in typoscript the value will be taken from the file_reference when possible. With this setting you can override this behavior.
the file reference is used)
ExamplesDisable cropping set by the editor in the back-end:
tt_content.image.20.1.file.crop =
Copied!Overrule/set cropping for all images:
tt_content.image.20.1.file.crop = 50,50,100,100
Copied!Natively crop a SVG image:
page.10 = IMAGE page.10.file = 2:/myfile.svg page.10.file.crop = 20,20,500,500
Copied!
cropVariant
cropVariant
-
- Type
- string
- Default
- default
Since it's possible to define certain crop variants you can specify which one to use here.
ExamplesUse 'desktop' crop variant:
tt_content.image.20.1.file { crop.data = file:current:crop cropVariant = desktop }
Copied!
frame
frame
import
import
treatIdAsReference
treatIdAsReference
maxW
maxW
-
- Type
- integer / stdWrap
Maximum width
maxH
maxH
-
- Type
- integer / stdWrap
Maximum height
minW
minW
-
- Type
- integer / stdWrap
Minimum width (overrules maxW/maxH)
minH
minH
-
- Type
- integer / stdWrap
Minimum height (overrules maxW/maxH)
stripProfile
stripProfile
-
- Type
- boolean
- Default
- 0
If set, the GraphicsMagick/ImageMagick-command will use a stripProfile-command which shrinks the generated thumbnails. See the Install Tool for options and details.
If
processor_
is set in the Install Tool, you can deactivate it by settingstrip Color Profile By Default strip
.Profile=0 Examples10 = IMAGE 10.file = fileadmin/images/image1.jpg 10.file.stripProfile = 1
Copied!
Masking (m)
Masking:
-
(Black hides, white shows)
m.mask
m.mask
-
- Type
- imgResource
The mask with which the image is masked onto
m.
. Bothbg Img m.
andmask m.
is scaled to fit the size of the imgResource image!bg Img Note: Both
m.
andmask m.
must be valid images.bg Img
m.bgImg
m.bgImg
-
- Type
- imgResource
Note: Both
m.
andmask m.
must be valid images.bg Img
m.bottomImg
m.bottomImg
-
- Type
- imgResource
An image masked by
m.
ontobottom Img_ mask m.
before the imgResources is masked bybg Img m.
.mask Both
m.
andbottom Img m.
is scaled to fit the size of the imgResource image!bottom Img_ mask This is most often used to create an underlay for the imgResource.
Note: Both "m.bottomImg" and
m.
must be valid images.bottom Img_ mask
m.bottomImg_mask
m.bottomImg_mask
-
- Type
- imgResource
(optional)
Note: Both
m.
andbottom Img m.
must be valid images.bottom Img_ mask
Examples
This scales the image fileadmin/
to the width of 200
pixels:
file = fileadmin/toplogo.png
file.width = 200