 |
||
BREAKING FREE OF THE VERTICAL LIST FORMAT
Introducing The Tiling Format
It is fairly common, on shopping sites in particular, to find collections of items which are presented in a tiled format. That is to say, instead of placing each successive item below the previous one, so the list of items forms a vertical list, the items are formatted into rows, like the images on a contact sheet, or the tiles on a checker board. This regular horizontal and vertical positioning of items as referred to as tiling.
When I sat down to write this tutorial on how to achieve tiling in Red Queen I was reminded of the artist Escher and the tiling theme of much of his work. So it is no accident that I have borrowed from Escher's artwork to illustrate my examples of tiling.
In fact, before plunging into the details of how to configure the program to tile records, let's take a quick look at an example of tiling. In this case, some of Escher's prints represent the items that might be up for review:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There are, of course, variations on the details of the tiling which are possible: squared vs. rounded corners, different background color for alternate tiles (or no background color), resizing the inter-tile spacing, or changing the size of the tiles themselves, the addition of a shadowed frame to make the image stand out from the page (as demonstrated above), and so on. You can do all of these things by changing a few configuration variables within the program.
If tiling appeals to you, read the remainder of this tutorial with care and you will find that switching on the various options is fairly painless. But the details are important, and that is the reason for this tutorial. The templates associated with tiling are also a great deal more complex than those which are used to present a vertical list of items. That is another reason why the subject of tiling deserves an entire tutorial of its own.
The Importance Of Image Dimensions
If you use images to illustrate your records, it is important when tiling, that you enforce a strict limit on the size of any image that might appear within a tile. Failure to do so may lead to tiled rows that stretch horizontally more than expected and which destroy the proper alignment of records on the page.
It is therefore a good idea to ensure that your thumbnailer is switched on from the Configure > Thumbnails control panel (preferrably select Image::Magick as this is the best thumbnailer in general), and that the size of acceptable avatars or logos (of either might appear in a tile), does not exceed the thumbnailing size.
Perhaps the best strategy when it comes to tiling, is to thumbnail with the option to scale images so that their largest thumbnailed dimension is no greater than a fixed size, say 120 pixels. You can effect this thumbnail option like so:
Be sure to experiment with your formatting of tiles and images by creating full rows of tiles, so that you may see how they position on the page.
You may also need to shrink the placeholder image that is used when NO image is available for placement. The default image, shown below is a square of dimension 120 pixels. You can upload a replacement (of the same name, from the Configure > Skin Images control panel) to match the size of your thumbnailing dimension, if it is somewhat smaller than 120 pixels.
Framing Images
The tiles shown in this tutorial have image framing enabled, wherein a white border is added to the image and a shadowed edge is applied to make the image appear to pop slightly above the page. You have the option to add such framing to all the images in your site by activating the following variables:
One observation worth pointing out is that the CSS for framed images requires that the page layout engine in the browser doesn't attempt to squash down the table cells in which the framed images appear. When that does happen, the left and right edge of the frame image can appear truncated. To avoid this problem, a spacer has been added to the format_image.ttml template, just below the table containing the image. This spacer is one pixel greater than the natural width of the framed image, and ensures that the CSS functions correctly.
Next Section: TILING CONFIGURATION VARIABLES
Documentation
Documentation for Red Queen, which is entirely separate from these tutorial pages, is an ongoing project (as is this tutorial). You should find that there is sufficient information in the Red Queen User Manual to answer most of your technical needs. Suggestions for improvement to both the User Manual and this tutorial are always welcomed. As more users gain experience with Red Queen, and issues are resolved for its application in different areas, information gained from that experience will make its way into these pages.
Note: If you cannot find the information you are looking for in this tutorial, try the Red Queen User Manual which you should find far more comprehensive than the instructional dialog found here.
Copyright © 2004 Random Mouse Software. All Rights Reserved.