Learn how to enhance your WordPress site with the powerful NextGEN Gallery plugin in this detailed tutorial, including step-by-step instructions on installing the plugin, creating a gallery, and customizing your settings.
This exercise is excerpted from Noble Desktop’s past WordPress training materials and is compatible with WordPress updates through 2020. To learn current skills in WordPress, check out our WordPress Bootcamp and coding bootcamps in NYC and live online.
Topics covered in this WordPress tutorial:
Installing the NextGen Gallery plugin, Uploading photos, Customizing gallery options
Exercise Preview
Exercise Overview
While WordPress does come with a gallery option, there are more powerful gallery plugins available. One of the more popular plugins is the NextGEN Gallery plugin. In this exercise, you will learn to install the plugin and enable a lightbox effect.
Installing NextGen Gallery
- Go to the WordPress Dashboard and log in if needed:
- Mac: localhost:8888/mrp/wp-admin
- Windows: localhost/mrp/wp-admin
On the left, go to Plugins > Add New.
In the search field, type nextgen gallery and hit Return (Mac) or Enter (Windows).
There will be several variations, but choose the one with the title NextGEN Gallery, by Photocrati Media. Click Install Now.
When asked if you are sure you want to download the plugin, click OK.
Click Activate Plugin.
Creating a Gallery
On the left side, at the bottom of the sidebar, there will be a new menu called Gallery. Mouse over Gallery and click Add Gallery / Images.
The Upload Images module should be expanded. Next to Gallery, Create a new gallery should be chosen. To the right of that menu, in the empty text field, type the name of the gallery: VW Bug
Click the Add Files button.
Navigate to Class Files > WordPress.org Class > Gallery
Click the first image and Shift–click the last to highlight all the images.
Click Open or Choose.
Click the Start Upload button. Wait for it to finish uploading.
On the left side under the Gallery menu, click Manage Galleries.
Click on VW Bug. The following page is where you can manage all the images in the gallery. Let’s next arrange the order of the images and add a caption to one of them.
Above the image listings, click the Sort gallery button.
Drag the image thumbnails to whatever order you’d like. Once you’re satisfied, click Update Sort Order button.
On the right, click the Back to gallery button.
-
In the description field for the first image, type: Finished VW Bug
Click the Save Changes button at the top. Now we’re ready to add this gallery!
Adding the Gallery
This gallery is meant for a new blog post. Galleries can be inserted into posts or pages, or even sidebars.
On the left, go to Posts > Add New.
For the title, enter: VW Bug Finished
Below, in the content area, click the Visual tab.
Place the cursor in the main content area.
In the editor panel, click the Attach NextGEN Gallery to Post button
.Under Select a display type, make sure NextGEN Basic Thumbnails is selected.
Click What would you like to display? to expand those options.
Next to Galleries, click the empty text field and choose VW Bug.
Click Customize the display settings to expand those options.
Next to Enable AJAX pagination, click Yes.
Next to Add Hidden Images, click Yes.
Click the Save button.
-
Click the Publish button, then click View Post (at the top).
With any luck, you should see all 17 images displayed in a gallery. However, we’ve seen some issues with the Visual editor in recent versions of NextGEN where only one thumbnail is displayed. If you only see one thumbnail, follow the steps in the sidebar below to get the gallery displaying correctly.
Manually Adding a Gallery Using Code
Click the back button to go back to editing the VW Bug Finished post.
Click into the Visual editor after the gallery thumbnail and press Delete (Mac) or Backspace (Windows) to delete the gallery.
Click the Text tab so we can easily insert HTML code.
-
In the content area, type the following code: [nggallery id=1]
The ID number refers to the ID given to the gallery when it is created. You can find a gallery’s ID by going to Gallery > Manage Galleries. In the list of galleries, look for the number to the left of the gallery name.
Click the Update button.
Click the Preview Changes button to see that the gallery now displays correctly. Sweet!
Click on one of the images to see it opens in a modal window with a lightbox effect. If instead it takes you to a new page with only the image showing, quit your browser and relaunch it (you may need to do this more than once). Navigate back to the blog post and click on an image to see the lightbox effect is now working.
Removing the Slideshow Link
The gallery is looking good, but let’s set different options. If you’re using the Visual editor, you can click on the gallery thumbnail within a post to change the settings for that post. However, if you had to manually add the gallery using code, you’ll have to go into the Gallery Settings. Follow the appropriate section for your situation.
If You Can Use the Visual Editor
Click the back button to go back to the Dashboard.
On the left, click on Posts.
On the right, click on VW Bug Finished to edit the post.
Click on the gallery thumbnail to bring up a dialog of gallery options.
Expand the Customize the display settings heading.
Next to Show slideshow link, click No to remove the ugly link that is automatically put in above the gallery.
At the bottom, click the Save button.
At the top left, click Monteith Restoration & Performance.
In the main menu, click the Blog tab. Good, VW Bug Finished is now the first post and the Show slideshow link is gone.
If You Had to Manually Add the Gallery Using Code:
Click the back button to go back to the Dashboard.
On the left, hover over Gallery and click on Gallery Settings.
Expand the NextGEN Basic Thumbnails heading.
Next to Show slideshow link, click No to remove the ugly link that is automatically put in above the gallery.
At the bottom, click the Save button.
At the top left, click Monteith Restoration & Performance.
In the main menu, click the Blog tab. Good, VW Bug Finished is now the first post and the Show slideshow link is gone.
Changing the Thumbnail Size
The thumbnail images in our gallery are a bit too small, so the three columns of images don’t fill the space well. Let’s make them bigger. Like before, follow the appropriate section depending on how you were able to add the gallery to the post.
If You Can Use the Visual Editor
Click the back button to go back to the Dashboard.
On the left, click on Posts.
On the right, click on VW Bug Finished to edit the post.
Click on the gallery thumbnail to bring up a dialog of gallery options.
Expand the Customize the display settings heading.
Next to Override thumbnail settings, click on Yes.
In the text boxes that appear, set the maximum dimensions to 126 by 90.
At the bottom, click the Save button.
Click Monteith Restoration & Performance, then the Blog tab. Much nicer! The images are only slightly larger, but they are now centered within the div, creating a nicer overall look.
If You Had to Manually Add the Gallery Using Code:
Click the back button to go back to the Dashboard.
On the left, hover over Gallery and click on Gallery Settings.
Expand the NextGEN Basic Thumbnails heading if it isn’t already.
Next to Override thumbnail settings, click on Yes.
In the text boxes that appear, set the maximum dimensions to 126 by 90.
At the bottom, click the Save button.
Click Monteith Restoration & Performance, then the Blog tab. Much nicer! The images are only slightly larger, but they are now centered within the div, creating a nicer overall look.