The GalleryProcessor 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 FilesProcessor can be used to fetch the files.


Example: display images in rows and columns

Please see also About the examples.


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:

tt_content {
   examples_dataprocgallery =< lib.contentElement
   examples_dataprocgallery {
      templateName = DataProcGallery
      dataProcessing {
         # Process files
         10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
         10 {
            as = images
            references.fieldName = image
            references.table = tt_content
            sorting = title
            sorting.direction = descending

         # Calculate gallery info
         20 = TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor
         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

<html data-namespace-typo3-fluid="true" xmlns:f="">
   <h2>Data in variable gallery</h2>
   <f:debug inline="true">{gallery}</f:debug>

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



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