Store recurring images in page properties

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.

Key Visual in TYPO3 page properties

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.

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).

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

   1: lib.keyvisual = IMAGE
   2: lib.keyvisual {
   3:   file {
   4:     width = 550
   5:     height = 126
   6:     import {
   7:       data = levelmedia: -1, slide
   8:       wrap = uploads/media/|
   9:       listNum = 0
  10:     }
  11:     required = 1
  12:   }
  13:   altText.data = page : title
  14:   wrap = <div id="keyvisual">|</div>
  15: }

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 level media 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 pathe 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 (if available, see line 11).