Go to TopA Simple Image Gallery

This page discusses why building an image gallery with a table is a bad idea and then explains the preferred approach. This is to use a set of containers, appropriately styled. To understand the method you will need to be familiar with styling pages using CSS and the techniques used in constructing the master page from which a site is built.

Go to TopWhy A Table is Bad

Consider the classic gallery of thumbnail images. Many new web authors with experience only of word processors use the technique they are used to and create a table with four or more columns, in the manner shown below. The first row contains a sequence of images. The next row holds captions for those first four images. The third row continues the sequence showing images five to eight. The fourth row holds the captions for these, and so on.

This approach fails to allow the major problem with tables when working on the web, the unpredictable nature of the window size of the site's eventual visitor. If the author sets up the table to take advantage of the widest screens, those with small screens will find they are obliged to scroll horizontally back and forth to scan through all the images, whilst with only a few columns those with wide screens have a lot of wasted space on their screens.

The grid layout of a simple gallery

The naive web author also thinks he's done well for the visually impaired visitor simply by completing the "Alternate text" field on the Image Properties dialogue, but has he? The aural browser will either read you the alternate text for the first image then its caption followed by the information for image five and image nine, followed by images two, six, and ten, etc. Alternatively, it will work on a row by row basis and will read the alternate text for the first four images, and you won't hear the first image's caption you've almost forgotten what the picture contained. Placing both image and caption in the same cell only partly overcomes the issue and depends on the reader having software that allows them to control direction of reading in a table.

This is why a table is inappropriate for anything other than its true purpose, the presentation of tabular data. It should not be used simply as a way to arrange content in a grid format.

Go to TopA Fluid Gallery built with a List

Having explained the limitations of old word processing techniques for the web, clearly a more flexible approach is needed. This must both allow visual browsers to adjust the number of columns in the grid automatically to the width of the window and aural browsers to present all the information in the correct sequence.

This can easily be achieved using the method employed to lay out the horizontal menu in the Master Page. A list is used, each item holding one image and its caption and set to float alongside its predecessor. To examine the code described below working, access the Sample Gallery and load it into KompoZer. (Right-click on the Sample Gallery link, select "Copy Link Location",  "Copy Shortcut" or similar depending on your browser, and then, in KompoZer, open the File menu, select "Open Web Location", and paste the URL into the dialogue that appears.)

In Normal view, click on any of the captions and examine the status line and you see the following sequence:

<body> <ul class="gallery"> <li>

If you click on an image an <img> tag is added, confirming its basic construction. As ever, it is the styling that makes it work. The outermost element, the <ul> tag, is assigned to a "gallery" class, with the following code:

margin: 0;
padding: 0;
list-style-type: none;

EXPLANATION: This is the conventional code to remove the bullets (list-style-type: none;) and the indentation (margin: 0; padding: 0;) that a browser with assign by default to a list.

The gallery li" selector has these rules, which work when the thumbnail images are of identical size and orientation:

float: left;
border: 1px solid black;
background-color: #ffff99;
margin: 2px;
width: 150px;
padding: 5px;
color: #333333;
text-align: center;
line-height: 1.1em;
height: 150px;

EXPLANATION: This conditional rule only applies to containers that are themselves within a list of class "gallery". Each list item is taken out of the normal flow, so instead of appearing one under another it is made to draw up alongside its predecessor which itself has been moved to the left (float: left;) Each item is provided with a thin black border (border: 1px solid black;), background colour (background-color: #ffff99;) and small margin (margin: 2px;) to separate it from following items.The width of each list item is set to be equal to the size of the thumbnail image (width: 150px;) but the item is then padded out to ensure some of the background colour shows all round (padding: 5px;). The text of the caption is made dark grey (color: #333333;) and set to the centre (text-align: center;) and as the caption here spreads to two lines given some slight adjustment (line-height: 1.1em;). Because it is vital that when a row of images is completed the following item can slide neatly to the left to start the next row, it is vital that all items are of identical height. In this case this is set a a value that clears a second line of caption text (height: 150px;).

If your gallery has images of varying height or width you will need to make the one or more adjustments described in the following section.

Go to TopCustomising the Gallery Code

Different Widths

As explained in the previous paragraph, once there is more than one row of thumbnails, the code relies on the floating containers not "catching" on one of a different height in the row above, as it floats to the left-most position possible. The neat grid-like appearance also relies on all containers having the same width.

Where the gallery contains thumbnails of different widths the ".gallery li" rule must be set to have a width equal to the widest thumbnail. To ensure that narrower thumbnails sit neatly centred a further ".gallery img" rule must be introduced having this code:

display: block;
margin-right: auto;
margin-left: auto;

EXPLANATION: Again, this rule only applies to images within a list of class "gallery". Normally an <img> tag is treated as an in-line element. When set to display as a block it will normally expand to fill the full width of the element in which it is contained. This is done to force the caption text to start on a new line under the image. Setting the left and right margins to auto-equalise means that the image becomes centred within the width set for the list item.

Where the captions are long and images a narrow some awkward word wrapping may occur caused by the short line length. In this case consider setting a width in the ".gallery li" code that is wider than the widest image along also adding the code above for ".gallery img".

Different Heights

As seen above, in the Sample Gallery there is a fixed height setting for the list item. Without this each list item will adopt the height needed to accommodate its contents. If the height of a thumbnail image or the number of lines in the caption vary, the list items changes in height. This causes the first item on a new line to get caught on deeper list item, preventing it floating to the left margin.

Although not strictly needed in the sample gallery, should that height setting be removed and text be added to the caption of an image in the top row forcing it to spread the three lines, then the neat tabular layout is destroyed. This is why the height rule is there, and in the case of deeper images or longer captions it will need to be adjusted to accommodate the deepest list item.

A typical example might be where a mix of landscape and portrait images are being displayed, when the following extra rules might be preferred:

.gallery img {
margin-top: 19px;
}
.gallery img.port {
margin-top: 0px;
}

EXPLANATION: Adding the first of these rules force all the 112px deep landscape images to display vertically centred in the 150px deep list item. The second rule is added so all portrait oriented images, which must be assigned to a "port" class, have that added margin removed.

NOTE: Should images of different heights also be involved, then the first of these rules will need to be combined with those given in the previous section.

This code is best applied where the captions have been dispensed with and the images, whether in landscape or portrait orientation, are neatly centred in the square list item "frames". In this case it is probably best to use an image's "Tooltip" facility (the HTML "title" attribute) to provide a caption, as in Sample Gallery 2.

A Fixed Width Gallery

As the structure of the Sample Gallery relies on floating each list item, the design, as presented, does not permit the rows of images to be centred. However, if the entire gallery is set within a container of appropriate width and its right and left margins set to "auto", this can be achieved by simply adjusting the width, margins and padding of the list items rules to space out appropriately the list items within the container.

Go to Top Page updated: 16 September 2009