By updating your image gallery to the new version of Grid Gallery you'll get a fresher looking website with more functionality. This help guide will walk you through how to change from the old gallery stack to the new and improved Grid Gallery.
Use your old gallery stack images
Check if your old gallery stack images are still on file. If not, contact support and we can supply a zip file. Alternatively, you can do the following:
- In your dashboard, make sure you're in Preview mode. Then hover your mouse pointer over the first image in your old gallery and right-click.
- Choose Save Image As from the dropdown menu and create a new folder on your computer. Optional: if you want the images in a particular order, save them in number sequence.
- Repeat this step for each image you want to use in your new Grid Gallery.
Add a grid gallery and re-upload the images
- In Editor mode, Add a stack.
-
Click Add Block and select grid gallery.
- If you want to achieve a similar look to what you had before with a larger 'hero' image on one side and a grid of images on the other side, try this:
+ add a two-column stack rather than a one-column stack. Now add two grid galleries (one to each block).
+ make sure in Grid Gallery Settings, that you adjust the Box Shape accordingly on both grid galleries to perfectly line up. Whether you click on the larger 'hero' image or the small thumbnails, your image will open in a popup. The only difference is that if you click the 'hero' image, there are no arrows to cycle you through the smaller thumbnails. -
Start adding pictures using the upload area in the sidebar or the blue plus button on the grey placeholder box.
- To minimise the thumbnail size, simply increase the number of columns in your Grid Gallery Settings.
Add pop-up effects
- Click on the pencil icon on an image in your Grid Gallery and click on the checkbox 'Enlarge the full picture in a popup box'.
Add captions and links to individual images (if needed)
Option 1 - Add text that's visible in the Grid Gallery.
- Click on Text Styling. Here you choose where you'd like the Title text, and Secondary text positioned (if using).
- Now to add a link or text to an individual image, click on the pencil icon on that image.
- Add your text.
Option 2 - Add text that's visible only when a viewer clicks on the pop-up.
- Click on the pencil icon on an image in your Grid Gallery, add your pop-up text.
Optimise your grid gallery for desktop and mobile to avoid too large a page
You can adjust the number of columns of your grid gallery for desktop and for mobile separately to suit the screen size. E.g, you can show a 4-column grid on desktop and a 2-column on mobile.
If you have more than 6 or 8 images and want to avoid a long page on a narrow mobile screen, you may want to show a multi-column grid on mobile with 3 columns at least.
Related help guides and articles:
How to add a Grid Gallery Block
How to edit my Grid Gallery?
Head to the Rocketspark Inspiration Gallery to see industry-specific examples and get some inspiration for your own website, or visit the blog post to learn more.