Snippet for a customizable graphic background for your page header

Seamus Leahy

This code snippet was created because I wanted the H1 to have a graphical background which can be different for different pages. The content-type for this has a field "header" that is an image picker. But, it is an optional field.

I want to generate an H1 that contains the title. If the header field is set, then I want to add a style attribute to the H1 which sets the background-image.

The code:

<t:list id="header">

<h1 style="background-image: url($);"> <!-- Using the list to output the header url >

<t:set id="graphical_header_set" value="true" /> <! Setting a flag to say we have a header >

</t:list>

<t:if test="!graphical_header_set"> <! Testing for the flag. If it is set, then the default it outputted. -->

<h1>

</t:if>

$

</h1>