Using NextGen Gallery, the Best WordPress Gallery Plugin

If you purchase through a link on our site, we may earn a commission. Learn more.

In this post we take a look at usage of NextGen Gallery, the best gallery plugin for WordPress.
Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

Photo galleries are one of the most requested additions to a website, and as such there are a number of plugins available for WordPress as well. The most popular, advanced and complete WordPress gallery plugin is NextGen Gallery by Alex Rabe.

Get NextGen Gallery

Installation and General Use

[youtube]http://www.youtube.com/watch?v=Le_ZsNSuIvM[/youtube]

Multi-Level Galleries

By default, NextGen allows you to display on a page or post:

  1. A single picture
    Using the shortcode [singlepic id=x]
  2. The contents of one or more galleries
    This is done via the shortcode [nggallery id=x]
  3. The galleries within an album
    Via the shortcode [album id=x template=extend] OR [ album id=x template=compact]\
Now let’s say we wants such a structure:
– 2012
– Event Type 1
– Event Type 2
– photos…
– 2012
– Event Type 1
– Event Type 2
– photos…

So our main page should ideally only have a thumbnail image for each year, for example arranged in a grid layout:

Nextgen albums

There are 3 options to achieve this:

Option 1

Use shortcodes for several albums on the main gallery page:

[php]
[album id=1 template=compact]
[album id=2 template=compact]
[/php]

The problem with this method is that it will display the galleries directly on our main page, when we would only like the year and one thumbnail (see image below).

nextgen-option1

Option 2

Here we first have to put our year albums into one other album named ‘All’, so we will have albums within an album.

[php]
[album id=1 template=compact]
[/php]

This works well except for the fact that no thumbnail is displayed for the year (see screenshot below)

nextgen-option2

The solution to this turns out to be simple enough, if not intuitive. On the Manage Gallery page, the control for setting the image for the album is in the upper right of the page underneath the control for setting/creating a page to display the album.

nextgen-option2b

So with this option we can achieve the structure we wanted originally, with 3 levels. The only gripe I have is that it is not possible to create a breadcrumb structure for users to keep track of the gallery levels. For example, if I am in the ‘Picnic 2010’ gallery, how can I go back to the ‘2010’ page? Nextgen does not create pages for albums. There is a way to achieve such functionality, following these steps, but it is quite cumbersome:

  1. Create a page named ‘Gallery’. This will be the main page for your photos/pictures on the site.
  2. In the ‘Gallery’ page insert the shortcode [album id=x template=compact] where the id of the album refers to the album containing all the yearly sub-albums.
  3. Create a page for each year (2011, 2010 etc.) setting ‘Gallery’ as their parent.
  4. For each album go to the edit screen and select the page you just created for the ‘Page Link to’ option.
  5. Go to the year page e.g. 2011 and insert the shortcode for that year’s album  [album id=x template=compact].
  6. Go to the gallery management page, select the gallery you want to link and in the gallery settings page find the dropdown option ‘Create new page’. Here you need to select the 2nd level item (in our example 2011 or 2010) and hit the ‘Add page’ button. This will create a new page at the 3rd level with the year as its parent.
Our objective has now been achieved, but it was quite a tough thing to do. Here is our final result with multi level gallery structure and working breadcrumbs (using Yoast Breadcrumbs):
nextgen-option2c

Option 3

Create your own thumbnails manually and link them to pages containing those albums. So in the screenshot shown earlier in the post (the one with years) the yearly thumbnails would be manually linked to pages ‘2011’, ‘2010’ etc. Within each of those pages you can then use the shortcode:

[php]
[album id=1 template=compact]
[/php]

Custom Templates

You can create custom templates for displaying your galleries in the site, overriding the default nextgen display.

Custom templates are PHP files that can be stored in the folder nggallery, inside your theme directory. NextGEN gallery will always look into this folder for a template file. For example, if you are using the default WordPress theme then you can store a template file at :

/wp-content/themes/default/nggallery/gallery-sample1.php

To use now this template in a post or page you insert the tag:

[ nggallery id=1 template=sample1 ]

This tells NextGEN Gallery to use ‘gallery-sample1.php’ to show the gallery output. Without this template tag, NextGEN takes the default template (gallery.php) from the plugin folder (unless you copy it to your theme folder), normally located at :

/wp-content/plugins/nextgen-gallery/view/gallery.php

The same you can use for album, singlepic or imagebrowser, all of them are template driver so that you can easily modify the output without having problems during a upgrade.

Extra Functionality

There are also a few other plugins that add functionality to the base NextGen Gallery plugin, such as implementing flash effects.

NextGEN Gallery Search – Adds search functionality so you can quickly find your gallery.

NextGEN Smooth Gallery – Adds the Smooth Gallery (JS) display functionality.

NextGEN Public Uploader – Allows users to upload images.

Conclusion

Do you also use NextGen Gallery? How do you think it could be improved? Maybe you prefer another gallery plugin? Let us know!

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

Jean Galea

Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Discover more from our archives ↓

Popular articles ↓

8 Responses

  1. Hi there, newbie to WordPress, but having fun (sometimes) trying to design my first site (using Techozoic theme). I installed the Gallery plugin Nextgen and created one album with four galleries linked to a Gallery page. The Gallery page has the album inserted in extended format and the galleries show beautifully on the page with their titles, images and descriptions. Clicking on either the title or image takes me to the appropriate gallery page where the images show up very prettily. However, when in one of these gallery pages, I click on a thumbnail, it displays the photograph on the page – very nice. But in the other three gallery pages, clicking on the thumbnail only displays the file name, not the image. The same happens under the Manage Gallery option. I cannot see what I did differently in these three galleries and why their thumbnails are not working correctly. The pictures are all 300×225 px and they are all in the correct wp-content appropriate gallery folder. I’m afraid I’m working on my local machine so cannot direct you to the site. Any suggestions? Much appreciated.

  2. Hi I found your post via search ‘nextgen plugin 3 levels’. i think i want a similar thing for my site, (still using 12 year old image database imageAXS)
    tomrossgallery.com opening page has 1 thumb for every artist, then all the thumbs for each artist, then a large image with description, with links back to home and the prior screen. Care to take a look and see if you think it’s reasonably doable with nextgen? appreciate it

    1. Hey Don, haven’t used NextGen in a while, it’s since been taken over by Photocrati, why don’t you hit them up with this request, I’m sure they’ll help you find the best solution for your particular case.

  3. Hi Need your help.
    Just wondering if theirs a way to filter the album by user?
    The album will display depending on the user.
    Thanks

  4. Hi, just wondering if theirs a way to filter the album by user?
    The album will display depending on the user.
    Thanks

  5. A very valid point Pieter. I think this can be solved by writing a function for condtional loading of the nextgen files.

  6. The only thing that I really dislike is the overall performance of the plugin. It slows down the site way to much. The plugin is loaded on every page when being in use. With Nextgen, you’ll have extra .js, .css files loading… When trying to limit the number of server connections, it’s easy which plugin to ditch first.

    Too bad there is no good alternative for Nextgen…

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.