I would like to take the example a bit further. A very popular thing these days is to add horizontal lines to an image so it gets a "tv-screen"-effect. This can be automated with Typo3.
In order to do this you should know a bit about grayscale masks known from the image processing world. Basically, if you apply a mask to an image the grayscale values of the mask will represent the transparency of each pixel in the image.
Try to open the "horizontalline_mask.gif" image that comes with this tutorial. This is the mask we're going to use.
Now this may get a bit advanced. Try to change the proper part of the template record to this:
subparts.LEFT_IMAGE = IMAGE
subparts.LEFT_IMAGE.file = GIFBUILDER
subparts.LEFT_IMAGE.file {XY = [5.w],[5.h]
5 = IMAGE
5.file {maxW = 300
import.field = media
import = uploads/media/
import.listNum = 0
}
}
The image is now generated as a GIFBUILDER object where the image is inserted as an object - or "layer" - on the GIFBUILDER canvas. The canvas size is fetched from object number 5 - the image! - and therefore you should see absolutely no difference when you reload the template. Only that the image is now a gif-file.
Now I want to apply my mask, so I add this line:
subparts.LEFT_IMAGE.file {XY = [5.w],[5.h]
5 = IMAGE
5.file {maxW = 300
import.field = media
import = uploads/media/
import.listNum = 0
}
5.mask = fileadmin/template_references/horizontalline_mask.gif
}
And this is what I get:
Zoomed up a bit:
Now I would like to change a few things:
- add "olive" as my background color of the image
- add a black border to the image
- output jpg instead.
subparts.LEFT_IMAGE.file {format = jpg
backColor = olive
XY = [5.w],[5.h]
5 = IMAGE
5.file {maxW = 300
import.field = media
import = uploads/media/
import.listNum = 0
}
5.mask = fileadmin/template_references/horizontalline_mask.gif
10 = BOX
10.dimensions = 0,0,300,3
10.color = black
11 < .10
11.align = ,b
12 < .10
12.dimensions = 0,0,3,600
13 < .12
13.align = r
}
This is the final result:
I'll not go into the content rendering in this example, so here you must refer to the GoLive based tutorial.
But we still need to insert the page-header. Add the red lines to your template:
page = PAGE
page.typeNum = 0
page.bodyTagMargins = 0
page.10 = TEMPLATE
page.10 {template = FILE
template.file = fileadmin/template_references/template.html
subparts.CONTENT < styles.content.get
subparts.HEADLINE = TEXT
subparts.HEADLINE.field = title
subparts.LEFT_IMAGE = IMAGE
subparts.LEFT_IMAGE.file = GIFBUILDER
subparts.LEFT_IMAGE.file {format = jpg
backColor = olive
XY = [5.w],[5.h]
5 = IMAGE
5.file {maxW = 300
import.field = media
import = uploads/media/
import.listNum = 0
}
5.mask = fileadmin/template_references/horizontalline_mask.gif
10 = BOX
10.dimensions = 0,0,300,3
10.color = black
11 < .10
11.align = ,b
12 < .10
12.dimensions = 0,0,3,600
13 < .12
13.align = r
}
}
