gallery data processor 

The \TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor , alias gallery, provides the logic for working with galleries and calculates the maximum asset size. It uses the files already present in the processedData array for its calculations. The files data processor can be used to fetch the files.

Table of contents

Options: 

Name Type Default
if
 if condition
filesProcessedDataKey
 string / stdWrap
numberOfColumns
 integer / stdWrap
mediaOrientation
 integer / stdWrap
maxGalleryWidth
 integer / stdWrap
maxGalleryWidthInText
 integer / stdWrap
equalMediaHeight, equalMediaWidth
 integer / stdWrap
columnSpacing
 integer / stdWrap
borderEnabled
 integer / stdWrap
borderWidth
 integer / stdWrap
borderPadding
 integer / stdWrap
cropVariant
 string / stdWrap
as
 string / stdWrap
dataProcessing
 array of Data processors
if
if
Type
if condition
Default
''

Only if the condition is met the data processor is executed.

filesProcessedDataKey
filesProcessedDataKey
Type
string / stdWrap
Default
'files'
Example
'myImages'

Key of the array previously processed by the FilesProcessor .

numberOfColumns
numberOfColumns
Type
integer / stdWrap
Default
field:imagecols
Example
4

Expects the desired number of columns. Defaults to the value of the field imagecols (Number of Columns) if used with content elements.

mediaOrientation
mediaOrientation
Type
integer / stdWrap
Default
field:imageorient
Example
2

Expects the image orientation as used in the field imageorient in content elements such as text with images. Defaults to the value of the field imageorient (Position and Alignment) if used with content elements.

Screenshot of the image settings as found in the TYPO3 backend when editing an image

Media orientation in the content elements such as text with images

maxGalleryWidth
maxGalleryWidth
Type
integer / stdWrap
Default
600

Maximal gallery width in pixels.

maxGalleryWidthInText
maxGalleryWidthInText
Type
integer / stdWrap
Default
300

Maximal gallery width in pixels if displayed in a text.

equalMediaHeight, equalMediaWidth
equalMediaHeight, equalMediaWidth
Type
integer / stdWrap
Default
field:imageheight, field:imagewidth
Example
300

If set all images get scaled to a uniform height / width. Defaults to the value of the fields imageheight (Height of each element (px)), imagewidth (Width of each element (px)) if used with content elements.

Screenshots of Media Adjustments in the TYPO3 backend

Media height and width in the content element Text and Images

columnSpacing
columnSpacing
Type
integer / stdWrap
Default
0
Example
4

Space between columns in pixels

borderEnabled
borderEnabled
Type
integer / stdWrap
Default
field:imageborder
Example
1

Should there be a border around the images? Defaults to the value of the fields imageborder (Number of Columns) if used with content elements.

borderWidth
borderWidth
Type
integer / stdWrap
Default
0
Example
2

Width of the border in pixels.

borderPadding
borderPadding
Type
integer / stdWrap
Default
0
Example
20

Padding around the border in pixels.

cropVariant
cropVariant
Type
string / stdWrap
Default
"default"
Example
"mobile"

See crop variants in the TCA reference

as
as
Type
string / stdWrap
Default
"files"

The variable name to be used in the Fluid template.

dataProcessing
dataProcessing
Type
array of Data processors
Default
[]

Array of data processors to be applied to all fetched records.

Example: display images in rows and columns 

Please see also About the examples.

TypoScript

As the GalleryProcessor expects the data of the files to be present in the the processedData array, the FilesProcessor always has to be called first. Execution depends on the key in the dataProcessing array, not the order in which they are put there.

The content of filesProcessedDataKey in the GalleryProcessor has to be equal to the content of as in the FilesProcessor:

Output of a GalleryProcessor, including debug output
The Fluid template
EXT:examples/Resources/Private/Templates/ContentElements/DataProcGallery.html 
<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
  <h2>Data in variable gallery</h2>
  <f:debug inline="true">{gallery}</f:debug>

  <h2>Output</h2>
  <f:for each="{gallery.rows}" as="row">
    <div class="row">
      <f:for each="{row.columns}" as="column">
        <f:if condition="{column.media}">
          <div class="col-auto p-{gallery.border.padding}">
            <f:image image="{column.media}" width="{column.dimensions.width}"
              class="{f:if(condition: '{gallery.border.enabled}',
                then:'border border-success rounded')}"
              style="border-width: {gallery.border.width}px!important;"/>
          </div>
        </f:if>
      </f:for>
    </div>
  </f:for>

</html>
Copied!
Output

The array now contains the images ordered in rows and columns. For each image there is a desired width and height supplied.

Gallery dump and output