TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

Changing the header image

The header image will be different for each main topic of the website, including subpages. For this, you will use an if statement, also known as a "condition". The if statement in the typoscript below checks whether the page ID (PID) of the active page exists in the root line. The root line is the path of PIDs from the root page to and including the active page. You can retrieve the page ID by hovering on the page in the TYPO3 page tree.

The "header_image" part of the TYPO3Buddy website doesn't contain any real content in the current setup. It's parent container has a scalable background image instead. Therefore, you'll have to make sure that this background image will change when you visit another topic on the website. The typoscript below does that by putting a little style sheet in the header of the website HTML. You'll put this typoscript in the "+ Header image" sub template and include this in the main typoscript template.

page.headerData.30 = COA

# start tag for style sheet
page.headerData.30.10 = TEXT
page.headerData.30.10.value = <style type="text/css">

# default header background image
page.headerData.30.20 = TEXT
page.headerData.30.20.value = div#container_header_image { background-image:url(/fileadmin/templates/images/bgtop.jpg);}

[PIDinRootline = 3]
# background for the page with ID = 3
page.headerData.30.20.value = div#container_header_image { background-image:url(/fileadmin/templates/images/bgtop1.jpg);}

[PIDinRootline = 9]
# background for the page with ID = 9
page.headerData.30.20.value = div#container_header_image { background-image:url(/fileadmin/templates/images/bgtop2.jpg);}

# end tag for style sheet
page.headerData.30.30 = TEXT
page.headerData.30.30.value = </style>

In this example, the page ID of the "Examples" page is 3, and the page ID of the "Footer menu" page is 9. Those pages, and all the pages under them, will have respectively the bgtop1.jpg and bgtop2.jpg background image in the header. Every other page has the bgtop.jpg image as a background image in the header.

Next, the typoscripts for the menus of TYPO3Buddy ->

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.