You are here: Examples / Graphical headlines
English
Deutsch
Tuesday, 2016-08-23

If you do not see graphical headlines here, then image processing of TYPO3 is not correctly installed. Refer to the install tool to solve the problem.

For each single <Hx> tag you can define in Constant Editor, whether or not the image replacement should take place..

Color, fontsize and background color can be defined in Constant Editor conveniently, naturally separate for each <Hx> tag.

The text for the image is taken from the field headline in database. If you alter the headline, the image is newly computed.

The editor has nothing else to do, as to define the type of the headline as Layout 3, in this case.

Graphical headline normal

Graphical headline Layout 2

Graphical headline Layout 3

Graphical headline Layout 4

Graphical headline Layout 5

If your customer insists on the fact that headlines have to use special fonts, according to the CI you have at hand, you can implement this, by using this feature. Without the disatvantage however, that search engines don't find readable content anymore, but only an image. Image replacement using the so-called Phark-Method makes that possible.

The HTML-source is:

<h3 class="G" style="background:url(typo3temp/GB/ed591d8ce7.png) no-repeat;">Graphical headlines</h3>

The associated CSS-code is like this (Extract from content.css):

h3.G {border:0; height:30px; text-indent: -999em;}

Only a truetype font, which you save in folder fileadmin/fonts/ is required. The image is rendered by gifbuilder.