As you know in TYPO3 you can easily create graphical headers using the GIFBUILDER. Only downsite of graphical headers is, that search engines can't read them. In this sample i'll show you how you can make the graphical headers search engine friendly.

In the following snippet, the image with the graphical version of the header is placed in background of the H1 Tag. A span with the text version of the header is put inside the H1. Then CSS is used to hide the span, so only the graphical version of the header is shown.

lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
  1=IMG_RESOURCE
  1{
    stdWrap.dataWrap = <h1 style="background-image:url(|)"><span>{current:1}</span></h1>
    file = GIFBUILDER
    file {
      format=png
      XY = [10.w]+5,35
       
      backColor = #ffffff
      10 = TEXT
      10 {
        text.current = 1
        fontSize = 22
        offset = 0,20
        fontFile = fileadmin/fonts/AVENLTSL.TTF
        fontColor = #000000
        niceText = 1
      }
    }
    stdWrap.if.isTrue.field=header
  }
  2=TEXT
  2.current=1
  2.fontTag=<h2>|</h2>
  3=TEXT
  3.current=1
  3.fontTag=<h3>|</h3>
  4=TEXT
  4.current=1
  4.fontTag=<h4>|</h4>
  5=TEXT
  5.current=1
  5.fontTag=<h5>|</h5>
  setCurrent {
    field=header
    htmlSpecialChars=1
    typolink.parameter.field=header_link
  }
   
  key.field=header_layout
  key.ifEmpty=1
  key.ifEmpty.override.data=register:defaultHeaderType
}

And here is the CSS:

Comments

No comments

Add comment

* - required field

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *