Image Gallery Content Blocks

Image or photo galleries are extremely useful in many situations, and essential for some websites (photographers’ websites, for example). They come in many shapes and forms, each according to the purpose of the gallery, and how it is to interact with the rest of the content on the page. To cater to the various styles, we have a range of photo galleries available. To identify which is right for your site, we’ll ask ourselves these questions:

Should we show the large photo on the page?

If the gallery is the primary content on the page, and the purpose of the page is to show the photos, then the large photo should be included on the page itself, so the user gets the full effect of the first photo in the gallery immediately. The gallery will then be presented with one large image, and a set of thumbnails. This method places stricter limits on the size of the large image, because it needs to fit within the space available inside the website design. A site whose primary goal is to showcase photos will be designed to maximise this space, but if the photo gallery is not your main purpose, the space may be quite small. This is not necessarily bad.

[caption id="attachment_356" align="aligncenter" width="668" caption="This Other Eden, a photographer, uses a Photo Gallery on their home page"][/caption]

[caption id="attachment_357" align="aligncenter" width="690" caption="The Trellidor website incorporates a Photo Gallery into the Product features"][/caption]

[caption id="attachment_358" align="aligncenter" width="690" caption="The other option is to simply show the thumbnails, and open the larger image in a lightbox. This allows for a much larger image, because it doesn’t need to fit within a containing design, and the gallery takes up much less space. This example on the Master Builders website."][/caption]

How should the thumbnails be presented?

The basic options here are grid or slider. The grid, quite simply, presents all the available thumbnails in a grid. Each grid has a set number of columns, and as more thumbnails are added to the gallery, more rows are added to the grid. This allows the visitor to see every available thumbnail at once, but it takes more space on a page.

The slider, on the other hand, presents a set number of thumbnails in a single row. If there are more thumbnails than will fit in the row, next and previous buttons allow the user to move along the row to see more thumbnails. This method is much more complex to code, but it does save a lot of space. It is used primarily in two areas; galleries that present the large photo on the page will often use the slider because they don’t want the grid of thumbnails to distract attention from the main photo (see above). The slider allows the designer to create an impressive effect that would be difficult to achieve with a grid. The other area of use is to include the gallery within the content of a page. In this case, you may not want an entire grid of thumbnails clogging up your content, so you simply include a slider with all your images in it. The gallery presents all the photos you want without taking up too much space, or dominating the focus of the page.

[caption id="attachment_293" align="aligncenter" width="684" caption="http://www.vaughan-evans.co.za – Bronwen uses a grid of thumbnails to present her work"][/caption]

[caption id="attachment_294" align="aligncenter" width="651" caption="http://www.enerserv.co.za – ECS include a slider gallery in their content to present photos without distracting too much from the content of the story"][/caption]

Should the thumbnails be presented horizontally or vertically?

Simple question, but the answer has a profound effect on how the gallery is coded. In the examples above, Trellidor and KZN Master Builders Association use vertical galleries, while This Other Eden and ECS use horizontal. Bronwen Vaughan-Evans uses a custom coded grid that scales itself both horizontally and vertically depending on how many items are in the gallery.

Do the images require meta-data?

In some cases the photo is enough, but in other cases we need to present information about the photo with the photo itself. This is most easily done with a lightbox gallery, because of the extra space required to present the extra information.

[caption id="attachment_351" align="aligncenter" width="590" caption="An artist’s work needs to describe the work, including the title, medium, size and price - http://www.vaughan-evans.co.za"][/caption]