A modern Gallery with Mask
Introduction
The most Website-galleries are not very complex. Mostly a list of thumbnails with a lightbox zoom and browse possibility is enough.
This can easy be reached without a separate gallery-extension. The advantage of this variant is, that your gallery works also in future, if you upgrade you TYPO3 version. As less extensions, as easier is the upgrade process.
With Mask 4 and TYPO3 9 LTS it is possible to use a Dataprocessor to get the data to the Fluid template. This is a modern and fast way and splits HTML and TypoScript configuration.

Thank you
This is a sponsored Blogpost from krea:genz Webagentur OG. A sponsored Blogpost a one of several ways to support Mask. We need sponsors to make Mask better. If you are interested, please read here or have a look to our Templavoila Converter.

Implementation
Create a Mask contentelement
After installing Mask in our TYPO3 installation, we start to create a content element for our gallery. Give the element a Title, Key and a Description.
The contentelement consists of a single field to choose the storage folder of the gallery. The field type is “Link”. Define a key and a label. Then switch to the “Validation” Tab and activate the required checkbox to be sure, that each gallery has his folder.
Then disable all Link types except of “Folder” to be sure that there is no other link type selectable.
Of course, you can extend the contentelement with more fields of your needs (Header, Introduction, ...).
Now save and close.

Write TypoScript
To load the images from the defined folder, we need some lines of TypoScript. Write them into your Setup field and adapt it for your needs. Be sure to use the same fieldname as in the Mask contentelement:
tt_content.mask_gallery { dataProcessing { 10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 10 { folders.field = tx_mask_folder sorting = description as = images } } }
Adapt the Fluid template
After saving the Mask contentelement, Mask creates a HTML file with Fluid examples in your defines storagefolder. Open the file and change the code to:
<ul class="gallery"> <f:for each="{images}" as="image"> <li> <a href="{f:uri.image(image:'{image}', maxWidth:1024, maxHeight:768)}" data-fancybox="gallery{data.uid}"> <f:image image="{image}" height="100" /> </a> </li> </f:for> </ul>
It is very important, that the marker {images} equals to the defined “as” attribute in TypoScript.
Some frontend work
To get this code working with the Lightbox “Fancybox”, simply add this lines to your TypoScript setup field:
page = PAGE page { includeJS { jquery = //code.jquery.com/jquery-3.3.1.min.js jquery.external = 1 fancybox = //cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js fancybox.external = 1 } includeCSS { fancybox = //cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css fancybox.external = 1 } }

Variants
We want to give you some further ideas:
Instead of the folder selector, you can use a “File” field in your Mask contentelement. Then the editor can choose each image directly, instead of a whole folder. The sorting of the images can be individually.
If you need both variants, use the fieldtype “Selectbox” and use the possibility to choose from the TYPO3’s “File collections”. A File collection can consist of a folder, selected files or files from a category.
If you don’t like thumbnails, you can generate some Javascript code with the image paths and load them by clicking a button into the lightbox with Javascript.
Or simply show the images in a bigger size without lightbox zoom option.
Instead of a lightbox, you can use any other library, like a slider or an imagecarousel. There are more nice possibilities than a gallery.
Download and further links
Here you can download our working mask_project extension.
If you are interested in more details, follow these links:
- On this page you find informations to the DataProcessors “FilesProcessor”, “GalleryProcessor”, and more:
https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html - An easy to use Lightbox. Respect the licence:
http://fancyapps.com/fancybox/3/