A header with a date attached:

# Overwrite layout 5
# Create an array of objects
lib.stdheader.10.5 = COA
lib.stdheader.10.5 {
   # First object is a copy of the default header layout 1,
   # so the basic input is printed. (e.g. the field 'header')
   10 < lib.stdheader.10.1
   10.fontTag = <h2{register:headerStyle}{register:headerClass}>|

   # Second object: The date which we want to be appended.
   20 = TEXT
   20 {
      data = date:U
      strftime = %A %e %B
   }

   # Third object: Closing the H2 tag which we opened
   # in the first object.
   30 = TEXT
   30.value = </h2>
}

A header with the username

# Overwrite layout 5
# Create an array of objects
lib.stdheader.10.5 = COA
lib.stdheader.10.5 {
   # First object is a copy of the default header layout 1,
   # so the basic input is printed. (e.g. the field 'header')
   10 < lib.stdheader.10.1
   10.fontTag = <h2{register:headerStyle}{register:headerClass}>|

   # Second object: insert the username.
   20 = TEXT
   20.value = {TSFE:fe_user|user|name}
   20.insertData = 1

   # Third object: Closing the H2 tag which we opened
   # in the first object.
   30 = TEXT
   30.value = </h2>
}

GIFBUILDER can’t actually read your headertext so there’s no way it can determine when to use multiple lines by itself (at least, not without making weird cuts in the middle of your words). Therefore, we need to tell GIFBUILDER when to break the line.

Since we only use one H1 tag per seo, this snippet modifies the second header layout.

# Start overriding the second header layout.
lib.stdheader.10.2 >
lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
  # Wrap the whole header
  wrap = <div>|</div>
  10 = IMAGE
  10 {
     # Wrap the first line
     wrap = <div>|</div>
     file = GIFBUILDER
     file {
        XY = [10.w] + 4, [10.h] + 8
        backColor = #FFFFFF
        10 = TEXT
        10 {
           text.field = header
           # Set the fontfile and font-properties.
           fontFile = fileadmin/fonts/customfont.ttf
           fontSize = 22
           fontColor = #000000
           offset = 0,18
           # Select the first line of our sentence.
           text.listNum = 0
           # Here we determine the break, in this case a pipe (|).
           text.listNum.splitChar = |
        }
     }
  }
  # Check if the second line is there...
  20 = COA
  20.if {
     value.field = header
     isTrue.cObject = TEXT
     isTrue.cObject.field = header
     # The second line starts after the pipe
     isTrue.cObject.listNum.splitChar = |
     # Now use the second line of our sentence
     isTrue.cObject.listNum = 1
  }
  # If the second line is there, use the same markup
  20.10 < .10
  20.10 {
     file {
        10.text.listNum = 1
        10.text.listNum.splitChar = |
     }
  }
}

Just to be clear: A header with two lines would now be like:
This is a very long header which will | be displayed over two lines.

Result:

The pipe will be the place where you split the header. Ofcourse, all the font properties used in the first line are also available in the second line, so play all you like with different fonts and markup on every other line.

Here’s a bit of TypoScript which produces both a graphical and a text header for the same single content element. You can display the graphical header and hide the text header using css (for example: indent: -9999). This way users will experience the nice graphical header while search engines will still be able to crawl the text header. We’ll give the text-header a H2 attribute so the importants is obvious to the search engine.

This snippets produces a H2 header with the same headertitle for both the graphical header as the text header:

lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
	10 = IMAGE
	10 {
   		wrap = <span>|</span>
                file = GIFBUILDER
   		file {
   			XY = [10.w]+1,60
   			backColor = #ffffff
   			transparentBackground = 1
   			10 = TEXT
   			10 {
   				text.field = header
   				text.current = 1
   				fontSize = 52
   				offset = 0,50
   				fontFile =  path/to/your/font.ttf
   				fontColor = #000000
   				niceText = 1
    			}
   		}
   	}
	20 = TEXT
	20 {
		wrap = <h2 class="headerDesc">|</h2>
                field = header
	}
}

Maybe you would like to have a different alt and title text with the graphical header instead of the actually image text and also want this different text to show in your text-header. Since TYPO3 has no extra BE-field for this issue, you should use “Text and Image” instead of “Text”. This way you’ll have more BE-fields you can use. In this example I’ll use the “Long URL Description” field to define our alt, title and text-header content.

lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
	10 = IMAGE
	10 {
   		alttext.field = longdescURL
   		titleText.field = longdescURL
   		wrap =  <span>| </span>
   		file = GIFBUILDER
   		file {
   			XY = [10.w]+1,60
   			backColor = #ffffff
   			transparentBackground = 1
   			10 = TEXT
   			10 {
   				text.field = header
   				text.current = 1
   				fontSize = 52
   				offset = 0,50
   				fontFile =  path/to/your/font.ttf
   				fontColor = #000000
   				niceText = 1
    			}
   		}
   	}
	20 = TEXT
	20 {
		wrap =  <h2 class="headerDesc">|</h2>
  		field = longdescURL
	}
}

I hope this will be useful. If you have any questions or comments please don’t hesitate…

lib.stdheader.10.1 = IMAGE
lib.stdheader.10.1 {
  alttext.field = header
  wrap =
  file = GIFBUILDER
  file {
   XY = [10.w],35
   backColor = #c5a888
   transparentBackground = 1

   10 = TEXT
   10 {
    text.field = header
    text.current = 1
    fontSize = 40
    offset = 0,20
    fontFile =  fileadmin/   ### YOUR FONTFILE (TTF)
    fontColor = #1c150d
   }
  }
}