Store recurring images in page properties

If you want to display images as key visuals on multiple pages, you should use the Resources field in the page properties to store them.

Motivation

On many websites, there are decorative images that serve as pure key visuals and have no other function. Since some of these pictures are usually repeated on subpages, inserting them as content elements isn't a very good idea. Instead, they should be stored in the page properties. This way, you can benefit from TypoScript inheritance.

Example

On the website for the Coperion GmbH, we have applied this method: The key visual in the site's header is specified in the page properties ("Resources" tab). In the TypoScript template, this image is read out and inserted in the header section.

Key Visual in TYPO3 page properties
Key Visual in TYPO3 page properties

This happens on all subpages where an image is specified in the page properties. If no image is given, a page 'inherits' the key visual of the first page up the tree root where an image was specified in the Resources.

You can also specify more than one images in the page properties. These images can then be used in TypoScript separately. A number starting from 0 (zero) identifies each image. It doesn't matter where the images are displayed on the page (header, content area, sidebar, footer).

Best Practice

To access the images in the page properties from within TypoScript, only a few lines of code are required:

Accessing an image stored in page properties TypoScript, SETUP section
lib.keyvisual = IMAGE
lib.keyvisual {
  file {
    width = 550
    height = 126
    import {
      data = levelmedia: -1, slide
      wrap = uploads/media/|
      listNum = 0
    }
    required = 1
  }
  altText.data = page : title
  wrap = <div id="keyvisual">|</div>
}

In the root template, an IMAGE content object is created. We assign a fixed width and height (lines 4 and 5) so it fits in the header section.

In the import block, the actual page properties access takes place (lines 6 to 10):

The statement levelmedia on line 7 provides access to the 'Media' field (file selection in the 'Resources' tab). By specifying -1, slide, the inheritance of images in upper pages is activated (in case, the current page has no image assigned).

The wrap statement on line 8 prepends a file path to the image file name.

In line 9, the value of listNum accesses a specific image of the 'Media' field. The first image has the number 0 (zero), the second image has the number 1, etc.

The statement required in line 11 means that the image and its enclosing div (line 14) are displayed only if there actually is an image provided.

On line 13 we assign an alternative text and a title attribute to the key visual's img src tag. We use the page title of the current page as a default for those two values.

At last, we enclose the picture with a div container in line 14 (if available, see line 11).