Out of all the image gallery plugins available for WordPress, Nextgen is probably the easiest, most widely-used of them all out-the-box. This tutorial will hopefully help you understand where things are and how to simply create Albums and Galleries on your website…
There are add-on plugins that can extend the basic functionality of this plugin. Be sure to discuss what some of these things might be if you are looking to go out-the-box.
Once you are logged in to dashboard, you can usually find the “Gallery” panel somewhere towards the bottom of your left sidebar. When you click “Gallery”, a sub-menu will appear. We will navigate through some of these sub-menu items throughout this tutorial.
Create New Gallery & Upload Images
The first thing we wanna do, is “Add Gallery / Images” so click that sub-menu item.
Next, we want to create a gallery to upload images to, so click the “Add new gallery” tab then in the blank field, give your gallery a name and save it by clicking the “Add Gallery” button.
Now that we named our gallery, we want to upload images, so click on either the “Upload Images” or “Upload a Zip-File” tab (depending on your preference). Click “Browse…” to browse your hard drive for the correct image files to upload. Then click the “Choose gallery” drop-down to choose which gallery to import the images to. And finally, click “Upload images”.
Note: sometimes the upload will return a “http error” message when uploading images, click the Disable flash upload button, then try again to usually fix this issue.
Managing Gallery
Now that we uploaded images to our gallery, lets click “Manage Gallery” in sub-menu to view.
You should see a all the galleries created listed on this page. Take note of the “ID” numbers for each because you will need this later when we go to place your gallery using the shortcode. The ID numbers listed on this page, are all Gallery ID numbers, not to be mistaken with Album ID numbers which we will encounter later.
Click on one of the Gallery titles so we can take a closer look and configure it.
General Gallery Settings
You should see all the images you imported on bottom half of page, but lets focus on top half for a second.
Title: self-explanatory, but this is how the title will render on front-end of site.
Description: This will appear on front-end depending on how you choose to show gallery.
Path: This is where your gallery images are located on the server. By default, Nextgen creates a /gallery/ directory in your wp-content/ directory, so as you create new galleries they will be added to the wp-content/gallery/ directory.
Create new page: If you are planning on using individual pages for each gallery, you can easily create a new page by simply clicking “Add page”. You would select a Parent page from drop-down if your individual galleries will be on their own individual pages and have a Parent page that they are supposed to be sub-pages of. For example, a parent page might be called ‘My Vacations’, and you might have 3 separate galleries called ‘NYC’, ‘Napa’, and ‘Niagra Falls’ respectively. So if you wanted to add a 4th gallery called ‘Virginia Beach’, you would select ‘My Vacations’ from drop-down, then click “Add page” and a page will be added as a sub-page of My Vacations.
Page Link to: Once you create a new page, if the gallery will appear on a specific page, you can select it from drop-down here.
Preview image: This is the images used as a cover image to the gallery.
Author: If there are multiple WP users on account, you can assign which user the gallery will be given credit to.
Remember to “Save Changes” as you go.
There is a button that says “Scan folder for new images”. This only applies if you are uploading images via ftp. You would click this after uploading new images to the wp-content/gallery/ directory via ftp so it searches for new images.
Individual Image Settings
Now that we took a close look at some of the gallery settings on top of the page, lets scroll down to where all the images are listed.
On the left, you see the boxes to select an image. The column next to it, lists the individual Image ID numbers (don’t confuse with Gallery ID, Album ID, or any other ID numbers). These are specific to the images in Nextgen gallery. You will also see your Thumbnail image and Filename/info listed in next 2 columns.
The next 2 columns are for you to add “Alt & Title Text / Description” and comma-separated “Tags”, respectively for optimization. Depending on how you configure gallery to render, this info may appear on hover. Galleries can also be displayed by tags.
The last column gives you the ability to “Exclude” specific images. So let’s say you don’t want the cover image duplicated once you go into the gallery, you can exclude it here; or perhaps you don’t want to delete an image you uploaded because you haven’t made up your mind if you like it or not. Whatever the reason, this give you a quick way to hide it from rendering on front-end.
Above where all the images are listed, you will also notice a drop-down called “Bulk actions”. This is an easy way to apply changes to all (or some) of your images quickly.
First, click the selection box next to “ID” where all the column titles are, to select ALL the images listed, or simply select individual images to apply changes to as desired.
Then click the “Bulk actions” drop-down. There are alot of choices, most of which are straight forward. Feel free to apply bulk actions as you see fit. If you change the thumbnail size settings later, you may need to come back here and “Create new thumbnails”. This is also an easy place to “Delete images”. Remember to click “Apply” after selecting one of the options, then save changes just to be safe.
Next to the “Apply” button, you will also find a button called “Sort gallery”. If you click it, it will take you to a page with all of your gallery images in a grid. You can then click-select an image and drag it somewhere else to change the order in which the images appear. Remember to click “Update Sort Order” after you finish re-ordering your gallery, then click “Back to gallery” to go back to your gallery settings page. If you forget to Update Sort Order, the changes will not take effect.
There are alot of settings and you may end up coming back and adjusting some more as you go. It’s ok. Take your time and be patient, you will soon be creating galleries on the fly without thinking about it. Remember to “Save Changes” as you go!
Creating Albums
Once there are several galleries created, you may decide to organize them into one or several Albums for easier browsing so click “Albums” in the sub-menu.
You first want to type a name in the “Add new album” field, then “Add”.
Managing Albums
Below that, you will see 3 columns. The first one will show the contents of the album you select from drop-down. The middle column will show all the galleries you created. And the last column will show any albums you created.
Once an album has been added, you can “Select album” from drop-down and you will see it appear in the column on the left.
You can easily drag and drop galleries, and even other albums into the selected album (left column) in the order you prefer them to render in.
Other Sub-menu Items
Before addressing the question on your mind (“how do I place my gallery or album on a page?”), I just want to point out that there may be additional items in the Gallery sub-menu for you to peruse and configure some more. Word of caution: tread carefully, be sure to take notes as you go in case you have to put settings back. If you don’t feel comfortable with some of the advanced configurations, feel free to speak to Krista for more specific information or to make some requests for changes.
Now what?… Shortcodes!
Now that we have created galleries and/or albums, we probably want to place them into pages, posts or even widgets using shortcodes.
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.
How the “Options” are configured will determine which shortcode to use, but these are the basic shortcodes:
For a slideshow: [ slideshow id=x w=width h=height ]
For a album: [ album id=x template=extend] or [ album id=x template=compact ]
For a gallery: [ nggallery id=x ]
For a single picture: [ singlepic id=x w=width h=height mode=web20|watermark float=left|right ]
For a image browser: [ imagebrowse r id=x ]
To show image sorted by tags: [ nggtags gallery=mytag,wordpress,... ]
To show tag albums: [ nggtags album=mytag,wordpress,... ]
Please note: When placing the shortcode in a post, page or widget be sure to eliminate the extra spaces after the open- bracket and before the close- bracket.
Remember when I said not to confuse your ID numbers? Well this is why. You will need to find the correct Gallery or Album ID number to use here.
So you simply add the shortcode where you want the gallery, album or slideshow to appear, then Publish or Save as Draft so we can see if it worked on frontend. If your ID number is incorrect you will get an error message where the gallery should appear.
If you want to see Nextgen Gallery in action, visit my Creations page. The slideshow on top is utilizing JW slideshow plugin. Below that you will simply find a basic gallery.
Affiliate Products
