GalleryProcessor

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.

Options:

if

Required:false Type:if condition Default:’’

If the condition is not met the data is not processed

filesProcessedDataKey

Required:true Type:string, stdWrap Default:‘files’ Example:‘myImages’

Key of the array previously processed by the FilesProcessor

numberOfColumns

Required:false Type:int, 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

Required:false Type:int, 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.

Media orientation in the content elements such as text with images

maxGalleryWidth

Required:false Type:int, stdWrap Default:600

Maximal gallery width in pixels

maxGalleryWidthInText

Required:false Type:int, stdWrap Default:300

Maximal gallery width in pixels if displayed in a text

equalMediaHeight, equalMediaWidth

Required:false Type:int, 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.

Media height and width in the content element Text and Images

columnSpacing

Required:false Type:int, stdWrap Default:0 Example:4

Space between columns in pixels

borderEnabled

Required:false Type:int, 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

Required:false Type:int, stdWrap Default:0 Example:2

Width of the border in pixels

borderPadding

Required:false Type:int, stdWrap Default:0 Example:20

padding around the border in pixels

cropVariant

Required:false Type:int, stdWrap Default:“default” Example:

See cropt variant in the TCA reference

as

Required:false Type:string, stdWrap Default:“files”

The variable’s name to be used in the Fluid template

dataProcessing

Required:false Type:array of dataProcessing Default:””

Array of DataProcessors 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:

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.field = imagecols
            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="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">
            <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: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.