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.
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:
- A single picture
Using the shortcode [singlepic id=x] - The contents of one or more galleries
This is done via the shortcode [nggallery id=x] - The galleries within an album
Via the shortcodeΒ [album id=xΒ template=extend]Β OR [ album id=xΒ template=compact]\
So our main page should ideally only have a thumbnail image for each year, for example arranged in a grid layout:
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).
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)
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.
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:
- Create a page named ‘Gallery’. This will be the main page for your photos/pictures on the site.
- 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.
- Create a page for each year (2011, 2010 etc.) setting ‘Gallery’ as their parent.
- For each album go to the edit screen and select the page you just created for the ‘Page Link to’ option.
- Go to the year page e.g. 2011 and insert the shortcode for that year’s albumΒ Β [album id=x template=compact].
- 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.
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.
8 Responses
Nice plugin
This will helps me to improve my blog.
Thanks for sharing
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.
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
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.
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
Hi, just wondering if theirs a way to filter the album by user?
The album will display depending on the user.
Thanks
A very valid point Pieter. I think this can be solved by writing a function for condtional loading of the nextgen files.
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…