Using your own photos to create photo galleries will help you establish and show Expertise, Authority and Trust in your niche.
And when you start taking photos for your website you will see photo opportunities everywhere. You will end up with more photos than you need for your posts and articles.
Here in this article we will look at how we can use these photos to create unique and relevant content.
And the best part of it is that it will cost you nothing.
But let’s back up a bit. First we need to think about what we are building and for what purpose.
This article will use a real life example from a project where I contribute.
Why create photo galleries?
We had an abundance of good and relevant photos that we were unable to put to use in our articles.
Creating gallery pages would help us create unique, relevant and valuable content without spending any additional money.
Publishing more photos would also extend our visibility in the search engines.
This should result in increased exposure and more visitors to our website tutorials.
And last but not least we felt that it should help our E-A-T when we were able to publish our own relevant photos.
In short, there were several benefits and we did not have to spend any money.
What tactics should we employ?
We knew that we had to keep the user experience in focus when formulating our tactics or plan of action.
It is of course quite simple. People searching for photos want to find photos.
We on the other hand want to show photos and receive visitors to our website tutorials.
We had 3 options
1. Small thumbnails linking to larger images
The easiest way would be to have gallery pages with smaller thumbnail images that link to individual larger images.
This would generate traffic to our larger images. It would however not generate visitors to our website tutorials.
We would be delivering a great user experience but fail to deliver visitors to the website tutorials.
This option would not be optimal.
2. Small thumbnails linking to website tutorials
Here we would have gallery pages with small thumbnail images that linked to our website tutorials.
This would generate traffic to our website tutorials. We would however not deliver a good user experience as visitors expect photos.
This option would not work as it fails to deliver on the user experience.
3. Larger thumbnails linking to tutorials & larger images
Here we would have gallery pages with larger thumbnail images that linked to either our website tutorials or larger images.
Thumbnails linking to website tutorials would be clearly labeled. And at least 50% of the thumbnail images would link to larger photos.
This would generate traffic to our website tutorials and we would be delivering a good user experience.
We decided to go with this option as it should deliver visitors to our tutorials and deliver a good user experience.
Finding a Photo Gallery plugin
There are several photo gallery options that offer a free option.
The trick is however to find a plugin that offers the features you need in the free option. Otherwise you end up paying for the upgraded version right out of the gate.
If you have the money to spend then go for it. But I do believe that it makes sense to look for free versions where available. There is always the option to upgrade later if you feel it is worth it.
I decided on the FooGallery Responsive Photo Gallery and quickly installed and activated the plugin in WordPress.
Installing the FooGallery Photo Gallery plugin
To search for and install a new plugin you simply login to the WordPress Dashboard and click Plugins > Add New.
Next you search for “FooGallery”. The first option should be a plugin named “Best Image Gallery & Responsive Photo Gallery – FooGallery”.
Now you need to make sure that the plugin is compatible with your version of WordPress. Look for the sentence “Compatible with your version of WordPress”.
In the unlikely event that the plugin is not compatible with your version of WordPress you need to look into upgrading to the latest version of WordPress.
Next you click “Install Now” and then you click “Activate” when the plugin has been installed.
Looking at available settings and options
If you are curious you can access the available plugin settings by logging into the WordPress Dashboard and clicking Plugins > Installed Plugins.
Now look for the installed plugin named “FooGallery” and click “Settings”.
There are as you will see a myriad of settings and options.
I do however not use this option to configure the settings for my galleries.
Setting up functionality one gallery at a time
I prefer to configure my gallery settings as I create each gallery.
And I will leave the design options aside and focus on the most important function related settings.
- How to display larger thumbnail images
- Thumbnails linking to (larger) images or website tutorial pages
- Adding text to show if photo links to tutorial
Step 1: Adding photos to your Media library
Step one is always to add the images you are going to use to your Media Library. You simply login to the WordPress Dashboard and click Media > Add New.
Next you select the images to upload or simply drag them into your media library.
Step 2: Add photos to the gallery
In the WordPress Dashboard select FooGallery > Add Gallery.
First you need to name the gallery. I am typing “My New Gallery” as this will only be seen by me.
Next you add the photos you uploaded to your Media Library in step 1.
Choose “Add From Media Library” as the “Add From Another Source” option requires you to upgrade to the paid version.
On the next page you simply select your photos and click “Add Media”.
We will go back to the settings for each individual photo in the next step.
Step 3: Setting size of thumbnails
Still in the WordPress Dashboard > FooGallery > Galleries we stay on the General tab located at the top.
We make sure that the Gallery Settings dropdown menu shows Responsive Image Gallery.
Next we set the size of the thumbnails to 250 x 250 (pixels).
You may have to use a different size depending on your theme and layout.
Step 4: Linking some photos to a webpage
Most of our photos will link to larger photos but some will link to our website tutorials.
In our example here we will choose one photo only.
Still on the General tab we select Custom URL under the Thumbnail Link section.
We then select Update to save the setting.
Next we scroll up to the image we have chosen. In our case we selected the green photo of the light bulb.
Now we click the icon labelled “i” located in the top left corner.
On the page that follows we need to complete the following fields in the menu that opens in the right hand column:
Alt text – describe the purpose of the image
Caption – This text will appear on photo (permanent or on hover)
Custom URL – the address of the website page you are linking to (URL)
Custom target – select New tab (_blank) to force page to open in new window
Please note that you need to complete the above fields for all photos in the gallery.
The exception is of course the Custom URL field for the photos that are not linking to website pages.
When you are done you simply click the “x” to exit the page as the page autosaves.
Step 5: Show text on thumbnail for user
To make sure we deliver a great user experience we must be clear with our visitors.
All photos that link to a tutorial need to show this clearly. All other photos are given a descriptive caption.
Yes, this is the Caption field that we completed in step 4.
To set the function we move from the General tab to the Hover Effects tab.
Here we select On Hover or Always Visible on Caption Visibility.
Now we click Update and we are done creating our Photo Gallery.
We will use the Gallery Shortcode listed in the right column to insert the gallery as a block or shortcode depending on our style editor we choose.
Creating the page and adding the photo gallery
To use the photo gallery we have created we simply create a new page or post.
Whether you use the Classic Editor, a block editor or a page builder you will simply add the shortcode or block to your page or post.
If you are using the Gutenberg editor you choose to Add block and then search for FooGallery. When you add FooGallery you can select your gallery from the list displayed and you are done.
Could not be easier.
This is why I prefer to use UAG but there is of course also support for other editors, page builders as well as block editors.
Summary and conclusion
Using unique and existing photos we have created relevant and unique photo galleries.
The photo galleries are saved as blocks, or design elements if you prefer, to be used on posts or pages we create.
Including the galleries on posts or pages allows us to add more content. Or we can simply let the gallery pages with photos only speak for themselves.
