Galleries

Gallery & Lightbox

Simple images and galleries can be set up quickly in the TYPO3 system. They can be set up using the ‘Text & Media’ content element, as shown below. Further below we will introduce you to other content elements that you can use to present galleries and sliders in an even more appealing way.

In the ‘Text & Media’ element as well as in other content elements for images, you can set whether images are shown in a lightbox: The image enlarges while the background is ‘darkened’. Just try it out and click on one of the images. To hide the lightbox, either click anywhere next to the displayed image or use the X in the top right-hand corner.

Whether an image is clickable and thus can be enlarged is decided individually in the image settings in the backend.

First image for demo content: Gallery & Lightbox
Second image for demo content: Gallery & Lightbox
Third image for demo content: Gallery & Lightbox

Gallery from Folder Contents

With the gallery element you can easily display images of a folder as a gallery.

Image: Avenue of palm trees
Image: Palm trees from below with cloudy sky
Image: Mountain, forest and clouds
Image: Close-up of grass with mountain and clouds in the background
Image: Cloudy mountain peak
Image: Tree in sunlight with lake and sky in the background
Image: Sandy beach with palm trees, boats and a house
Image: Water turtle in a water basin
Image: Small, wooded island in the sea
Panoramic image: City, mountains and forest
Panoramic image: mountains and forest

Preview Images dynamically scalable

All preview images are automatically scaled down to the set size. The default size of 128 pixels can be overwritten directly in the content element.

Image: Avenue of palm trees
Image: Palm trees from below with cloudy sky
Image: Mountain, forest and clouds
Image: Close-up of grass with mountain and clouds in the background
Image: Cloudy mountain peak
Image: Tree in sunlight with lake and sky in the background
Image: Sandy beach with palm trees, boats and a house
Image: Water turtle in a water basin
Image: Small, wooded island in the sea
Panoramic image: City, mountains and forest
Panoramic image: mountains and forest

Image Slider

The image gallery content element can also be used to create moving galleries, in which the images can be moved around or moved by users.

Image Slider – Gallery element in carousel layout

This image slider must be moved by users themselves. The arrows are displayed. Four images are displayed per slide.

Image: Avenue of palm trees
Image: Palm trees from below with cloudy sky
Image: Mountain, forest and clouds
Image: Close-up of grass with mountain and clouds in the background
Image: Cloudy mountain peak
Image: Tree in sunlight with lake and sky in the background
Image: Sandy beach with palm trees, boats and a house
Image: Water turtle in a water basin
Image: Small, wooded island in the sea
Panoramic image: City, mountains and forest
Panoramic image: mountains and forest

Automatic movement of the images with activated lightbox

However, images can also be moved automatically in the Image Slider – you determine how quickly this happens. Here, the images move every three seconds and have no arrows to move back and forth. The lightbox is activated, just try clicking on an image.

Image: Avenue of palm trees
Image: Palm trees from below with cloudy sky
Image: Mountain, forest and clouds
Image: Close-up of grass with mountain and clouds in the background
Image: Cloudy mountain peak
Image: Tree in sunlight with lake and sky in the background
Image: Sandy beach with palm trees, boats and a house
Image: Water turtle in a water basin
Image: Small, wooded island in the sea
Panoramic image: City, mountains and forest
Panoramic image: mountains and forest

Image slider with centered slide and overflow slide

In addition to the standard carousel layout, in which each image can be seen in its entirety, slides can be displayed centered with an overflow layout. In this case, the images move automatically every four seconds, but can also be moved using the arrows.

Slider

Slider as a Header

Sliders can be placed as header element (as on this page) as well as within the page. The slider in the header of this page has two sliders with a dark overlay and text. It is possible to create a slider with only one slide, in which case only one image is visible.

Slider with Auto Height and Navigation dots

Slider with Medium Height

Slider with Low Height