Split text into multiple lines with GIFBUILDER (graphical headers)

I'm working on a project and I needed to use graphical headers for content elements and tt_news. Everything is ok, except I need to split some long headers into multiple lines as otherwise the long generated image would break the layout.

Here' s the code that does the magic:

#######################################################
# News headers
#######################################################
plugin.tt_news {
    displayList {
    title_stdWrap.cObject = TEXT
    #title_stdWrap.cObject.wrap = <div class="divheader">|</div>
    title_stdWrap.cObject.current = 1
    title_stdWrap.cObject.split {
      token.char = 32
      cObjNum = 1
       1{
        10 = IMAGE
        10.alttext.cObject = TEXT
        10.alttext.cObject.field= title
        10.file = GIFBUILDER
        10.file {
                XY = 500,[10.h]+[20.h]+[30.h]+40
                10 = TEXT
                10.text.field = title
                10.text.listNum.splitChar=|
                10.text.listNum=0
                #10.niceText = 1
                10.fontColor = #000000
                10.fontFile = path/to/ttf/font
                10.fontSize = 35
                10.offset = 0,35
                20 < .10
                20.text.listNum=1
                20.offset = 0,35+[10.h]+6
                30 < .10
                30.text.listNum=2
                30.offset=0,35+[10.h]+[20.h]+12
                format = png
                backColor = #ffffff
          }
       }
    }
   }
    }
  }

For the content elements:

#######################################################
# Graphical headers
#######################################################
lib.stdheader.10.1 >
lib.stdheader.10.1 = IMAGE
lib.stdheader.10.1 {
 altText.current = 1 
 file = GIFBUILDER
 wrap = <h1> | </h1> 
 file {
                XY = 500,[10.h]+[20.h]+[30.h]+40
                10 = TEXT
                10.text.field = title
                10.text.listNum.splitChar=|
                10.text.listNum=0
                #10.niceText = 1
                10.fontColor = #000000
                10.fontFile = path/to/ttf/font
                10.fontSize = 35
                10.offset = 0,35
                20 < .10
                20.text.listNum=1
                20.offset = 0,35+[10.h]+6
                30 < .10
                30.text.listNum=2
                30.offset=0,35+[10.h]+[20.h]+12
                format = png
                backColor = #ffffff


 }
}

Change lib.stdheader.10.1 to 10.2, 10.3 for the other entries in the Layout drop-down. To change the labels in the drop-downs add this to the TSConfig field of the main page in the tree (Right Click > Page Properties > Options):

TCEFORM.tt_content.header_layout.altLabels {
    1 = Black 35
    2 = Black 18
    3 = Gray 14
    4 = Gray 14 background
} 

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
 

Find me on

My tweets