Introducing GIFBUILDER

GIFBUILDER is a universal object in TypoScript that uses some basic TypoScript code to generate images using the ImageMagick (or GraphicsMagick) library in PHP. Generating images with ImageMagick is normally very complex, and we would have to learn a fair amount of PHP to make anything. Using GIFBUILDER, makes it relatively easy to make these same dynamic images without learning PHP or opening Photoshop. GIFBUILDER can actually be used for any images that we would want to create in TypoScript, but we are going to be using it specifically for GMENU in this book to turn our text fields into typographic images complete with layers and effects.

We are going to learn about three main objects in GIFBUILDER that will help us create our menu items:

  • Boxes: We can layer simple boxes to make borders or button effects.
  • Images: We can use uploaded or external image files as backgrounds or just display them as menu items.
  • Text: Most importantly, we can use text objects to show our page titles in non-web fonts with drop-shadow or emboss effects.

A complete list of the properties available to GIFBUILDER is beyond the scope of this chapter, and not really necessary to build most menus. If you want to learn more about GIFBUILDER, I recommend Mastering TypoScript by Daniel Koch. If you have any problems with GIFBUILDER, you may need to check your ImageMagick configuration in the TYPO3 Install Tool.

The BOX object

The BOX object is one of the key TypoScript objects in GIFBUILDER. The BOX object is, like it sounds, just a simple graphical box defined by its size and color. By itself, it's not that helpful, but we can add boxes as layers to generate borders and backgrounds that will be flattened into our final generated images. We are only going to use two properties for our boxes:

  • BOX.dimensions defines the dimensions of the box in the format x, y, w, h where x, y is the offset for the top right-corner and w, h is the width and height of the box.
  • BOX.color defines the color of the inside of the box.

Here is an example of a gray box, 400 pixels wide, 20 pixels tall, and offset 3 pixels down and to the right:

lib.subMenu.1.NO {
5 = BOX
5.color = #aaaaaa
5.dimensions = 3,3,400,20
}

The IMAGE object

The next object we can use, IMAGE, will bring in an image for normal display or basic tiling and masking. The IMAGE object can be used for complex displays, but we are only looking at menu applications and will just look at a few options:

Property

Description

file

We can declare point to a filename or use a use a complete imageFile declaration like the rollover images we used in the TMENU section:

10.file = fileadmin/templates/image.png

10.file {

import = uploads/media/

import.field = media

import.listNum = 0

width = 15

height = 10

}

offset

This is the x, y offset from the layer beneath it.

tile

We can tile the image x, y times inside the GIFBUILDER object. The maximum is 20 in each direction, so you may need a bigger image if you need to cover more space.

The TEXT object

Finally, we're going to look at the options for a TEXT object in GIFBUILDER. TEXT objects are used to display any text we want in GIFBUILDER, but will be mainly using them to show the title of each page as a menu item. This list of properties is much more exhaustive because this would obviously be one of the most important objects to customize when we're creating a menu using graphical text:

Property

Description

text.field

This is the field from the menu item we want to use for the text. We are going to use title in our current site, but we could use the description or abstract if that was necessary.

fontFile

As we are rendering this text as a graphic image, we don't need to rely on browser-safe fonts. We can point this to any font file that we are licensed to use to generate our images. This is one of the most important reason to look at using GMENU because it means we don't have to create in images in Photoshop or Flash files for every change or rely on JavaScript/CSS solutions that may not work with the font we want to use.

fontSize

This is the font size of our text.

fontColor

This is the color of our text.

offset

Like the other objects, we can define an offset from the layer before this.

align

We can align the text to the right, left, or center.

angle

We can set the angle to display the text at. For a 45 degree angle, we could say 10.angle = 45.

niceText

If set, this will render small text cleaner by generating the text at twice its font size scaling it down to the correct size using ImageMagick on the server. Unfortunately, this can be CPU-intensive so we should only use it in production if we've tested it with and without and decide whether we need the functionality.

shadow.offset

We can render the text with a shadow and define its x, y offset.

shadow.color

This defines the color of the shadow.

shadow.blur

We can change the blur of the shadow with values 1-99.

shadow.opacity

If blur has a value, we can set the opacity of the shadow from 0% (transparent) to 100% (opaque). Example of 80% opacity:

10.shadow.opacity = 80

shadow.intensity

We can set the intensity of the shadow from 0 to 100.

emboss.offset, emboss.blur, emboss.opacity, emboss.intensity

We can also use an emboss effect on our text using properties similar to the shadow properties.

emboss.highColor

This sets the upper border color of the emboss effect.

emboss.lowColor

This sets the lower border color of the emboss effect.

GIFBUILDER layers

We work with GIFBUILDER by creating new objects for the GIFBUILDER, designing them with properties, and layering them by number values. Each layer is stacked in ascending order (larger numbers on top), and then TYPO3 generates a final image by flattening all of the layers into one image. It sounds a little complex, but look at this example: 

lib.subMenu.1.NO {
5 = BOX
5.color = #aaaaaa
5.dimensions = 3,3,400,20
10 = TEXT
10.text.field = title
10.fontSize = 12
}

In the example that we just saw, lib.subMenu.1.NO is our GIFBUILDER object. Although the numbers used to identify objects (5 and 10 in the example) are sometimes arbitrary in TYPO3, they are very important for GIFBUILDER because they define the ordering in layers. GIFBUILDER stacks it's subobjects from lowest number to highest. So, in the example that we just saw, TYPO3 is generating an image in a logical sequence:

  1. A gray box is defined.
  2. The dimensions of the gray box are defined to make it 400 pixels wide and 20 pixels.
  3. A text object is created on top of the gray box to show the title field of the page from the menu item.
  4. The size of the text for the title is set to 12 pixels.
  5. TYPO3 generates a flattened image of our menu item title in a gray box.

Using this system, we can stack very simple objects on top of each other to draw basic buttons.

GIFBUILDER properties

The GIFBUILDER object will apply itself to all items in a GMENU menu. For the basic GIFBUILDER object, we are only going to look at two properties:

  • XY defines the size of the image (width and height)
  • backColor defines the background color for the entire image

The interesting trick for XY (and some of the other dimension properties) is that it can be based on hard-coded numbers and TypoScript constants, or it can be a calculation based on the size of another item. In the following code, the size of the GIFBUILDER object is tied directly to the size of the TEXT object declared below it:

10 = TEXT
10.text.field = title
XY = [10.w]+10,[10.h]+10

The references [10.w] and [10.h] read the current width and height of the object associated with 10. Then, we add 10 pixels onto each one to give ourselves a little bit of room for spacing. We'll use this technique in GMENU to make sure that our boxes and graphic objects always line up with our titles.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.208.181