We've done this already (with the alligator-image), because the .file property of the IMAGE cObject is an "imgResource". But lets take another challenge here. We would like to define a background image for our template.
Looking at the properties of a PAGE object, .bgImg seems to be the correct choise and it's and imgResource.
Try this:
page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg
You should see this now:
[N/A...]
Try to add this line:
page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg
page.bgImg.width = 200
You should see this:
Before we go on, lets have a bit of fun.
We're going to use a bitmap image concept called masking. Basically a mask is a grayscale image used to combine two images in a way where the black and white areas of the mask determines which areas of the two combined images are visible or not.
This is our masks, "mask.jpg":
Now try this:
page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg
page.bgImg.width = 200
page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg
page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg
Result:
Try this
page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg
page.bgImg.width = 300
page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg
page.bgImg.m.bgImg.params = -rotate 90
page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg
Result:
[N/A...]
OK, we would like the background image to be attached to the individual pages, so we can change the image easily for each page. For that purpose we need to attach the image to the page-record in the media-field.
Do this:
Try to insert this TypoScript on the page:
page.10 =TEXT
page.10.debugData = 1
You should see this when you hit the page (first time, remember it's a debug-output!)
The "media" field contains references to the images by listing them separated by commas. Simple, eh?
We would like to extract a single file from the list, more precisely the second image, "doggiebus.jpg":
page.10 =TEXT
page.10.field = media
page.10.listNum = 1
".listNum" is the great trick here. See the TSref for a description...
As you see, the upload path was uploads/media.
In order to use this knowledge with the imgResource, look that the .import property (TSref). From this, we can conclude that the TypoScript should look like:
page.bgImg {import = uploads/media/
import.field = media
import.listNum = 1
}
Result:
[N/A]
Doggiebus all over. Of course you can still add "page.bgImg.width = 200" if you like a smaller tile for a greater smile :-)
Challenge (imgResource/1)
You would like a default background image for a page in case there's no uploaded image on position 1 in the media-field. Can you do that? (It's not easy - use the TSref, Luke.)
