Gallery Design

By Kieran Hunter

I love designing things that I know, will work just as good as they look.

I had to design my own little gallery page, and I wanted it to be really easy to use. I completely changed the layout of this one page, in contrast to the rest of the site. As the rest of the site is focused on blog posts, with a slim content panel. I wanted the images to be large enough to see properly without having to click. However clicking the images opens up a lightbox. This functionality is almost always expected.

I used good old, ACF (Advanced Custom fields) gallery field to create the little area in the admin where I can add all the images to the gallery. It works really well, and doesn't take over the design. The lightbox is a real lightweight javascript file called Featherlight, and I didn't even have to style it.

Another great element in this is that on hover, the alt tag of the image pops up as a little title. Simple functionality, but very nice to use. As the thumbnail images were so big I had to limit the amount of images on the page to decrease loading times. So There's also a pagnation.

See it in all it's glory here.

 

Desktop View

Mobile View

Leave a comment