Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 10 – Part 8 – Configure the NextGen Gallery Plugin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

The next thing we’re going to do is configure the NextGEN Gallery. It’s a very complex plugin so there are lots of things to learn about how to use this plugin. We’re going to start by looking at what we’re going to try to accomplish.

We’re accomplishing essentially a portfolio of images to go on the projects page of this Genesis theme website where when you click on the image, you get a slideshow that pops up showing various images from the project. We’re also going to configure this widget which is a much smaller version of the same thing although this is more general and shows different projects together.

Creating a Gallery

The first thing we’re going to do is create a widget like this but first we need to create a gallery. We come over to the NextGEN Gallery. What it does is it lets you upload a whole bunch of images, place them in a gallery and either display thumbnails like this or display a slideshow or display that gallery in a whole bunch of different ways.

I have a lot of videos on the site about how to use NextGEN so I’m not going to be talking about everything here. I’m just going to really be talking about how to upload images in NextGEN and how to use this NextGEN widget to display the images.

You can see an example of the NextGEN Gallery here. We use NextGEN on our site to display member sites although that really only shows up if you’re not logged in. This is an example of the NextGEN Gallery here as well and it includes the ability to be paginated.

If we say these things should show a maximum of 15 images, then if there are more than 15, it adds this pagination feature and it also lets you show this as a slideshow rather than as a picture list. If you see it as a slideshow, what will happen is it loads everything here, we’ll see the individual pictures and we’ll cycle through those, I hope.

I haven’t actually looked at the functionality of this lately and I did a mess around with NextGEN here in an effort to optimize which may actually prevent that from really working. That might be what we have here but let’s start it from the beginning and see if it looks different.

I guess my optimization of this turned off the code that shows that but obviously, it will bring up big versions of the image if you click on it. That’s what the NextGEN Gallery does, you start off really with looking at the NextGEN Gallery options. We’ll start off with our general options, we really have nothing that we need to change here, we’ll let it store in wp-content and gallery and we aren’t really going to change any of this.

Set Thumbnail Height and Width

However, if we come over and look at thumbnails, you can see that it gives you the ability to set a typical thumbnail height and width. We’re going to leave these alone but we’re going to come back and set them so that they are appropriate in our situation but I want you to see what it looks like when they’re alone, when we just use the default settings.

In terms of images, the same thing is true. You can have NextGEN resize your images as it uploads and specify the size, the maximum height, width and the image quality as it’s being uploaded and it will change the images so that this becomes its maximum size.

If the image is smaller, it won’t enlarge the image but if the image is larger, it will decrease it. You have to say, “Automatically resize images on upload” if you want it to automatically do that and we’ll save those changes.

Upload Images to Gallery

We’re going to start off by creating a gallery simply by saying, “Add a Gallery” and I’m going to call it the “Neely Residence”.  I’m going to say, “Scale images to max width 800px or max height 600px” and I’m going to select the files from my business website and this right here. We’ll select all of these images and say, Open.

We need to choose the gallery we want them to go in so we’ll pick the “Neely Residence” and upload those images. What it does is it uploads all those images that we picked from our computer and it’s going to create thumbnails if necessary.

Add Alt Text and Tags to Images

If we come over to manage gallery, click on the “Neely Residence”, you can see we have all the images that have been uploaded. The images are actually 580 x 434 pixels so you can see it didn’t actually have to resize them. You have the ability to add alt text, you can add tags and you can decide you don’t want this to be displayed.

We’ll add alt text and we’ll just say, “Front view of the residence” and this one will be the “Family room view”. We’re not going to do this with everything but I just want you to see the difference between putting alt text in and not putting alt text in. If we hit Save Changes here, we now have those things have been saved and we have these images.

Image Description

If you’ve got lots of them, you can also add descriptions, “Some description” which is really just for your benefit. This description is going to show up on the image. When we expand the image, it will show up below the image and you’ll see what that looks like so here’s “No Description”, hit save changes. We’ve got “Some description”, “No Description” and really no description, see what those look like. That’s a gallery.

An album is a collection of galleries. If you’ve got something like my favorite homes I’ve designed and you have one gallery per home, you could easily create an album of my favorite homes, put each of those galleries in that album and you could display the album on the site. That’s not actually what we’re talking about here but that’s what an album is. An album is a collection of galleries, a gallery is a collection of related images.

Add Widgets to the Page

What we’re going to do is add the widget to our page. If we come over to Appearance and Widgets, the NextGEN Gallery creates a widget and it’s the NextGEN widget rather than say the NextGEN slideshow. We come over here to the Primary Sidebar, take our NextGEN widget, drag it up in here and let’s say “Neely Residence” as its title, I want to show all 12 thumbnails.

I could show original images but obviously, they would be way too large so we’ll say, all 12 thumbnails. We’re going to say, random and it’s not going to be from All Galleries, it’s only the ones which are listed and that’s Gallery ID 1. We have to put only those which are listed and Gallery ID 1.

Notice that these images are set at specific size here, 75×50 which is different than the thumbnail size, hit save to this, refresh this page and here are our 75×50 images. They don’t really fit very nicely in this space do they?

Picking an Image Size

What we really want to do is pick an image size that’s going to work well here. We know we have 246 pixels and obviously there’s a padding that goes in between these things and a border so it’s not going to be 123 pixels but we’ll just look and see what happens if we say it’s 123 pixels.

So 123 pixels and we left that at 50. We’re not going to leave it at 50 but if we left it at 50, it would ignore the 50 but make them 123.  We have a 123 pixel wide image but 123, is by the time you add the padding and the border around, is actually more than the available space so you can’t have 2 side by side.

I think it’s probably something more like 115 so let’s just go ahead and say 115. No, not quite right. Let’s take it down to say, 110. It worked, now they are all side by side but it’s not quite right because you’ve got more room here and less room there. Maybe that’s probably about 6 pixels so let’s say 113. That looks good.

It fills up the space, it sits side by side and they are 113 pixels wide. It’s probably difficult for you to tell this but the quality of the image isn’t that great because it’s not really the thumbnail size. What we really should do is make our thumbnail size either larger than this size or exactly the same size.

Right now our thumbnail is smaller so it’s distorting the image when it enlarges it which is why I said we’re going to go back and look at those thumbnails. You can see here’s our “Some description” and when you hover over it, you can see the title that alt text shows up as the title, see down where it says “Front view of residence”?

If you hover over the door, it’s just the file name, that’s where the alt text goes. The alt text shows up as the title when you hover over the image in this view and the description shows up as the description in the expanded view. There are our 12 images here in this configuration.

We want to improve these images by fixing that thumbnail and we need to get the right height. Our images are in the 4×3 format, that is they are 600 pixels by 400 pixels. What we’re going to do is get the right relationship of heights to widths so we’re going to divide 113 by 4, multiply it by 3. We’re going to have 113×85, that’s the thumbnail size we want to use.

Create New Thumbnails

If we come back over here to our manage gallery, go to options and thumbnails, what we really want is 113×85 and hit Save Changes. You’d think we have it fixed but we really haven’t fixed because it has already created a bunch of thumbnails at the other size. What we really have to do is come back over to Manage Gallery, open up that gallery and under Bulk Actions, we need to select them all, “Create New Thumbnails” and hit Save Changes.

Now we should have new thumbnails created at the right size and if we come back over here and say, 113×85 without thumbnails, hit Save, come back over and refresh it, it’s going to be hard for you to see through the video because the image has been resampled a couple of times but the images are incrementally clearer because this is the original size of the thumbnail that was recreated from scratch.

The critical take away from this is that it can be useful for you to determine what thumbnail size you want at the very beginning before you start uploading images.

We’re going to add one more gallery so Manage Gallery, Add New Gallery, this new gallery name is going to be “Nilon Residence”, okay to that then we’re going to add gallery images. We’re going to choose the “Nilon Residence”, select our images, come over to this one, select all these block of images, open, upload and now we wait for those to upload. Once it has uploaded them, it’s going to chop them up into their thumbnails.

That has been completed and now we come back to our widgets and we’re going to create a new widget, put it in the footer, we’ll get rid of this one but we’ll add our NextGEN widget here. This is going to be “Recent Photos”. Let’s say we want to show 12 thumbnails, let’s start off by saying that they’re 50×50, make them small, select it from “All galleries” and make them random.

It’s going to pull from both galleries not just the one gallery. We hit Save to that, come back over and refresh this. I think that’s almost right but not quite. We’ve got 280 pixels for that space, it looks like we’ve got about 30 pixels left over so we could just about add 7 pixels to each one of those. So 57×57, hit Save and refresh.

That’s almost right but I think we could add one more pixel so we’ll make it 58×58 because we really want it to fill up the space so it doesn’t end up with an odd space left over. There’s a trial and error in this process. That works quite nicely.

This video could’ve been 280 pixels instead of the 240 pixels. I forgot that these widgets are larger but anyway, that’s a bit of process if we go through that. You can see it still shows the full image size in there. There are two different ways to use the same widget using different galleries and it’s an easy way to put lots and lots of photos on your Genesis theme website.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 Comments… add one
2 comments… add one
  • Ryan Watson March 15, 2014, 6:26 pm

    Hey Rick,
    On Lesson 10 unit 6 on genesis, I was trying to add the Tiny MCE widget. I downloaded it and activated it, but it never made it to the widget selection to select using it. What do I need to do so that I can use this widget.

    • Rick Anderson March 20, 2014, 10:03 am

      Ryan, make sure that the plugin is activated. If it is you will see a widget named “Black Studio Tiny MCE”

Leave a Comment