This guide will show you how to style your website's artwork grid and how the different options will look.
What to know about artwork grids
There are set options to choose from with our artwork grid styles. As each of these has a slightly different style, we recommend testing these with your particular set of images to find the best fit for your works. For example, some grids (such as flow grids or sliders), may better suit a group of horizontal or landscape orientation images. You will also have the chance to further customise your grids, using the grid settings. In these settings you can choose the alignment, ideal number of columns and the cropping. This can make your grids look very different to other grids using the same grid type.
Where to find these settings
These settings will affect your dynamic artworks page. Find them in Settings > Settings > Artworks > Artworks grid layout. From the dropdown box, the default grid type for your theme is marked. This will be different for each of our themes.
Grid types
Standard (list of all works)
The standard grid is a flexible layout, where the images and captions are lined up in a grid, with further options for alignment of the images, cropping, aspect ratio, and ideal number of columns.
In the example below, the images are cropped, with an aspect ratio of 3:2 portrait, and 3 columns:
Tile grid
A tile grid brings images together like vertical bricks. The vertical columns will be of equal width, and the images will slot into place in the order that looks best for your images. Therefore the exact order of the images may be slightly amended for these images to fit in and still look good. The artworks will 'tile' into place from left to right, row by row, as the page is scrolled down.
This grid is best suited to portrait orientation artworks/images.
Flow grid
A flow grid places artworks/images into rows of the same height, with varying widths of the images (where applicable). This gives a tile effect similar to the tile grid, but horizontally, while keeping the vertical height the same across each single row.
Unless you have images that are all the same height and width, the height of different rows will not be the same.
Scatter list
A scatter grid scatters your images around the page. All images will be the same width and their height is determined by their individual aspect ratio.
Slider
A slider layout brings together your artworks in a carousel. One artwork and its caption will be central at any one time, and you can scroll sideways to feature the next artworks.
Slideshow
A slideshow layout 'features' one image on top, with the next artworks previewed below in smaller icons. You will be able to click the arrows and thumbnails to browse through the artworks. The caption is below the slideshow panel.
Additional feature panel grid styles
In some feature panel grids, you will also be able to select a 'grid type', which includes additional layout options. You will find these in the feature panel edit page > Grid settings > Grid type:
Detail grid
A detail grid uses smaller images, the caption is placed beside the image and is designed to be roughly equal height to the image.
Image grid
An image grid is a standard format, with the image placed above the caption. Additional settings can be used to adjust the position of the image within this invisible box, to align it further with the caption.
The example below is with the 'cropped' setting:
The example below is with the 'uncropped' setting:
Feature grid
A feature grid 'features' each image at a larger size on one side of the page, with the captions placed to the right-hand side.
What else might affect my image grids?
- The extra settings you have for alignment, number of columns, crop and aspect ratio when cropped.
- The range of images you have; if the width and height vary a lot, this will change the look of your artwork grids
- The order you have your images in. This can make the grids look quite different, so it may be worth experimenting with the image order, if you can
- Additional features such as enquiry buttons, 'view more details' buttons, add to cart buttons, prices, and sold/available labelling.
-
Caption length: in Settings > Artworks > Artwork grids > you can turn on 'Customise grid caption / Show full caption' and choose the caption elements that will display in your grids, by ticking each field on and dragging into your preferred order: