.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============================= Tutorial: References template ============================= :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Kasper Skårhøj :Changed: 2002-11-30T03:26:54 :Email: kasper@typo3.com :Info 2: :Info 3: :Info 4: .. _Tutorial-References-template: Tutorial: References template ============================= 22th of December, 2000 Copyright 2000-2002, , This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to Typo3 \- a GNU/GPL CMS/Framework available from www.typo3.com .. _Table-of-Contents: Table of Contents ----------------- **Tutorial: References template 1** **Setting up a new pagedesign for presentation of company references. 2** The left image 3 **Advanced image processing 5** Content 8 .. _Setting-up-a-new-pagedesign-for-presentation-of-company-references: Setting up a new pagedesign for presentation of company references. ------------------------------------------------------------------- This tutorial presumes that you have read through the tutorial on how to setup a pagedesign with GoLive (or some other HTML-design program!). In this case we work within the same concept but to create another design with a "page-related" image on the left of the page. It should be possible to change this image from Typo3. This is an example of what we're trying to achieve: |img-1| Basically you should prepare a template just like you did in the GoLive example. In fact you may make an exact copy of this record. Anyway, clear the Constants-field and put this into the Setup-field of the duplicate of the "GoLive" template record: :: page = PAGE page.typeNum = 0 page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/template_references/template.html subparts.CONTENT < styles.content.get } Also change the title and make sure that the template is the first template in the record list! |img-2| As you see this TypoScript code includes a template from "fileadmin/template\_references/" which does not exist at this point. The files in this folder are included with this tutorial. You should now copy these files to the location "fileadmin/template\_references/" If you look at the frontend you should see the above layout of the site. (Remember to "Clear all cache"!) .. _The-left-image: The left image ^^^^^^^^^^^^^^ The left image is the big task here. I have already prepared the template for the substitution of the default red image. This is not the hard thing though. It's rather; where in Typo3 should we store the image? The content-records are not good for this. You might use them, but it's not the best solution in this case. The solution is to attach the image to the page-record itself. If we change the type of the page to "Advanced", we can add media-files to the pagerecord. This feature is meant for exactly this kind of tasks! |img-3| As you see I've already stored the image "left\_image\_example.jpg" with the pagerecord. The image comes with this tutorial. Now we'll include the image on the page. Add the red lines: :: page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/template_references/template.html subparts.CONTENT < styles.content.get subparts.LEFT_IMAGE = IMAGE subparts.LEFT_IMAGE.file { import.field = media import = uploads/media/ import.listNum = 0 } } This is the result: |img-4| The image seems to be too wide. Therefore we add a restriction on the width of the image: :: subparts.LEFT_IMAGE.file { maxW = 300 import.field = media import = uploads/media/ import.listNum = 0 } There we go! The explanation is that **subparts.LEFT\_IMAGE** is a IMAGE contentObject in TypoScript. The property ".file" is a **imgResource** , which happens to have a property ".maxW" for limiting the imagewidth. Please, refer to the TypoScript reference for these terms. You might experience some of the mysterious fog over TypoScript to disappear by such examples! Oh, just one thing: I would like the whole page to have zero margins. Add this in the top of the template: :: page.bodyTagMargins = 0 This should do the trick. The whole TypoScript code looks like this now: :: 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.LEFT_IMAGE = IMAGE subparts.LEFT_IMAGE.file { maxW = 300 import.field = media import = uploads/media/ import.listNum = 0 } } .. _Advanced-image-processing: Advanced image processing ------------------------- 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: |img-5| Zoomed up a bit: |img-6| 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: |img-7| .. _Content: Content ^^^^^^^ 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 } } |img-8| Tutorial: References template **- 8** .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 573 .. :id: Grafik1 .. :name: Grafik1 .. :width: 642 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 73 .. :id: Grafik2 .. :name: Grafik2 .. :width: 383 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 267 .. :id: Grafik3 .. :name: Grafik3 .. :width: 610 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 606 .. :id: Grafik7 .. :name: Grafik7 .. :width: 642 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 458 .. :id: Grafik4 .. :name: Grafik4 .. :width: 485 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 441 .. :id: Graphic2 .. :name: Graphic2 .. :width: 440 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 499 .. :id: Grafik6 .. :name: Grafik6 .. :width: 529 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102