Explore » Food & Cooking » | Shopping » | Health & Fitness » | Beauty »

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

to the HTML editor of the post.  For example, you can create a gallery of photos from a party, optionally have it show up on your Album page or not, and then write a post about the party and embed the gallery right in that post with the code.

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:

NextGEN Plugin Structure


Previous: Photos of Solotica Hidrocor Ocre on Black Eyes

Next: Los Angeles Metro Subway System Goes Late Night

Tags: , ,



Other resources:


  • Let's say I have 50 albums. Is there a way to display the main thumbnails for ALL albums in one single page.
  • I don't know why you have 50 albums. Do you mean galleries? Most people only need to make 1 album and put their galleries in there. The version of NextGen I use already displays all galleries in an album on single page. Not everybody wants this as you can see from Mike's comment down below but I haven't seen an option in my version of NextGen to change this.

    If you really mean 50 albums, not galleries, I don't know what to tell you because I don't use albums that way and I don't even have an album listing myself since I just have one.
  • Check it out: http://www.romaniangraffiti.ro/graffiti-gallery

    I have 9 albums - with around 200 galleries in total. I just put all 9 albums in one main album called (of course) "Albums" - it's id is 4. Then on "Graffiti Gallery" page creation i just used [album=4,compact] :D

    Now all I have to do is create pages and assign them to every gallery.
  • Ahh! I see what you mean now. It works in your case for organizing. Looks like you've figured it out by nesting albums. Looks good.
  • Phil
    Cheers for the great post, badly needed indeed!
  • dan
    hi! i have created some albums. on each album page i have a thumbnail and the title of the gallery. problem: i am working with a mac. my browser is safari. i want each gallery title that appears with the thumbnail to be white. it works on my mac but i have discovered the title appears blue on other browsers and other computers. how do i fix this? I tried adding font-color:#FFFFFF; in the style code under album title, also under ngg description. nothing works. what do i need to do. thanks!
  • Are they links? Link styles will override default font styles. I don't work on a Mac or use Safari but I think this is the first thing you should look at. Since you say it shows up blue and blue is the standard link color for most browsers, I'd investigate all your link styles in the CSS file for NextGen.
  • Micah
    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.
  • Micah
    Vuthy, what a great resource! I'll be bookmarking this for future reference. :o)

    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?repli...

    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!
  • rjholla2003
    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.
  • Vuthy
    @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!
  • 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!
  • 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
  • Vuthy
    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!
  • 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
  • Maria
    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
  • Robert
    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 <!--more--> 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?
  • 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

    <abbr>Puneet recently blogged about: India Story: The First Note</abbr>
  • 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

    <abbr>phil barnes recently blogged about: 24 Hours of Matanuska</abbr>
  • 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

    <abbr>Diane Lundgren recently blogged about: Fire in your eyes – part 2</abbr>
  • Vuthy
    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.
  • 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
  • Vuthy
    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 ^^^)
  • Vuthy
    @Marin

    It's the last one displayed here by the developer:

    http://nextgen.boelinger.com/2007/05/24/new-wid...
  • Marlin Caddell
    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!
  • 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! (H)

    <abbr>Krista M. recently blogged about: May 12, 2009 - Wellington Regional’s Blessing of the Hands</abbr>
  • 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.
  • C
    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?
  • juhana
    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!! :-)
  • 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.

    <abbr>Eric Downey recently blogged about: February 2009 Game Night</abbr>
  • Vuthy
    @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. :)
  • 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!
  • Vuthy
    @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-ga...

    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_lis...
  • 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
  • Vuthy
    @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. :-)
  • Justin
    @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!
  • Vuthy
    @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.
  • Justin
    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 ?
  • Many thanks for your effort ! I real appreciate it and will link to your page in my plugin...
blog comments powered by Disqus
Categories

EventCalendar:

November 2008
Sun Mon Tue Wed Thu Fri Sat
 1
2345678
9101112131415
16171819202122
23242526272829
30EC
    • No events.
Dugg:

Clicky Web Analytics