Reason #3 for Choosing TYPO3: Look ma! No Photoshop!

TYPO3's ImageMagick support can be used for more than just cropping images. When configured properly, the GIFBUILDER object takes the hassle out of edious graphics manipulation tasks. Read on to learn how we've leveraged this time- and cost-saving tool.

The first post in this series (Zach's article about crop-scaling images) made reference to TYPO3's extensive out of the box support for the popular graphics manipulation library ImageMagick. With the ability to perform more than just simple scaling operations, the use of ImageMagick through TYPO3's typoscript object GIFBUILDER, turns your website into something more akin to Photoshop than simply yet-another-content-management-system. Let's take a look at how using GIFBUILDER to build composite images on the fly saves everybody in the content creation process time and guarantees a level of quality in your final product that can be decidedly more difficult to achieve using desktop based methods.

Before coming to TYPO3, if I was working on a site that used specialized graphics for certain elements of the design or to highlight featured content, producing these assets usually required spending some time with one of the popular desktop graphics editing programs. More often than not I'd end up opening a Photoshop or Illustrator document and begin the task of tediously hiding and showing layers, adjusting text, and moving components around on the canvas. Once everything was set, I'd start the process of exporting the document. If I was lucky the document would already have slices (specialized guides used in programs like Photoshop that instruct the export wizard what part of the canvas you want to save to a file) set-up, so that all that had to happen to produce a production-ready graphic was to run an export script to cut, compress, and save the image to a file.

True enough, this sort of work isn't that complicated (for a technically inclined user) but the situation I've just described is a best-case scenario. You can quickly run in to a whole host of issues than can turn a tedious task into a flat out terrorizing one. Consider the following list of possible problems: did your designer remember to send along the associated font-files? What about linked-images? Did those get included in the zip file you received? Are you using the right version of Photoshop ("What's that? Photoshop's document structure has been updated and I need to pony up $1000 to get the most recent version just so I can open the file!?").

And then there are the technical issues that sometimes aren't obvious to even experienced users. I've been burned more than once by working in a document where the designer set the colorspace to CMYK (the de-facto color standard for print graphics). It's easy not to notice this and then export, upload, and only then realize that all the colors are just slightly off since the CMYK encoded graphics get converted to RGB color space (the de-facto color standard for web graphics). Now, if you're a client, is this a process that you're really going to want to learn so that you don't have to call on your developer every time you make a content update to your site? If the answer is no (and really, who would actually want to do this?) do you have the budget to call on your developer or designer for every minor graphics update? And even if you do go the do-it-yourself route, what happens when you need to make one of these updates but you're away from your primary workstation? You're simply out of luck.

With the aid of skilled developers, a quality design, and TYPO3's GIFBUILDER typoscript object all of these headaches can be avoided, your graphical content will be more relevant, quality will be more consistent and updates can be made in a fraction of the the time required by the laborious methods outlined above. Let's take a look at a few examples of how Cast Iron Coding has implemented GIFBUILDER based solutions to speed-up custom content creation for our clients.

An Example: The Rounded Image

Rounded corners are very popular in many site designs these days. With coming promise of CSS3, developers might actually see the day when we can rely on the browser to handle complex image transformations. Until that time comes, if you're using TYPO3 you can have your rounded corners, today! Probably the easiest way to add rounded corners on an image is to use a technique called masking. When you mask an image a second image with transperent areas is placed on top of the original image. The bits of the original that can be seen through the transparent parts of the top layer are the result of the masking process. So when we use masking to create an image with rounded borders what we're really doing is placing opaque shapes at corners of the image in order to smooth things out. Here's a snippet of typoscript that demonstrates how this technique works:

Here is an original image and the mask that will be used to make the composite:

What we're doing here with this snippet is building a "preview" thumbnail from a larger image. You'll notice that we're taking full advantage of the cropping functionality Zach mentioned in his previous post. Since these are images of people, it wouldn't work to simply crop the image at it's center; we'd lose the person's face. To avoid this problem, we set the file.height property on our IMAGE to 160c-100 . This crops the image just above it's center, and in so doing ensures that the face of the person featured in the image is fully visible. The mask property here is an important one since this specifys the mask file we are going to use.  You can see here that our mask is simply a 160px x 160px square with rounded corners. ImageMagick is configured such that you can use a gif based image as a masking image, where white is considered transparent and any black part of the image will act as the mask.

When we put it all together, here's what the result looks like:

The great thing about this solution is that it requires very little work on behalf of the content editor. All one has to do is to upload a new file. With the typoscrpt configuration already in place, generating the new file is a snap. And best of all the result is consistent, so that when generating multiple assets each graphic looks great, every time! Stay tuned, in later posts we'll get deeper into image compositing using GIFBUILDER and introduce techniques for layering text on top your crop-scaled images.