`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	'files'
numberOfColumns	integer / stdWrap	field:imagecols
mediaOrientation	integer / stdWrap	field:imageorient
maxGalleryWidth	integer / stdWrap	600
maxGalleryWidthInText	integer / stdWrap	300
equalMediaHeight, equalMediaWidth	integer / stdWrap	field:imageheight, field:imagewidth
columnSpacing	integer / stdWrap	0
borderEnabled	integer / stdWrap	field:imageborder
borderWidth	integer / stdWrap	0
borderPadding	integer / stdWrap	0
cropVariant	string / stdWrap	"default"
as	string / stdWrap	"files"
dataProcessing	array of Data processors	[]

if

Type: if condition
Required: false
Default: ''

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

filesProcessedDataKey

Type: string / stdWrap
Required: true
Default: 'files'
Example: 'myImages'

Key of the array previously processed by the FilesProcessor.

numberOfColumns

Type: integer / stdWrap
Required: false
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

Type: integer / stdWrap
Required: false
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.

Media orientation Palette — Media orientation in the content elements such as text with images

maxGalleryWidth

Type: integer / stdWrap
Required: false
Default: 600

Maximal gallery width in pixels.

maxGalleryWidthInText

Type: integer / stdWrap
Required: false
Default: 300

Maximal gallery width in pixels if displayed in a text.

equalMediaHeight, equalMediaWidth

Type: integer / stdWrap
Required: false
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.

Media height and width in the content element Text and Images

columnSpacing

Type: integer / stdWrap
Required: false
Default: 0
Example: 4

Space between columns in pixels

borderEnabled

Type: integer / stdWrap
Required: false
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

Type: integer / stdWrap
Required: false
Default: 0
Example: 2

Width of the border in pixels.

borderPadding

Type: integer / stdWrap
Required: false
Default: 0
Example: 20

Padding around the border in pixels.

cropVariant

Type: string / stdWrap
Required: false
Default: "default"
Example: "mobile"

See crop variants in the TCA reference

as

Type: string / stdWrap
Required: false
Default: "files"

The variable name to be used in the Fluid template.

dataProcessing

Type: array of Data processors
Required: false
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:

        EXT:examples/Configuration/TypoScript/DataProcessors/Processors/GalleryProcessor.typoscript
    

tt_content {
    examples_dataprocgallery =< lib.contentElement
    examples_dataprocgallery {
        templateName = DataProcGallery
        dataProcessing {
            # Process files
            10 = files
            10 {
                as = images
                references.fieldName = image
                references.table = tt_content
                sorting = title
                sorting.direction = descending
            }

            # Calculate gallery info
            20 = gallery
            20 {
                filesProcessedDataKey = images
                mediaOrientation.field = imageorient
                numberOfColumns = 4
                equalMediaHeight.field = imageheight
                equalMediaWidth.field = imagewidth
                maxGalleryWidth = 1000
                maxGalleryWidthInText = 1000
                columnSpacing = 0
                borderEnabled.field = imageborder
                borderWidth = 5
                borderPadding = 3
                as = gallery
            }
        }
    }
}

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>

Output

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

gallery data processor

Options:

if

filesProcessedDataKey

numberOfColumns

mediaOrientation

maxGalleryWidth

maxGalleryWidthInText

equalMediaHeight, equalMediaWidth

columnSpacing

borderEnabled

borderWidth

borderPadding

cropVariant

as

dataProcessing

Example: display images in rows and columns

`gallery` data processor