Using NextGen Gallery, the Best WordPress Gallery Plugin

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

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:

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.

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:

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 <strong>template=sample1</strong> ]

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.

About Jean Galea

Jean Galea is a WordPress developer, entrepreneur and padel player. He is the founder of WP Mayor, the plugins WP RSS Aggregator and EDD Bookings, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Related Articles

  • Showcase: A Gallery WordPress Plugin

    Showcase is an easy-to-use gallery WordPress plugin that has very nice features for showcasing your creative work. Preview this video to find out more.

  • Would you like to import images from your Flickr account into your blog? That's easy with the plugins we review today.

  • In the wide world of galleries, one new plugin stands out for its originality - Circles WordPress Gallery. What are the key features of this plugin, and why is it different…

8 Responses

  1. Pieter Carette - SiteOptimo
    Pieter Carette - SiteOptimo December 1, 2011 at 17:31 | | Reply

    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…

  2. Cecil
    Cecil May 23, 2012 at 01:57 | | Reply

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

  3. Cecil
    Cecil May 23, 2012 at 01:58 | | Reply

    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. Don Dean
    Don Dean September 24, 2012 at 20:38 | | Reply

    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

  5. Helen Sherriff
    Helen Sherriff October 19, 2012 at 09:13 | | Reply

    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.

  6. Rahul Yadav
    Rahul Yadav February 24, 2016 at 20:51 | | Reply

    Nice plugin
    This will helps me to improve my blog.
    Thanks for sharing

Leave a Reply