This post will be about how to setup a TYPO3 template, with the option to have a different image on top of each page.

I’m using TemplaVoila with a very simple setup. 3 fields – header image, menu and a content-element. The focus will be on the header image element, which in my case is mapped to a <div > and saved as the type “TypoScript Object Path” with an “Object Path” named “lib.headerimg“.

The next step is to setup the template to insert an image in the lib.headerimg. This is done by inserting to following into the Template Setup field:

lib.headerimg = IMAGE
lib.headerimg {
  #this is the default image, for pages with no specific image add
  file = fileadmin/default.gif

  #if the selected page has an added image, the set this instead of the default above
  file.import.override.field = media

  #fetch image from the upload/media/ folder
  file.import.data = levelmedia: -1, "slide"
  file.import = uploads/media/

  #lock the configuration to use only the first added image
  file.import.listNum = 0
}

That’s it! Save, clear cache and view your site. Every page should now be showing the default.gif image as entered in the template configuration.

To make the image change for a single page, your should go the page property for the page, select the “Resources” tab and upload an image in the “Files” section. When the image is uploaded, this page should now be showing the newly added image.