Mask

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:

Mask Sponsors