Having a gallery of images on your website can enhance blog posts and draw visitors’ attention. This results in them lingering a bit more on your website to learn more about you and what you have to offer.
While WordPress does allow you to upload photos and create a gallery, you might be overlooking one very highly populated image resource – Instagram.
An Instagram WordPress plugin like Spotlight can help you display your feed, your tagged posts, and other users’ posts through hashtag feeds.
In this post, I’ll show you how you can enhance a blog post by creating an Instagram gallery in WordPress.
Create an Instagram Gallery
Install the Spotlight plugin
Spotlight comes in two main versions: Spotlight and Spotlight PRO. The free version, which can be found on the WordPress plugin directory, comes with a lot of great customization options that allow you to create clean and classic feeds.
In this tutorial, I will be using Spotlight PRO, but if you’ve decided to opt for the free version, you can follow along too!
Connect your account
Once the plugin is fully installed and activated on your WordPress site, you need to connect your Instagram account. Spotlight lets you connect both Personal and Business accounts.
Due to restrictions on Instagram’s behalf, some features such as Instagram stories can only be shown if your account is a Business or Creator account. You can switch from a Personal account to a Business account at any time – and better yet, it’s free!
Connecting your account is simple. Click on the button that corresponds with your Instagram account type and authorize the plugin to access your media.
In a matter of seconds, your feed will appear in Spotlight’s live interactive preview.
For this tutorial, I’m going to change things up a bit. I’m going to display a mixture of my own posts together with a hashtag feed.
My architecture blog post is in dire need of some examples of minimal architecture and although I do have some examples on my feed, I’d like to get a wider variety of examples.
I’ve therefore selected my own account, and added the hashtag #minimalarchitecture.
At this point, we can head on over to the Design tab.
Design your feed
The live interactive preview is great for designing your Instagram feed. It eliminates the need to go back and forth between the front end and back end of your website to check out any design changes you make.
Spotlight gives you a live preview of your feed and any change is reflected straight away.
With the free version of Spotlight, you will be able to set up a Grid layout for your Instagram gallery. With Spotlight PRO, you can also choose between the Highlight and Masonry layouts.
Spotlight comes with over 40 different customization options, including:
- Setting the number of posts and columns,
- Setting the outside and image padding,
- Setting the background color of your feed,
- Displaying or hiding the header,
- Horizontal or central headers,
- Adding Follow and Load More buttons,
- Customizing buttons,
- Displaying your posts in a lightbox/popup box,
- among many others.
For this tutorial, I’m going to hide the header and add a grey Load More button at the end of my feed.
As is expected, Spotlight is fully responsive. It also lets you design exactly how your feed will look on different devices. All you need to do is select the device icons at the top of the Design page.
You can also find these device icons next to the design options that are customizable for each device. Once again, the live preview customizer adapts to the device you select, allowing you to get a clear idea of what your feed will look like.
Filtering and Moderation
Upgrading to the premium version of Spotlight lets you access the Filter and Moderation tabs.
Under Filter, you can curate your feed and filter it to show or hide posts which contain specific words in their caption, or hashtag.
In this example, I’ve decided to hide posts which have the following hashtags:
Switching to the Moderate tab, here you can manually select the images you want to show or hide. For this tutorial, I’ve selected a few images I want to hide. The images I selected are shown greyed out below:
Embedding your feed
All you need to do now is embed your feed. Remember to save your feed and give it a memorable title. Spotlight will then generate a unique shortcode which you can use on any page, post, footer or sidebar.
Alternatively, you can opt to use the dedicated widget and select your feed name from the drop-down menu.
Display your Instagram gallery in WordPress
There you have it! You have now successfully created your Instagram gallery and displayed it on your WordPress site.
I’ve decided to add my feed to the end of my blog post on minimal architecture. Here’s a preview of what it looks like with the Grid, Highlight and Masonry Instagram galleries:
The same can be done on any page or post across your site, no matter what theme you’re using.
Are you using Instagram galleries on your WordPress site? Share your websites in the comments below.