Read image from the page properties

The instructions refer to older TYPO3 versions where the extension "css_styled_content" is still in use.

There are various options for reading images from the page properties (resources). This method is often used, for example, to output header images that vary depending on their position in the page tree.

First create an image in the page properties in the "Resources" tab.

In the Typoscript setup, you can read the image with the following code, assign it to an object or marker and output it accordingly in the template:

lib.headerimage = IMAGE
lib.headerimage {
  file {
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
}

By specifying levelmedia:-1, slide, either the image stored on the current page is used or, if none is available, the one on a higher-level page.

import.listNum = 0 means that the first inserted image is output.

If several images are inserted under Resources, they can be output randomly as follows:

import.listNum = rand

Insert image as background image

Images that have been integrated in the page properties under Resources can be integrated at various points on the website using CSS. It is also possible to display different image sizes depending on the screen resolution.

The following example loads the background image into the body

##Read image and output for large screen resolutions
lib.imageresourceBig = IMG_RESOURCE
lib.imageresourceBig {
  file {
    import = uploads/media/
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
    width = 1600
    height = 800
  }
}
##Output image in smaller resolution
lib.imageresourceSmall < lib.imageresourceBig
lib.imageresourceSmall {
  file {
    width = 800
    height = 400
  }
}

##Load CSS in header with mediaqueries
page.headerData.13 = COA_INT
page.headerData.13 {
  5 = TEXT
  5.value = <style>
  10 < lib.imageresourceSmall
  10.stdWrap.wrap = @media (max-width: 768px){body { background-image: url(/|); }}
  20 < lib.imageresourceBig
  20.stdWrap.wrap = @media (min-width: 769px){body { background-image: url(/|); }}
  30 = TEXT
  30.value = </style>
}

Updated: 10.04.2025