TYPO3 image rendering

Question

I have TYPO3 10 and want to render the images in specific dimensions. I have a content element with only images, and these pictures are rendered with the dimension 495px x 331px. How can I change that? I've uploaded a much bigger original picture. The preview images are always in these dimensions. If I click on the image to enlarge it, it shows a much bigger picture.

The content element is a pictures only element with two columns. When I set one column, the preview pictures are bigger. How is TYPO3 calculating the dimensions of the pictures?

Answer 1

I assume you want to know how to style the default content type "image".

This content type usually renders a gallery view (grid) of images.

First of all you have these options by default:

Selecting "Number of columns: 1" would make the image use a bigger space.

If you want to directly influence the HTML output, here are some pointers:

The default rendering engine of TYPO3 is fluid_styled_content.

Here is a guide how to override templates for a specific content type: https://docs.typo3.org/c/typo3/cms-fluid-styled-content/10.4/en-us/Configuration/OverridingFluidTemplates/Index.html

That specific content type uses a GalleryProcessor:

https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Configuration/TypoScript/ContentElement/Image.typoscript

It renders this template:

https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Resources/Private/Templates/Image.html

... which uses some partials to render the media.

Media/Gallery sets up the layout for the image grid:

https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Gallery.html

Media/Rendering/Image finally renders the image. The value of dimension has been calculated by the GalleryProcessor:

https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html