Guide to NextGEN Gallery Plugin: Album and Gallery
Please note: The following was written for NextGen version 0.99.1 and Wordpress 2.6.3. Depending on your version of NextGen and/or Wordpress, there may be slight to significant variances.
I have noticed that there’s a lack of clear documentation for the NextGEN photo gallery plugin for Wordpress. The programmer doesn’t have time to write anything clear in English, especially when English is not his native language.
After seeing a lot of hits to this site for my earlier post about a NextGEN random image tweak, I figured it would be helpful to write a quick guide about how to set up a Photo Album page and add galleries and photos using the NextGEN plugin.
First, you have to download, extract and upload the NextGEN files to your Wordpress plugins directory. Second, activate this plugin.
Now, in order to use the plugin, you need to understand how it is organized. In NextGEN, an “album” is a container for a “gallery.” An album can contain one or more galleries.
A gallery is a container for your photos. For most people, you would only need to create one album. You’ll probably create a lot of different galleries and put it in that album. Maybe if you have a site that has different sections or authors, you might create multiple albums such as “Kelly’s Photos,” “Mike’s Photos,” “Holly’s Photos,” etc., but for most people, one album is enough.
So after activating your plugin, you’ll want to create your album. You should have a new option in your main admin menu (after Write, Manage, Design, Comments, etc.) called Gallery. This is where you go to set up and manage your NextGEN plugin.
Go there, click on “Album” and add a new album. Click update. If this is the first album you’ve created, your album ID is 1. If not, you can get your album ID by selecting it from the dropdown. The page will update to show your album ID.
Now, create a new Wordpress page that will display this album. Call this page something like “Photos” or “Album.” Depending on your Wordpress theme, it should show up in your navigation or where ever your page listings show up. I called mine “Photo Gallery” though this is the opposite of how NextGEN is organized (in my head, a gallery should be a collection of albums, but NextGEN has it the other way around with an album being a collection of galleries, anyway…)
In the HTML editor for this new page put [album=#,compact] OR [album=#,extended]. Of course, replace # with the actual number that corresponds to your album ID. The difference between the compact style or the extended style can be seen here. Ignore the code they give you on that page; it seems to be for an earlier version of the plugin. My main photos page uses the compact style.
Once you have created this Album page, it’s time to put some photo sets, aka galleries, into it. Go back to the NextGEN administration menu and click on “Add Gallery.” Give a name for your gallery and click Add gallery. The name doesn’t have to be anything fancy because you can control the actual name people will see later. You can’t put any space in the name, but if you do they will be turned into hyphens.
After you’ve added the gallery, you get 3 options on how to add pictures to the gallery. The “Upload a Zip-File” option has been buggy for me, and the “Upload Images” option takes too long. What I like to do is upload the photos I want using FTP. After you gave the gallery a name, a new folder was automatically created for it on your server. Connect using your FTP program and upload your photos into wp-content/gallery/your-new-gallery-name/ (ignore the thumbs folder). Then click the “Import Image Folder” option in the NextGEN administration. Make sure to update the page with the name of your new gallery followed by a trailing forward slash (/) so it looks like wp-content/gallery/your-new-gallery-name/ and you can leave the box checked or unchecked depending on whether or not you want to import the details about when the photo was taken, lighting conditions, camera model, etc.
Once you’ve imported your photos, click on “Manage Gallery.” Under the Action column, click on “Edit” for the gallery you just created. Here, you can give a name and description for your gallery. The name is what your site visitors will see, and if you had chosen the extended style, they will also see the description.
Then for the “Create New Page” dropdown select the name of your Wordpress Album page that you created earlier and click on “Add page.” What this will do is automatically create a child page under your Album page containing this gallery. If for some reason you don’t want this gallery to be a child of your Album page, you can create it as a child of any of your other existing pages or have it be a main page on its own.
Once you click “Add page,” the “Page Link to” will automatically update. The other thing you want to do here is select a “Preview image” which will be your gallery cover. Don’t forget to click “Save Changes” if you do so.
Optionally, you can give each photo a description (will show up as a “caption” for each photo), title and alt text, and tags. Again, don’t forget to click “Save Changes.”
The final step is to have this new gallery you just created, full with photos, to show up on your Wordpress Album page (you may not always want this if you want to keep this gallery hidden or have it manually show up somewhere else). In the NextGEN administration area, click on “Album” and select your album from the dropdown. Once you do so, you can drag and drop your gallery from the right into the album on the left. Click “Update” once you are done. Now this gallery will show up on your Album page. Visit your Wordpress Album page to see the changes.
If you want to display a gallery within a post, simply get the gallery ID of that gallery (visible on the Manage Gallery page in the administration area) and add the code
-
- NextGEN Plugin Structure
-
- NextGEN Plugin Structure
Coming soon, I’ll write something about displaying a small gallery of random or recent photos from our NextGEN in your sidebar or anywhere else in your Wordpress theme.
Here’s a diagram of the basic NextGEN structure:
Next: Los Angeles Metro Subway System Goes Late Night
Other resources:
Stay updated! Sign up for email alerts whenever a new entry is posted
Add this blog feed to your reader »
Quick Guide to NextGEN Gallery Common Codes- NextGen Gallery: Random Photos from a Specific Gallery
- Learned on November 17, 2008
Latest Tweets
November 23rd, 2008 at 1:41 am
[...] Update: I wrote a guide to creating albums and galleries in NextGEN. [...]
November 25th, 2008 at 12:56 pm
Many thanks for your effort ! I real appreciate it and will link to your page in my plugin…
January 2nd, 2009 at 10:23 pm
Thanks! But i am trying to discover how to display all the images in an album at the same time. You wouldn’t happen to know that, would you ?
January 5th, 2009 at 2:53 am
@Justin
By album, you mean gallery right? In NextGen, an album is a container for galleries, not images, so I think you mean display all images in a gallery at the same time - confusing, I know.
You can set this in the OPTIONS for the plugin for NUMBER OF IMAGES PER PAGE, put in 0 per the instructions there.
January 5th, 2009 at 3:05 am
@Vuthy
Actually, I wanted to display all the images in an album, so that galleries would serve to organize the images. I’ve just gone about writing a custom script that pulls images from the wp_ngg_pictures table in my wordpress database and displaying the images by myself.
Thanks for the response, though!
January 5th, 2009 at 9:14 am
@Justin
Glad you figured it out! That sounds like a great idea to be able to browse all photos at once. I might have to play around with that myself.
January 10th, 2009 at 2:28 am
Nice, useful, simple explanation. Thank you for your efforts.
Now, have you written that article on inserting either a gallery or album into sidebar manually? I’m hard-coding my side-bar. In fact what I’d really like to do is have a text link to my galleries, as in the sidebar here:
http://www.followtheboat.com/index.php?page_id=89
January 10th, 2009 at 1:03 pm
@demonboy
Thanks, I hope you found something that helped you a bit.
My entry about inserting the random or recent images manually into your sidebar is here:
http://www.vuthy.com/blog/2008/11/16/nextgen-gallery-random-photos-from-a-specific-gallery/
I looked at the link you sent, and I’m not quite sure what you mean. I see text links to specific images, but not galleries.
The only thing I can figure is, if you want to automatically create links in your sidebar to your different galleries, is to look at the way Wordpress handles pages and subpages (children). Since NextGen creates pages for each gallery, you can mess around with displaying in your sidebar pages that all share the same parent (your main album page). I’m pretty sure that Wordpress’s list pages tag has parameters where you can include or exclude certain pages based on specific criteria.
http://codex.wordpress.org/Template_Tags/wp_list_pages
January 11th, 2009 at 3:53 am
Thanks for getting back to me. I think since posting that last comment I have my code back up and running using Lightbox 2.0 (hard-coded, not a plug-in), which should now give you a better idea of what I’m after. Please let me know if it is still not displaying correctly but what you should now see is, under The Best of the Best, a list of gallery links (People and Places, Animals etc etc). When you click on one of these links the Lightbox gallery is launched and you can scroll through each image within that gallery, with the latest image first (controlled manually by me inserting the link to the latest image at the top of my include page).
In order to get this working I had to disable some other JS, which is a shame, but the gallery is more important.
I did see your other essay on sidebar insertion (again, nicely written) but from what I can see that code doesn’t give me the flexibility of doing what I need: text link, latest image first, each gallery a separate link.
Please do let me know if my gallery page is still not displaying as I’ve described - it’s working this end!
January 13th, 2009 at 1:30 pm
@demonboy
It works now! I see what you mean and it looks good. I know what you mean about different JS interfering with each other. I had a few plugins that refused to play nicely so I had to disable things I really wanted. Just haven’t had the time, energy, or even knowledge to go in and figure it all out.
So now that I understand your original question, I guess you want to automatically do what you are hardcoding now. The only thing that I can think of is that you have to change what [album=#] brings up and instead of putting that album call tag in a page you put it in your sidebar, but then the [gallery=#] in that album would also need to change to open a lightbox instead of going to the gallery’s page. It’s a lot of coding! I think what you’re doing now, though tedious, looks good.
February 5th, 2009 at 11:18 am
For the most part the plugin works and looks great. With one exception. No matter what I do I get an error about the nggProgressBar on line 190 being null when I try to create thumbnails of existing pictures. I can see the gallery directory is there and the fullsize pictures are in the gallery directory. The thumbs directory with in the gallery is there but no files show up in it - ever. Has anyone else seen this problem? I’m running WP2.7 with NGG v1.1.0. If I click on a picture in the gallery it pulls up the full sized image no problem. I also noticed the cute little gear in the menu for NGG isn’t showing up.
Eric Downey recently blogged about: February 2009 Game Night
February 16th, 2009 at 4:02 am
I´m really interested also in how to display all the images on an album page. Please Justin, if you have the knowledge would you be so kind to pass it on. I´ve done tons of google searching but couldnt find any help anywhere… Thank you!!
February 24th, 2009 at 11:49 am
I’m unable to get Galleries to stay in the Albums. After clicking the [UPDATE] button the Gallery moves back to the right column.
Any suggestions?
March 13th, 2009 at 11:13 pm
Just an FYI since I was wracking my brain for a couple hours on this one…
If your album is not linking to the gallery pages you created but instead displaying your gallery on your album page you need to uncheck the “Deactivate gallery page link:” under “options” > “gallery”
Seems obvious but it took me some searching to figure out.
May 16th, 2009 at 9:14 pm
Quick Question…If I would like to enter a long name for a photo under “Alt & Title Text” in “Manage Gallery,” do you happen to know how I would do it? I have some photo IDs for photos that are several names and they get cut off. It would be great if there’s a way for the photo IDs to spill over into 2 lines instead of just one. THANKS for your input!
Krista M. recently blogged about: May 12, 2009 - Wellington Regional’s Blessing of the Hands
June 9th, 2009 at 9:15 am
Quick question: Do you know the PHP code that can display the most recent galleries?
You have helped me out a bunch with development! Thank you!
June 10th, 2009 at 2:10 pm
@Marin
It’s the last one displayed here by the developer:
http://nextgen.boelinger.com/2007/05/24/new-widget-support/
June 10th, 2009 at 2:12 pm
Also, I know a lot of you have questions but I’m no expert on this. I only was able to figure out what I blogged about because it was something I needed to do for myself. Make sure you check out the developer’s website; it’s very helpful! (Linked to in my last comment above ^^^)
June 25th, 2009 at 11:16 am
Aloha Vuthy ~
I love the work you have done here. I have just added the NextGen Gallery and thickbox plugins to my blog - it took me two days to figure out why thickbox wouldn’t work for me and finally went to a web developer (my son) to learn that my theme (Dipdolt White) didn’t have the call line in the footer to make it all happen!
Today I created the new page and ‘album’ you guided us through in this post - which is great. BUT here is my problem - there is a huge gap at the top of the page when I open the “Photo Gallery” page. I deleted the -clear:both; - line in the nggallery.css which got rid of a lot of it, but there is still a large gap. I am thinking wordpress has a’storycontent’ div it places above it the code for inserting the album.
How can I edit this individual page to delete that div? Where do I find it? In the wp-admin files?
I would sincerely appreciate your help and guidance in this. I also love your random gallery in the sidebar. Already tried adding this widget from nextgen, but apparently my theme doesn’t have sidebar support - I will have to work on that, but for now I am just trying to get a cohesive look and get up and running!
Thanks for any advice ~ Diane
June 25th, 2009 at 12:14 pm
Hi Diane,
That sounds like a tough one. I took a quick look at your site and my first guess (based on past experiences) is that your div for each album (aka gallery in NextGen) is too wide for the main column. If you look, the empty gap only exists until the bottom of your sidebar; the listing for your album only starts when your sidebar ends so that the main column can stretch (it couldn’t stretch into the sidebar therefore causing the gap).
If you could hide some sidebar elements or temporarily delete items to shorten the sidebar and see if the gap gets shorter (because the sidebar got shorter) this would confirm it! If so, the solution would be to shrink width for the divs for your album listings.
This is my first and best guess. Let me know if you need more clarification and how it goes! Best of luck.
June 25th, 2009 at 7:36 pm
Thank you Thank you thank you for getting back to me - I really appreciate your attention to this.
First - you were right about shrinking the sidebar - that moved the galleries up on the page.
Second - since CSS and html are not my forte, I have a tendency to mess things up, so I have learned to create backups more often. I did mess up somewhere after your reply and ended up reloading the nextGen plugin, meaning I had to redo the nggallery.css and rebuild everything.
Long story short - seems when I thought I had deleted the ‘clear:both;’ line from the .ngg-albumoverview, the replacement didn’t get transferred by my ftp! So once every thing got reloaded - it all worked out great! Now there is no gap at the top of the galleries inside the album!
You are most kind to look at things, reply, and offer a solution. Thank you again ~ Diane
Diane Lundgren recently blogged about: Fire in your eyes – part 2
July 2nd, 2009 at 11:30 am
Hi
I’m wondering if someone knows how to only display on album on a page and not have nextgen display the galleries contained in the album - at least not until the album is clicked opening up a new page with showing the galleries contained in the album. I should be able to do this since there is a way to assign a default thumbnail to show with an album.
Right now, on my site, when I paste album short code onto a page I see the galleries contained in that album, not the album. This doesn’t help me if, for instance, I have an album with two sub-albums contained in it, each of which may have several galleries. This should be really simple to do, but I can not seem to figure it out. I hope that this is not a feature that is currently not included in the plugin. Thanks for your help.
Phil
phil barnes recently blogged about: 24 Hours of Matanuska
July 3rd, 2009 at 4:16 pm
Hi,
Does any one know how to use multiple albums?
Whenever I create an album and display it on a page, all the galleries are getting displayed.
I want to display few galleries in one album and others in 2 more albums….any ideas…
Thanks in advance.
Puneet
Puneet recently blogged about: India Story: The First Note
July 16th, 2009 at 2:01 am
Hi,
Perhaps you can help me with this one. I have a gallery with a number of pictures in it. In a post, I want to show two pictures in the first part (above the wp TAG. Below this tag, after some text, I want to show the entire gallery.
This way the main front page (showing all my posts) looks good and only shows two pictures. The rest only shows when a reader wants to.
So basiclly, how could I do this? texclude pictures from a extended gallery view?
July 20th, 2009 at 6:55 am
I have a project that needs a caption below the gallery pic that links to a page. Has anyone been able to do this? I’ve looked at many forums with little help.
Thanks
October 21st, 2009 at 3:28 pm
Hi,
I’ve been trying without success to add a gallery to an album.
First of all: would someone please tell/show me how you link a page to an album. All I’ve seen are places to name the album, description, and album image. Nowhere does it give me an option to link to a page.
But my main question is: what’s supposed to happen when I drag and drop a gallery onto an album while I’m on the “Album” page? I select an album. The page updates automatically, and shows the album name to the left of the list of galleries. I drag an gallery from the “Select Gallery” column, so that it’ directly over the album name in the “Select Album” column. I release the mouse button, and… all that happens is the gallery name zips back to where it was. There is no indication that any linkage has taken place between the album and the gallery. What is supposed to happen?
When I add the album to a page 9which already exists), nothing appears when I reload the page.
I’m missing something in here, but what is it??
Please help.
Regards,
Jan Smith
October 21st, 2009 at 5:21 pm
Hi Jan,
I don’t have time to fully investigate your issue, but I think I covered all your questions in my original entry.
Regarding where to select the page to link to:
“Once you’ve imported your photos, click on “Manage Gallery.” Under the Action column, click on “Edit” for the gallery you just created. Here, you can give a name and description for your gallery. The name is what your site visitors will see, and if you had chosen the extended style, they will also see the description.
Then for the “Create New Page” dropdown select the name of your Wordpress Album page that you created earlier and click on “Add page.” What this will do is automatically create a child page under your Album page containing this gallery. If for some reason you don’t want this gallery to be a child of your Album page, you can create it as a child of any of your other existing pages or have it be a main page on its own.”
As for the drag and drop functionality, you need to make sure you click UPDATE after of nothing will go into effect.
Hope this helps some!
October 21st, 2009 at 9:03 pm
Thanks so much for your reply.
All the pages I need are already there. I really just need to get the album onto a page. I can use the icon on the edit toolbar to add the album within the square brackets like this:
[album id=1 template=extend]
Supposedly, album 1 exists, but there’s nothing in it. That’s because after I select an album, then drag and drop a gallery onto it, then click the Update button… nothing happens. Nothing changes visually. I have no idea what I’m supposed to see happen, but obviously the album is still empty.
jan
November 15th, 2009 at 8:20 am
[...] Guide to the NextGen Gallery – One of the most important plugins I use on the Second Impulse website is the NextGen gallery. Across the bottom of every page are random thumbnails which when clicked pop up lightboxed photos of the band. Vuthy’s tips helped me quite a lot in making it all work how I wanted it to. [...]
December 31st, 2009 at 5:28 pm
[...] Vuthy.com: Guide to Using NextGen’s Albums and Galleries [...]
January 9th, 2010 at 11:55 am
[...] Lösung fand sich hier, auf deutsch ganz kurz: der Code, der auf der Plugin-Seite beschrieben wird und der auch durch den [...]
January 17th, 2010 at 7:56 pm
Hey,
Nice post here. I know it helped me make sense of a couple of things that I could not figure out.
One thing though. I’ve done the ,compact thing that you suggested, but I’ve got three in my album now and they are in the wrong order.
Do you know if there is a way to change the order so the most recent album comes first?
Also, how many galleries will show up? Will it just go forever down my page or will it finally create a new page or something?
Thanks again!
January 17th, 2010 at 9:43 pm
@Mike
“I’ve got three in my album now and they are in the wrong order?”
Are you talking about pictures in galleries are showing up in the wrong order or about galleries on your album page showing up in the wrong order?
If it’s the latter, you arrange the order of galleries via the Gallery > Album menu in your backend. Select the Album you’re trying to rearrange from the drop-down menu (you may only have one album) and then drag, drop and order the galleries in that album as you see fit.
I don’t know if there’s a way to automatically have it arranged by most recently created.
I also don’t know if pagination for the album page (gallery listing) is possible. It seems to be infinite for me. Off the top of my head, the only work around I can think of is to create a second album/album page, add galleries to those, and include a manual link between the pages.
Hope this helps!
January 18th, 2010 at 11:27 am
[...] about Highslide, NextGEN and WordPress integration. And another one explaining how to create Albums in the NextGen Gallery. Thank you all !!! As I am totally new to all this things I would not [...]
January 23rd, 2010 at 1:49 pm
This is a GREAT resource for anyone who is using NextGEN Gallery. I wish the plugin itself came with directions this good, instead of having to dig it up via Google.
January 29th, 2010 at 1:14 am
Vuthy, what a great resource! I’ll be bookmarking this for future reference.
Do you know what steps are involved in putting a gallery directly into a template file? I’ve tried the method described here:
http://wordpress.org/support/topic/261872?replies=7
When I insert the do_shortcode php file into my template file, it returns nothing when I go to my website. Is there some code that needs to be placed in the functions.php file to make this shortcode work? I’d really appreciate your feedback!
Once again, thanks for your hard work! It’s people like you who make great resources for NextGEN invaluable to people like me!
January 29th, 2010 at 2:59 am
Ah, you can delete these comments if you want. I replied to that thread with the answer. It was a confusing answer why one method didn’t work and the other did.