Zum Inhalt springen

Grid gallery for images

Extension key: gridgallery
Extension developer: Philipp Mueller

TYPO3 Version:12 LTS11 LTS10 LTS9 LTS8 LTS

This extension displays any number of images in a grid system.

The arrangement of the images is automatically optimized by JavaScript according to the formats of the images and the available space (similar to the well-known Masonry effect).

The link to the documentation of the extension and further information can be found in the TYPO3 Extension Repository (TER).

Installation

The extension can be installed in the usual ways, either from the backend via the extension manager or via composer.

The vhs extension is also automatically installed as a dependency.

The static template of the extension must then be added to your own template in the TypoScript template.

A few default values can then be predefined in the constant editor.

You can also decide here whether the JavaScript framework jQuery is loaded by the extension or not.

Whether you use this option depends on whether jQuery is already loaded in your website or not. If you are using our sample project, you do not need to do anything else, as jQuery is already included here.

Otherwise, you need to check whether your website already loads jQuery. This can often be clarified quite quickly by looking at the HTML source code of the frontend.
In any case, you should avoid integrating jQuery more than once, as this can lead to problems and errors.

Create gallery

To create an image gallery, create a new content element on the desired page.

In the wizard, you will find the new content element "Grid gallery" in the "Typical page content" area.

In the properties of the content element, you can then add the desired images using the corresponding buttons.

You can also activate "Click to enlarge" via a switch. When you click on an image in the frontend, a larger version of the image is then displayed with the help of a so-called lightbox effect.

In the frontend, the output could then look like this, for example:

The arrangement of the images adapts automatically to make optimum use of the available space, as can be seen in the following video.

This page contains automatically translated content.

Updated: 17.07.2024