Let's start with a simple example:
page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file.XY = 200,300
page.10.file.backColor = olive
page.10.file.10 = BOX
page.10.file.10 {dimensions = 20,20,160,260
color = green
}
Result:
OK, let try that in combination with the background image inferno from before:
page.bgImg = GIFBUILDER
page.bgImg {XY = 200,300
backColor = olive
10 = BOX
10 {dimensions = 20,20,160,260
color = green
}
}
page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg
page.bgImg.m.bgImg.params = -rotate 90
page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg
... and the result is:
[N/A...]
... something else that we had imaged.
Reason. The TypoScript is wrong. The masking feature with the "m.bgImg...." stuff applied to imgResources if the value of imgResource was a filename and not GIFBUILDER. In the latter case the properties that applies is found in a section of it's own... So sorry.
But you can do it, if the GIFBUILDER object is not the "base-image":
# The base image:
page.bgImg = fileadmin/tsbyex/alligator.jpg
page.bgImg.width = 300
page.bgImg.height = 200
# The GIFBUILDER overlay:
page.bgImg.m.bgImg = GIFBUILDER
page.bgImg.m.bgImg {XY = 300,200
backColor = olive
10 = BOX
10 {dimensions = 20,20,260,160
color = green
}
}
# The mask (not the movie...)
page.bgImg.m.mask = fileadmin/tsbyex/mask2.gif
results in
The mask "mask2.gif" looks like this:
Back to the basics. The first example showed us how to create a colored box. Now we're going to add some text:
page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file {XY = 200,300
backColor = olive
10 = BOX
10.dimensions = 20,20,160,260
10.color = green
20 = TEXT
20.text = Hello World
20.offset = 10,10
}
This results in:
Many integet values can be defined by simple arithmetic operations like +, -, / and *. A special feature is that you can insert codes in these expressions that are substituted with the width or height of either a TEXT- or an IMAGE-GIFBUILDER object. In that way we're able to control eg. the width of the image based on the width of the text.
Example:
page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file {XY = [20.w]+20, 30
backColor = olive
10 = BOX
10.dimensions = 20,20,160,260
10.color = green
20 = TEXT
20.text = Hello World
20.offset = 10,15
}
Result:
Extending this to the BOX-object also we can use the BOX-object to create an underlining of the TEXT. Furthermore lets try the "niceText" property of the TEXT object.
...
10.dimensions = 11,20,[20.w],1
10.color = blue
20 = TEXT
20.text = Hello World
20.offset = 10,15
20.niceText = 1
}
Result:
Obviously the BOX-object has adjusted according to our expectations. But the other change - the .niceText option we enabled - has caused the text to render in another fashion.
See, this is a workaround to compensate for the fact that the freetype library used by GDLib in PHP is not always able to provide a satisfying antialias ("soft edges" to prevent the jagged, pixelated edges). So this flag makes Typo3 render the text in double size on a mask-file which is then scaled down to correct size and used with ImageMagick's combine-tool to "superimpose" (mask) the text onto the background. It takes more CPU power. The result is also better (usually).
Left: Normal text. Antialiased by Freetype. Middle: .niceText=1 Right: .antiAlias=0 (Antialias totally disabled)
Now, we'll try some more options for the text:
...
20 = TEXT
20.text = Hello World
20.offset = 10,15
20.niceText = 1
20.fontSize= 20
20.fontFile = t3lib/fonts/verdana.ttf
20.fontColor = #660000
20.shadow.offset = 2,2
20.shadow.blur = 60
20.shadow.opacity = 40
}
results in this:
Challenge (GIFBUILDER/1)
Can you produce a text, which seems to be embossed from the background? And could you make that the page title and not a static value like "Hello World"?
You can also add an image to the GIFBUILDER objects.
Example:
page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file {XY = 200, [10.h]
10 = IMAGE
10.file = fileadmin/tsbyex/sunset_keywest.jpg
10.file.width= 200
20 = TEXT
20.text.field = title
20.offset = 0,120
20.niceText = 1
20.align=center
20.fontSize= 40
20.fontFile = t3lib/fonts/verdana.ttf
20.fontColor = yellow
30 = IMAGE
30.file = fileadmin/tsbyex/alligator.jpg
30.file.width=50
30.tile = 2,2
30.align = c,c
}
In this example there are even two images involved. One of them is tiled twice horizontally and vertically while center-aligned in both directions also. Result:
Challenge (GIFBUILDER/2)
Can you make each of the alligator images appear in each of the outer corners instead, 5 pixels from the border? (You may - if you wish - skip the background image and title.)
Challenge (GIFBUILDER/3)
Can you create a red frame of 2 pixels around the image also?
