Using FAL media in TYPO3 6.0 for inline CSS header images

Last year I wrote an article about how to use a page resources to create an "sliding" header-image, which is included by inline CSS.

In TYPO3 6.0 the FAL (File Abstraction Layer) was introduced, which changes a lot of things regarding file handling. The technique I described in the article mentioned before does not work with TYPO3 6.0, since page resources now are handled by FAL.

In this article I will describe how to create a sliding header-image in TYPO3 6.0 using FAL and the resources of a page.

First you should upload an image which should be uses as the header image. Just upload it somewhere in fileadmin.

Next you select the page, where the header image should be shown. Create a new relation to the formerly uploaded file.



Now you must add the following TS snippet to your TypoScript template

page.cssInline {
  10 = FILES
  10 { 
     references.data =  levelmedia:-1, slide
     references.listNum = 0
     renderObj = TEXT
     renderObj.data = file:current:publicUrl
     renderObj.wrap (
      .header {
        background-image: url(../|);  
      }
    ) 
  }  
}

Please notice, that the snippet above just is an example which uses the first file (listNum = 0) from the resources of the page.

The result is a new inline CSS stylesheet in the frontend of your website, where the formerly uploaded image is used as a background-image for the class "header". Below is the content of the CSS file.

.header {
        background-image: url(../fileadmin/images/typo3-logo.png);  
      }