Our client, Marbella Interiors, a local interior design studio based in the Marbella area needed an easy way for its website visitors to view over 350 images for different aspects of the home. So when a visitor comes to the site, they would see a list of sections such as: Accessories, Bedrooms, Kitchen etc. The client also expressed an interest in being able to manage the galleries themselves so the interface would need to be simple.
The client requested:
- Present the images in a nice way to the end user.
- The gallery would need to be split into sections like Bedroom, Bathroom etc.
- Each section should have a small thumbnail depicting what the gallery is about.
- When gallery thumbnail is clicked, it will open a larger version of the image.
- The larger version should show a caption showing what the image is.
- The admin of the gallery would need to be simple enough for the client to be able to manage it themselves.
The client is using WordPress with DIVI theme and whilst WordPress does come with a default gallery manager which is relatively easy to use it does lack in features, therefore a custom solution would need to be found.
We reviewed the standard gallery creation method that comes out of the box with WordPress and also some ready made plugins that work with WordPress but these did not accomplish all of the goals set by the client so we decided the best approach would be to:
- Install the Advanced Custom Field plugin to allow us to create the custom sections for each section of the home.
- Create a custom post type called “Galleries” which would allow us to create a gallery post type and therefore allow the client the flexibility to create further custom galleries later down the line.
- Install FooBox Image Lightbox plugin to allow us to create a light box so when a visitor clicks on a thumbnail in the gallery, they will be presented with a light box containing a larger version of the image and with the option to scroll through the images.
- DIVI comes with an accordion function so we decided tom hook into that and this allows the user to easily click on a section to reveal all the thumbnails within the section.
Due to the sheer amount of images to be shown (350+) on one page we did advise the client to optimise the images before they upload and restrict images to 650pixels wide. This keeps each image under 100kb but any optimisation that can be applied is a good thing in order to make sure the page loads quickly for the end user.
Marbella Interiors now have a nice gallery using accordions to present each section with a small thumbnail. The visitor then clicks on the accordion to reveal all the images in that section and on clicking an image a larger version opens in a lightbox accompanied by a caption and the user can scroll through the section to view all the images.
Watch the video below showing how the gallery works on the front end.
On the back end using Advanced custom we enabled the client to be able to easily upload and rearrange images. Client is able to remove, add and rearrange images as well as define the text for the caption which appears to the end user.
Watch the video below showing how the client can easily manage the images in the back end.