History

Using insert tags to create a dynamic header image

Some sites have a header image of some kind that sets each article apart or each section of the website apart from the other sections. This can be tiring to create a new page layout or separate CSS class definition for each page. With TYPOlight's powerful built-in insert tags, you can accomplish this dynamic header appearance easily.

This tip uses TYPOlight's built-in tags. Find out more about them here: http://www.typolight.org/insert-tags.html

Creating your page layout

[TutorialsCreatingCustomTemplates|Create a page layout] like you normally would, except that where you want to insert your header image, put this code:

1 <img src="/tl_files/images/{{env::page_alias}}.png" alt="{{env::page_title}}" />
  • You will want to adapt this to your needs.*
  • Make sure the file path leads to where you will save your header images.
  • Make sure the file extension (.png, .jpg, .gif, etc.) is the correct format for your images.

Creating your pages

Create your site structure, applying the page layout created above to the pages you wish to have the dynamic header. Give each of these pages a unique alias and remember them.

Creating your header images

Using whatever graphic design program you wish, create your header images for each of the pages you applied the dynamic header page layout to. Name the header images the exact same thing as the alias of the page to which that image belongs.

Upload your images into the directory specified in the code you inserted into the page layout above. In this case it would be in the "tl_files/images" directory.

Done!

Troubleshooting

If this does not work for you, please try the following:

  • Make sure your image file name is exactly the same as the alias of the page to which it belongs.
  • Make sure the file path is correct.
  • You must have a separate image file for each page alias. Even if the image is the same, you will have to duplicate it in order to name it the alias of the page to which it belongs.
  • Your images may have to be all the exact same size to display correctly on the page. Styling is up to you.
  • If you have tried all of the above, post your problems in the forum and we will help you out!

--- Tutorial created by Logan

Also available in: HTML TXT