Design: Easy Image Gallery

Posted on November 6, 2018 at 12:23 pm Written by

In this instalment of my Crafty Hacks series I want to show you how easy it is to make an image grid gallery.

When I’m out and about in Webville and Emailtown, I’m much more likely to click on an interesting image than I am an Action that’s Calling to me. This is partly down to me being a bloodyminded bugger who hates being dictated to and would rather eat bees than admit your content is enthralling, but partly down to images being more interesting than text.

A picture paints a thousand words, I’ve heard.

Pictures are nice

You are already aware of this. Multiple pictures can be even nicer; people like me won’t feel so dictated to when there’s a choice, and it implies a wealth of content or experiences to be had when we click through to reach your goal.

I told you before I don’t have any nice pictures

And I told you the internet is full of them! And you can even use some of them without getting in trouble. Any images marked as CC0 or Public Domain can be used wherever you like. Try any of the links in this handy blog post. If you’re the Milkybar Kid and only the very best is good enough, you can purchase high quality images very easily – just search for “Stock Images”.

As ever, please don’t just steal images off Google. You will get in trouble, and it will be bad. No hanky will seem big enough.

Alternatively, take actual photos

The very best most interesting pictures are those that are obviously real and of your actual product, service or team. Even if you’re just armed with your phone you can still take great pics. Focus on lighting and focus and everything else will be fine. I’ve previously written a post about easy product photography, albeit geared towards using a camera. The principles are all the same though.

Gallery nitty-griddy

Making a grid in NewZapp is super simple, but I’ve used a few nested padding blocks to make my example grid seem more feature-like. You can skip this part or add more, to your taste. Similarly, I’ve used a 3 Column Layout Block but you could use 2, 4 or alternating 1:2 and 2:1 Column Layout Blocks for a masonry effect and to highlight the larger images.

Instructions:

How many images do you want?
Make sure your images are the same size or ratio?
Choose your dropzone
Drop in a padding block
Drop in a 3 column layout block
duplicate this block twice
drop in your images
add links and alt text
Save and Preview
Yay, you're done

My grid gallery ended up looking like this:
Grid Gallery example

Pro tips

Make sure your images are all the same size! Don’t forget to link them all. For best results give them all relevant but different alt-text – load them up with keywords.

I hope you enjoyed this post as much as I enjoyed making it. Please let me know in the comments if you’d like to know something specific or if you’re stuck in any part of the process.

Follow Tom Scott on Twitter

Tom Scott

Digital Designer & UI Architect at NewZapp
@destaids

Get the latest Email Marketing updates & insights