Photo galleries are very useful for small business websites that have pictures that they can show. If you’ve got a lot of pictures then galleries look very impressive. That’s true even if they are not professional images, even if they are just images you took with your phone.
So if you have a whole bunch of images or pictures, the perfect thing to do is to put them in a gallery. Potential customers are going to look at your galleries. Since our example professional services WordPress website is an architectural site we’ll be adding photos.
Add a Photo Gallery Plugin
Let’s install a photo gallery plugin and show you how to display photos in a gallery. The plugin that we are going to use is called Photo Gallery Plugin. So we’ll come over here to Plugins and Add New. Search for Photo Gallery and this is the one right here. We are going to install this gallery and then activate it.
Page Load Speed and Photo Galleries
It only loads that code on pages where you are actually using it. That saves you a bunch of page load speed and can make your site load more quickly when you aren’t loading the plugin everywhere.
And these days when we are thinking about trying to get our sites as fast as possible so that we rank as well as possible with Google, you want your plugins to be smart. The first level of smartness is not to load code when it’s not necessary. It’s not the only reason I chose this plugin but it’s a big reason.
Photo Gallery Features
This plugin has lots and lots of features. We’re not going to talk about many of them but we’ll talk about the basic features that we’re going to use on this professional services website.
It does have a whole bunch of commercial addons that are available for it. Unfortunately, you can see the plugin developer uses a bunch of this space here trying to suggest that you buy the extras. But we don’t need the extras for this site. What we want the plugin to do it does very well in the basic mode.
Adding Galleries and Albums
A gallery is a collection of images. Here’s where you create a new gallery and then you load a bunch of images into that gallery.
It also has a thing called albums and that is a collection of galleries. Once you’ve got more than one gallery you can create an album and put galleries in the album. The only good reason for doing that is you’ve got tons of galleries and you want to put them together in a logical order so that people can start drilling down by album and then going from album to gallery.
That’s not the case here for our relatively simple professional services architectural website. We’re going to have a gallery for each house we are using in our portfolio and that’s just about it. So we’re not going to use albums.
And the way the works then is that it shows you a gallery of images or a bunch of thumbnails like this. You see a bunch of thumbnails and when you click on a thumbnail you can view it in this situation or you can expand it and get the full size image. So that’s what the presentation is like in its simplest format and that’s how we are using it here.
General Options in the Plugin
So now that we’ve got this plugin installed we’ll go over to the photo gallery. Go to Options. That’s really the place to start. And you have General Options and Shortcode Defaults.
Manage Code Page Load
We’re going to start off with General Options. Really there is nothing down here, except for this “include styles and scripts in necessary pages only”. You want to say yes to that. That’s the one change that you really want to make to this. Otherwise the rest of the stuff is all fine.
This feels like you should hit save here but that button doesn’t save anything it’s just a tour button. And it’s not really much of a tour either. The first time I used this I kept clicking this button instead of coming back up here and hitting save which is what you have to do.
If we come over to our Thumbnail Options, it says that the general thumbnail dimensions are 300×300. I’m going to change that to 150×150. And I’m going to save it.
And then I don’t think we need to do anything with the rest of this. You can look over the other options but as it turns out the gallery works just fine with all the rest of the settings the way they are.
Use Shortcode To Insert Gallery
You can also come over here to Shortcode Defaults. We are going to use a shortcode to insert the gallery into the page. I know you don’t know what a shortcode is yet but I’m going to show you what it is. Every time you go to create a shortcode it gives you a whole bunch of choices.
Well, this Shortcode Defaults let’s you set up your default choices so that if you don’t want to you don’t have to change it or set them up every time you use a shortcode.
Set Up Image Sizes and Number to Display
So what I’m going to say here is Number of Columns is 4 and Images Per Page is 24. Then the front end thumbnail dimensions I’m going to make 150×150. And then show image title…we’re not going to show it. And thumbnail click action opens the lightbox. That’s what we want to have happen. So we can save that.
And if we come over to Lightbox, the full width lightbox is yes. The lightbox dimensions are fine as they are. I think all the rest of the settings are fine as they are as well. And those are the settings.
Create First Gallery
Now we’re going to go create our first gallery and that happens over here under Add Galleries Images. You just click on that and you’re going to click Add New Gallery. And we’re going to call this gallery West Seattle View Home. And we’ll let it create its own slug.
We don’t really need a description so I’ll skip that but I do want to add a bunch of images to it. So I’m going to click Add Images.
And now before you click upload files you may as well organize your images in the folders. I’m going to click make a directory and the directory is going to be west-seattle. Remember that this is a website and it’s a website directory which means that you are not going to put any spaces in or capital letters in the name. It’s all just all going to be this, west-seattle-view-home. Say Okay to that.
Now we’ve got this, so let’s open it. Now we’re in photo gallery, West Seattle View Home. We can upload files so I’m going to choose files. I’m going to come over here to my folder with the images. Now what I’m doing is just grabbing all those images and hitting open.
It’s uploading this set of images. Now I can select all of them and add to the image gallery. And there they are.
Titles, Alt Text and Descriptions
The alt title comes from the name of the image itself. You can change titles, you can add a description. I would definitely think of this as alt text on images. And so we’ve got that and all we have to do is hit save.
Generate and Add Shortcode for the Gallery
Now that we’ve created a gallery we can come over here to Generate Shortcode which is under the photo gallery. And in this case we are doing a thumbnail gallery like this and it’s not all galleries, it’s West Seattle View Home. We don’t really care about sort order and things like that so we are just going to leave it there.
Notice that the maximum number of image columns is set to 4 and then 24 images per page and image thumbnail dimensions. It’s really all set up for us so all we have to do is hit Generate. And then down here it provides a shortcode for us.
We’ll copy the shortcode and paste it in our West Seattle View Home page. Come over to our Finished Projects, West Seattle View Home and hit Edit Page.
As a reminder, a shortcode is something that places content, some kind of programmatic content, inside of the content section of a page. And so it always starts with this square brace here and closes with that brace. Otherwise, the content of everybody’s shortcode is different. All we did was copy their shortcode and paste it. That’s all we needed to do.
So we’re going to enter this in with a shortcode and we’re also going to put a google map in with a shortcode. We’re also going to put a contact form in with a shortcode.
Where You Can Use Shortcodes on a Site
A shortcode is a tool that can be used in any kind of post type and in fact can be used inside of a text widget. We could use this to place the album in a text widget instead if we wished. But generally speaking they are typically used in this context where you are in the content area of a post or page or custom post type or in widget.
Thesis will also parse them in text boxes. So if you are using a Thesis text box you can drop a shortcode in that way as well. Anyway, you’ll see us using shortcodes over and over again through the rest of the day now for putting other content in.
Review the Gallery
If we hit update to this and view our page, there’s our shortcode content. I happen to have 12 images so there’s 3 down and if you click on one you go to the image. It’s that simple.
Add the Go to a Widget
Well it’s also simple to do in a widget which is the next thing we are going to do here. Come over to Appearance and Widgets and there’s a photo gallery slideshow widget. What we’re going to do over here in column 3 is put the photo gallery widget in.
At the moment we’ve only got one photo gallery so we’ll choose it. We’re going 9 so we do 3 of them. So we’ll do 9. And I think all we have to do is save it. Let’s come over here and reload this.
Do we have a good arrangement? No, that didn’t get down to 3. Are those really 100 pixels wide? No, they are showing 150×100. Let’s make them 75×75. There we go. That got the images down to the size where they would fit in the space. And, again, you click on them and you still get the big image. That’s an example of using their photo gallery widget.