May 13th, 2008 at 9:37 pm by David Potter

NextGEN Gallery Review - Displaying Images

Once you’ve created a gallery, added images to it, and added the gallery to an album, you’re ready to display them on your site.  Of course, you don’t have to go through all those steps just to display images as there are several ways to display them.

The plugin uses shortcodes - also known as keywords or tags - in pages and posts to display images.  NextGEN Gallery shortcodes are specified as a word enclosed in square brackets - [ and ] - followed by parameters describing what and how to display the images.  Note that the shortcodes are formatted differently than shortcodes in WordPress 2.5.

The documentation on Alex’s web site is pretty good, but there are a few things that aren’t described in full detail.  I’ll try to include the tidbits I’ve learned here, and the title for each section is also a link to Alex’s page on that particular shortcode.

These shortcodes are built in to the NextGEN Gallery plugin:

  • singlepic - Display a single image with options for displaying a reflection, a watermark, and for placing the image horizontally on the post/page.
  • gallery - Display the images in a gallery.
  • imagebrowser - Display the images in a gallery one at a time.
  • slideshow - Display the images in a gallery one at a time with automatic advance.
  • album - Display multiple galleries in a list.
  • tags - Display images which have been tagged with specific tag values.
  • albumtags - Display images in album format which have been tagged with specific tag values.

A number of others have provided additional shortcodes for viewing images.

  • polaroid - Display images from a gallery as a stack of polaroid images.
  • simpleviewer - Displays images from a gallery in a viewer from Airtight Interactive that shows thumbnails of the other images in the gallery below the image being displayed.
  • tiltviewer - Displays images from a gallery in a viewer from Airtight Interactive that displays thumbnails tilted allowing zooming and flipping.

You will find more details on each shortcode in a separate article for each one (coming soon).

20 Comments

  1. Wayne Lutz · May 29th, 2008 at 11:54 am #

    Ok, I truly appreciate this series of articles, they are extremely well thought–out, but - and forgive my ignorance - I still cannot figure out where to put the tags to make the images show up. I have the plugin installed and activated. In the release I downloaded the .swf file was already inside and is uploaded. I have the widgets activated in the side bar - gallery and slideshow. I have an album with a gallery inside of it which contains three images. Gallery ID is 2. Where do I put the tag [gallery=2]? In the html of a new page? That didn’t work for me. And how do I make the sidebar widgets link to any page I might create? I know, I’m missing something simple but I’ve spent two days on it now.

  2. David Potter · May 29th, 2008 at 12:37 pm #

    @Wayne: To clarify, are you adding the gallery shortcode to your page/post content or to your page template PHP file? The only place it will work is in the page/post content, not in the PHP file.

    As for the sidebar widget, you don’t specify a page, you specify a gallery. You can also have it display all images. To specify what to display, click on the “Configure” link for the entry on the Widgets admin page.

  3. Wayne Lutz · May 30th, 2008 at 12:01 pm #

    I had tried manually adding the tags to the page/post content but for whatever reason that didn’t work. But as usual I was trying to over complicate it. After I wrote the above, I saw that there is an “add gallery” button on the post/page write page. It worked. Duh.

    I’ll try the widget config and let you know what happened. Thanks.

  4. Wayne Lutz · May 30th, 2008 at 1:02 pm #

    Ok, there is no “configure” link on the admin widgets page. On the admin page, I go to the “design” tab. From there, click on the “widgets” link. Then add the “gallery” and “slideshow” widgets to the sidebar. In the sidebar on the front page of the website, the titles, i.e. “slideshow” and “gallery” shows up, but nothing under it. Back to the admin page, there is an “edit” link for the added widget. I add the gallery ID to the gallery widget edit box and save changes, still nothing shows up on the sidebar. It does not specify whether to just add the id number itself, such as “2″ for example, or the entire tag inside of brackets. But I try both and nothing happens. Still just the titles on the sidebar. And for the “slideshow” edit options, there is no place to enter an ID tag anyway on the admin edit page.

    I wouldn’t obsess about this, but my website relies heavily on photographs and I was all excited about not having to send people to Webshots to view albums related to my site.

    If you can tell me what I need to do, I’ll buy you a beer.

  5. Beth · June 5th, 2008 at 7:28 am #

    Is it possible to create get a simple list of all tags used through all the galleries?

  6. Michael Grist · June 16th, 2008 at 5:07 pm #

    Hi- I can get the Next Gen widget working in the sidebar, but I can’t get the title to link to the gallery itself. So the sidebar widget is a dead-end, it’s a little bit of eye-candy but doesn’t provide any way for people to click through to the full gallery. I must be missing something simple as I don’t believe the programmer left out such a link.

    Help please!

    Mike.

  7. Kriszta · June 30th, 2008 at 5:35 pm #

    David, is possible to show individual NextGen galleries on the posts and pages of multiple wordpress.org sites?

    I want to install a Hungarian site on a subpage of the English one, and it would be great not having to upload all picture twice. I don’t mind not being able to use the shortcodes, if there is another way of coding that works.

  8. David Potter · June 30th, 2008 at 9:14 pm #

    @Kriszta - There isn’t a way within NextGEN, but there is a way with WordPress :-) What I do is host multiple sites on the same set of WordPress files using a multi-blogging solution, which you can check out here:

    Multi-blogging
    Multi-Blogging Update

    Once you’ve done that, all sites hosted that way have access to the same directory structure, so you can point NextGEN for both sites to the same directory containing images.

  9. Krisztina Palhegyi · July 1st, 2008 at 5:39 am #

    David,
    the idea sounds very good, I already checked those pages of yours. But since I am just a talented beginner, I did not get but a fraction of the description. So I was intimidated. I have already worked hard on the English site (realestate.hunreal.com) I want to create the Hungarian version of, and can’t afford to loose it or mess it up. I don’t suppose you would want to set it up on my wordpress installation, but if you would, pls sms me; I would definitely give it a try. Blessings, Kriszta

  10. Beth · July 1st, 2008 at 11:01 am #

    Hmmm, what about my question? Is creating a tag list possible?

  11. David Potter · July 1st, 2008 at 11:44 am #

    @Krisztina - I could probably help you with that. I’ll send you private email so we can communicate securely.

    @Beth - Oh, right. Sorry about that. I don’t know any way without writing some PHP code. You might ask up on Alex’s forum. He might have an idea.

    @Michael - I haven’t done much with the sidebar widget. If I get a chance I’ll take a look and see what I can find.

    @Wayne - It looks like I need to provide some screenshots to illustrate this better. :-) I’ll see what I can do.

  12. Nick Ogbourne · July 4th, 2008 at 12:10 am #

    H David
    Just started with NextGen - top stuff. I think my problem is the same as Michael. when I click on the slide show in the side bar I want it to open the main window. I guess one could ‘hard code’ a link - the link pointer (hand) appears but that only seems to move to the next image.

    Any ideas appreciated. Thanks for the doc!

    Regards

    Nick

  13. Igor · July 8th, 2008 at 7:40 am #

    Ok, wp-noob question: i read the post by Wayne Lutz, but it didn’t answered my question. How to add the short codes to a new page? By just pasting for example [ singlepic=1,400,300 ] and viewing this page, will just show me [ singlepic=1,400,300 ], and nothing more. What is the trick? I coudn’t find the option add gallery at the new-page-writing-section.

    Second of all, can you give me a suggestion. I’m making this site of a friend of my, which has (at this moment) 4 gallery’s. I want a page (called photo’s) which show 4 thumbs of the gallery’s, and by clicking on one of them, you’ll see a thumb-page with the photo’s in that gallery. Do I have to make all those different pages? Or what would you suggest?

    Cheers!

  14. David Potter · July 8th, 2008 at 9:20 pm #

    @Igor - Originally I added an extra space in the shortcode to avoid having the NextGEN plugin try to interpret it. Based on what you typed in your comment, it looks like you’re including those extra spaces. If you remove those spaces you should get the results you want.

    By the way, all the pages should be fixed now so that they appear correctly. Sorry for the confusion.

  15. Bill · July 10th, 2008 at 8:08 am #

    Hi

    I am having some issues with a WP plug-in called Nex Gen Gallery Review that you wrote about here. I am not highly tech savvy. I did manage to upload the plug in and JW Image Rotator. I also successfully created three galleries and have over 150 images in them. I created in the galleries in pages to be located on my sidebar.

    I am able to choose between gallery or slideshow using the [slideshow=1], [gallery=4] type things (maybe called shortcodes) and actually use both on the gallery pages.

    I also am able to add to the footer of my main page (the page I make posts on and the one you see if you go to the site) using this player:

    This div will be replaced

    var s1 = new SWFObject(’http://www.jeroenwijering.com/embed/player.swf’,'player’,'470′,’350′,’9′,’#ffffff’);
    s1.addParam(’allowfullscreen’,'true’);
    s1.addParam(’allowscriptaccess’,'always’);
    s1.addParam(’wmode’,'opaque’);
    s1.addParam(’flashvars’,'file=/upload/bunny.vp6&skin=http://skins.longtailvideo.com/kleur.swf&’);
    s1.write(’preview’);

    It appears and the sample movie of a big rabbit plays.

    My problem is this:

    I would like to have the player on my main page display images from the galleries, or maybe even play videos from online. I have done everything I can think of and that I think I have read on your site, but my knowledge of this stuff is low, though I managed to get this far alone.

    What can I do? Is there some line of code I change? Is there someway I “link” the URL of the gallery page to the player and make it display images? When I try things that worked in the page galleries there it disappears and shows text only, “[slideshow=4]” or something. In the page gallery I only need to enter the “shortcode” and the changes takes place, but that will not work on my main page. I like the player and the gallery, but I would like to play it out front also. It does the same thing in the side bar (which I prefer not to use for this).

    Is there some simple thing I am over looking?

    Bill

  16. Bill · July 10th, 2008 at 8:17 am #

    I am sorry, here is the complete code for the player. I am using this in my footer,not sidebar, as I the player in the side bar is too small to see really. Is this compatible? I got it from linking from Alex’s site.

    This div will be replaced

    var s1 = new SWFObject(’http://www.jeroenwijering.com/embed/player.swf’,'player’,'470′,’320′,’9′,’#ffffff’);
    s1.addParam(’allowfullscreen’,'true’);
    s1.addParam(’allowscriptaccess’,'always’);
    s1.addParam(’wmode’,'opaque’);
    s1.addParam(’flashvars’,'file=/upload/flash.flv&’);
    s1.write(’preview’);

  17. Bill · July 10th, 2008 at 8:33 am #

    I have sincr sort of solved the problem, not the way I had dreamed. I read some of the mail before me and a couple people had similar issues. I found the WP widget folder and dragged it into my sidebar (where the size was adjusted) and added the other widgets I needed and I seem okay for now. It plays images from my album, ALL galleries, which is fine for now.

    Thanks

  18. Paul · July 20th, 2008 at 2:30 am #

    Dave,

    Can you help me please :-)

    I’ve installed the software, created a gallery, added it to a page, but there is always a huge gap between the title of the page and any text I add to the page and the nexgen galleys etc below.

    See http://paulhayton.co.nz/blog/?page_id=30

    How can I remove the gap?

    Thanks Paul

  19. Lucky Dog » Announcement !! · August 5th, 2008 at 12:54 am #

    [...] NextGEN Gallery Review - Displaying Images [...]

  20. David Potter · August 12th, 2008 at 1:05 pm #

    @Bill - Glad you were able to solve your issue.

    @Paul - It looks like a style issue. I’d experiment with the styles on your theme, maybe try other themes to see if the problem goes away. If so, then it is probably a problem with the styles on your theme or the interaction of those styles with the ngg styles. Tracking something like this down usually requires access to the theme styles in addition to the content. Hope that helps.

Leave a Comment




XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>