Galleries
Galleries are a great way to group together images, and not just for photographers. They are also an eye catching way to showcase products or your existing client work. Let’s look at the different options.
There are two methods of displaying galleries, single or via tabs. And all can be configured in 3 different ways…
- Grid – Images are resized evenly based in set image size and number of columns in the gallery
- Masonry – Maintains Image sizing relative to each other.
- Justified – Resizes images according to orientation to ensure all fit in equal sized rows.
The next example uses a masonry based Gallery. This time 3 columns per row. We can see that now the orientation is not affected by the Gallery type to give an uneven, but still effective, style. The order of the images can be changed to ensure the best representation of the images.
The next example uses a masonry based Gallery. In this example 2 columns per row has been set. We can see that now the orientation is not affected by the Gallery type to give an uneven, but still effective, style. The order of the images can be changed to ensure the best representation of the images.
It is also good to remember that the reduced screen sizes of Mobile and Tablets can affect your design. As example, where 3 or 4 columns may work on a desktop, it may not on a mobile.
But if we change this to a Justified based Gallery and increase the column number to 5 we see a different display. We still have the correct orientation (unlike the Grid based)
But if we change this to a Justified based Gallery and increase the column number to 2 we see a different display. We still have the correct orientation (unlike the Grid based)
But taking the same Justified Gallery and increasing the row size, the number of columns are ignored and the images sized to fit together evenly (unlike the Masonry based).
Let’s take the Justified type of Gallery and see the effect of some other settings.
- The gap between images has been removed.
- The Hover colour overlay is changed to matched the Heading colour
- The transition of the colour change has been slowed down
- The Hover is also set to zoom in on the image.
Moving on to Multiple Galleries. These are great if there are a lot of images that can be categorised differently. Below our Interior Designer company have split out images of their work into different rooms. All of the images under each tab are also grouped together in the “All” tab which has been renamed below to “Our Work”. The All tab is optional. Click on each tab to see the different images. All tabs here are set to display the images as Justified.
And let’s finish with another Grid Based Multiple Gallery. We can see the Galleries can be incorporated into the overall design of your website.
And let’s finish with another Grid Based Multiple Gallery. We can see the Galleries can be incorporated into the overall design of your website. This time the “All” has been omitted on the Mobile version of the gallery to cut down on the amount of scrolling.
