Posted on 18 June, 2009 By 69 Comments

Using WordPress Custom Fields to Display NextGen Gallery Slideshows Conditionally

 

SR 20 - Snow Slide (by Washington State Dept of Transportation)

When I was setting up up the NextGen Gallery plugin to manage my portfolio I decided I also wanted to display a slideshow of the images on certain pages. Since NextGen has a Slideshow feature built in (sort of but I’ll get to that) I assumed that this would be a piece of cake (and why is something that is easy called a piece of cake anyway?). But it wasn’t as simple as I though it would be. Fortunately, I found some awesome resources to help me out.

Let’s step back for a second though. NextGen DOES have a slideshow but not ALL of the functionality is built in.

  1. You also need to download the JW Image Rotator, which is not included with the plugin. The only file you need in the package is imagerotator.swf. This file needs to be uploaded in the main NextGen gallery plugin folder.
  2. Set the path to the imagerotator file under Gallery>Options>Slideshow>Path to the Imagerotator. Usually clicking the Search Now button will set the path for you.

Ok – so now the slideshow will work.

NextGen Gallery has shortcodes that can be used in posts and pages. So, if I wanted a slideshow on a post or a page I would use the following.

slideshow id=x w=width h=height surrounded by brackets [ ]

Shortcodes, as far as I know, do not work in the template files, such as the sidebar. Now NextGen does have a sidebar widget that can be used to display the Slideshow in the sidebar but I didn’t want the slideshow on every page – just certain pages. And if a widget can be conditionally displayed, I don’t know how to do it. Additionally, I am not aware of any functions that can be used in the sidebar with NextGen. Maybe there are and I just didn’t find them and I’m certainly not clever enough to write one of my own (yet ;-).

My “yeah I’ll just add the slideshow to certain pages” turned out to not be so simple. So, I did some google searches and came across this awesome article – Inserting a NextGen gallery or slideshow in a custom field. If you are interested in using custom fields to display Next Gen slideshows, galleries, or other features, you should definitely read the article. It truly is a treasure and I couldn’t have done this without that article. The code in the next section comes from it.

How it Works

  1. Add the following code to the sidebar or template file where you want the slideshow or gallery displayed.
    <?php $gallery = get_post_meta($post->ID, 'gallery', true); ?>
    <?php
    $gal = $gallery;
    $gal = apply_filters('the_content', $gal );
    echo $gal;
    ?>
    
  2. On the pages where you actually want the slideshow (or gallery) to show up, you will want to scroll down to the custom field section and add

    name field: gallery
    value field: slideshow=id#,width,height surrounded by brackets [ ]

    In mine I used

    slideshow=1,320,240

    If you want to display a gallery you would use

    gallery=ID# surrounded by brackets [ ]

  3. The first time you are going to add a custom field you will need to select the Add New button. After that the name will be available in the dropdown box.
    customfield1
  4. Now the slideshow will display on the sidebar of the page I filled out the custom field information on. I did this for each one of the pages. If you want a different slideshow or gallery to display, just fill that in on the value field. The same code in the sidebar or other template file will still work.
  5. An example if on my Services page.

I also wanted to use the title ‘Portfolio’ for the slideshow in the sidebar. Since the code for the slideshow is always on the sidebar and is only displayed if the custom field is filled out for that page, the title needed to be displayed conditionally otherwise it would show up on pages where there wasn’t a slideshow. I did this with the following and is just like the code on my How to Conditionally Display Sidebar Content with is_page article. This goes right before the code to display the custom fields.

if (is_page(array('pagename','pagename','pagename','pagename'))) { ;?>
  <ul>
  <li>
      <h2 class="classname">
        <?php _e('Portfolio'); ?>
       </h2>
<?php } ?>

So, adding the slideshow to the sidebar only on certain pages was more work than I anticipated but I learned a lot. And had some fun. Please do visit Scotproof’s article because the code came from her. She also has a whole category of articles about the NextGen Gallery plugin.

photo credit: Washington State Dept of Transportation




Keep Reading:
Posted In : WordPress Plugins | WordPress Tips

Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter. If you are looking for Hosting, WordPress Theme, Newsletter or other recommendations, please view my detailed list.




69 Responses to “Using WordPress Custom Fields to Display NextGen Gallery Slideshows Conditionally”


  • i’m not using the slide show yet, but i saved this post for future reference. i l like this plugin a lot. there are some glitches with the albums, but otherwise it’s very versatile

    Natural´s last blog post – Why Wait, Buy Now!


  • I’ve seen those on sites. Might give it a whirl sometime, get me out of my OldGen mindset.

    Jannie Funster´s last blog post – i winned! i winned!!


  • This is my first time here, Im happy I came across this article. I currently have a wordpress blog and use the NexGen plugin, I seem to always have issues displaying my pictures the way I really want to. I haven’t installed this yet but will be giving this a try very soon.

    Extreme John´s last blog post – My CommentLuv Project


  • FYI he updated this plug-in and it is working correctly, the albums don’t post double pics. finally!

    the slide show now is a widget, just a matter of dragging it over to the sidebar and customizing.
    .-= Natural´s last blog ..I am conductor, hear me cook =-.


    • Hi Valerie – I’m really glad the update fixed the problem. I haven’t updated my plugins recently and need to spend some time with that.

      I think the slideshow widget was there before. I didn’t use it because
      I only want the slideshow to appear on certain pages.


  • Hi Kim,

    Great website and explanation of the NextGEN slideshow!

    My needs are slightly different, and my php is non-existent…

    I’d like to insert a small slideshow on *every* inner-page – this means all posts (many) and pages (very few), other than the homepage. My theme (Advance Newspaper) has an “inner-page” “mid sidebar” that would be terrific for just that.

    Any suggestions on what’s the correct php code for this? I believe I know where to place it…

    Many Thanks!
    Jordan


    • Hi Jordan,

      You can put the code in #1 in the two templates that you mention. Place the code in the location where you want the slideshow to appear.Then on each post that has photos you want to include, make sure to fill in the custom fields as described in #2.


  • Kim,

    THANKS! I tried this a while ago and, of course, it works.

    But, I think, this is not quite what I have in mind. I wasn’t more specific because I didn’t want to limit your response, perhaps I should have been…

    1. I wanted the slideshow to run ‘automatically’ on all post pages, *within* the 275px-wide right-inner column. So, for example, when clicking on any of the post excerpts on the homepage, all post pages will open with the slideshow loading automatically at the top of the inner-right col.

    It would be nice not to have to add any code to all the post pages. I know there are plugins that can add code to post pages automatically, but I wouldn’t want the gallery or thumbnails showing on the post pages themselves.

    2. In addition, ideally, I would like to set it up that by clicking on the sideshow, or a link below it, it will open the images in a gallery page/thickbox.

    Sorry to burden you with all this info, but does this change your advice?

    Many Thanks!
    J


  • Kim,

    You might recall that we were looking to have a slideshow on *all* pages… sort of the opposite of the solution you were sharing with us.

    Here’s the solution I came up with: inserted the following php code into the “inner-mid-sidebar” template – meaning the sidebar that’s adjacent to the right-most sidebar on all inner-pages…

    This brings the slideshow to all pages other than the homepage. I decided to provide access to the gallery pages via a standard link – this way the user maintains greater control over the slideshow – clicking to advance the images.

    Could use some tweaking, perhaps, but it works.

    Thanks again for sharing your expertise!
    Jordan


  • Hi Kim,

    Works great on my site! Thank you so much!

    I wonder if you can point me in the right direction to take this a little further. My slideshow shows up in a div on the left side of the page (http://tomasi-design.com/?page_id=7) using a custom field. I would like to somehow automatically pull in the gallery title and gallery description in the div on the right based on the slideshow that shows up on that page.

    I’ve tried editing my page template, using a whole bunch of options. Here’s one I tried that was sure to work to show the gallery title, but no love!

    ID, ‘gallery’, true)) {?>
    title;
    ?>

    Any suggestions? Thanks so much!

    Lori
    .-= Lori´s last blog ..Bamboo Laundry Room =-.


  • Oops. The sample code I sent didn’t sow up correctly in the post above! Not sure how to make it display correctly. Will try again.

    Apologize if it doesn’t come through, but perhaps you get the idea of what I’m trying to achieve?

    Hope you’re feeling better soon.

    /*Code
    ID, ‘gallery’, true)) {?>
    title;
    ?>

    */
    .-= Lori´s last blog ..Bamboo Laundry Room =-.


  • Kim,
    Thanks for saving the little bit of hair I have left. I’ve been pulling it out for two days before seeing this post, and now I am on the cusp of success, thanks to your brilliance.

    Hope you can help me out.

    I’m trying to make a template that can pull in blocks of content with embedded shortcodes–a variety of plugins–sniplets, download manager, notes, etc. (I do an online reference guide, and am looking for a uniform look for all the entries that I can easily change. Each section of content is assigned a key and I put the html in as the value)

    So, the problem I am running into is that the code is pulling up some of the plugins that show up at the bottom of the page–ratings and share this–every time I call up the value from the custom field. With two custom fields, I get three ‘share this’ displays–the correct one and one after each value is shown.

    Any ideas on how to get rid of this?
    Thanks.
    Jeff

    I’m not much of a programmer–just a muddler, so i just cut and paste code.
    here’s what I am testing

    /*

    ID, ‘DiscussionContent’, true); ?>

    <?php the_content(‘Read the rest of this page »’); ?>

    Pages: ‘, ‘after’ => ”, ‘next_or_number’ => ‘number’)); ?>

    <?php edit_post_link(‘Edit this entry.’, ”, ”); ?>

    */
    .-= Jeff Hajek´s last blog ..Work Lean: Ride the Continuous Improvement Wave =-.


  • Try using the Widget Logic plugin, it may save even more time. It adds a variable below the widget so you could do is_page(whatever), or any of the other WP conditionals.


  • I came across your post while searching for a solution for why my NextGen Slideshow feature didn’t work. I had downloaded the Image Rotator and correctly uploaded it, but I didn’t know I had to activate it. Thank-you so much for this information! It is working beautifully now. I assume the sidebar widgets will now work too.

    One follow up question, I notice that there is a brief ad that pops up between images. Is there a way to eliminate that–say by registering?


  • In the balloon appears the word “jwplayer.” Is this a plug for another product they offer? I just looked at their web site again, and it looks like this is open source.

    I will try posting a live page to my site to see if it looks the same as preview.


    • Hi Jonathan – Did you upload the entire folder for the rotator script? If you are using NextGEN Gallery you only need one file – imagerotator.swf It gets installed in wp-content/plugins/nextgen


      • Yes, I only uploaded the SWF file. The ImageRotator works. It is just that an ad pops up between slides.

        It looks like I have to purchase the commercial license to get rid of the ad balloon. I went to their web site, and I emailed them about this. They linked me to a registration form. The registered verson removes the ad.

        So even though it is free for non-commercial use, you do get an ad. I will probably register, as I think this a nice add-on for NextGen.

        Thanks for all your help on this.


        • Hi Jonathan – I still think this is odd – I use the slideshow feature on some of my pages and am not seeing the ad. I wonder if this is new – I have an older version of the imagerotator file.

          http://www.kimwoodbridge.com/contact/

          It’s on the right under Portfolio.


          • It probably is new. Too bad for me.

            I bought it last night, and it cost me $85. Ouch! I think it would have been fair to charge more like $25. The $85 does give me the rights to some of their other products such as the flash video player though (if I ever use it).

            I think that is a little steep when you consider that WordPress/NextGen are both free. WordPress is a fantastic product, and NextGen is an amazing plug-in. These are so good, that I intend to donate to both.

            I can’t help but wonder if Alex Rabe would end up using a different product if he knew that the image rotator is not quite as free as it used to be. I’d feel pretty bad if an update suddenly supported a different product.

            Changing the subject a bit, do you know if there is a page somewhere that has all the embed codes for NextGen documented? For example, in your post you show the following:

            slideshow id=x w=width h=height surrounded by brackets [ ]

            Where can I find a complete list of all of these?


          • I found a site that has the old imagerotator.swf file that does not contain the JW logo, and best of all its free http://www.travelsheep.com/jw-image-rotator-without-watermark-branding/
            sorry its a little late but maybe it might help someone else


  • thanks! this article is great!


  • I have a question that is slightly unrelated but I was wondering if you can help me. I am using the slideshow on my index.php page on interstatecontracting.net. It works fine when I set the id=2 (or any specific gallery number) but I want the slideshow to cycle through ALL the gallery albums (which are all displayed on the portfolio page) and not just the gallery whose id=2. I tried using id=x but it won’t work. Do you have any ideas? Thanks!


    • Hi Danielle – I’m not sure if this will work but did you try adding the gallery numbers with commas in between?

      id=5,6,12


      • Yes, I tried that. When I do:

        it only shows the images from the gallery whose id=1

        This is the code I am currently using. Any ideas if I should change anything?

        The weird thing is that the slideshow sidebar widget has the option to display images from all galleries and that works perfectly. Since it’s a widget, I don’t input any code, I just select that option from a dropdown menu. So I am wondering if it has something to do with the code I am using.

        Thanks!


        • Hmmm, it deleted everything that I had put within the code brackets. How do I type the code so you can see it?


          • Try putting the code between or leaving off the beginning bracket.


          • I tried using the code and /code in the previous post. Anyways, here is the code I am using, leaving off the beginning :

            ?php echo do_shortcode(‘[slideshow id=x w=600 h=250]‘); ?

            It works fine when I set the id=2 (or any number) but not when id=x to try to get it to read from all the galleries. Am I doing something wrong in the code?


  • Hi Danielle – I haven’t been able to locate any supporting documentation but I thought that if slideshow=2,3,5,6 was used like that, that maybe it would work.

    I also looked through the php file for the widget but that didn’t really help me figure it out.

    I wonder if slideshows work with albums … if all galleries were put into an album maybe then it could pull that one album. ??


  • That is an idea. What PHP code do you think would work to call the album?

    Thanks again for your help. I have posted this topic numerous times in the past few weeks on the wordpress.org forums and no one has replied. So I greatly appreciate your time and thoughts on the matter.


  • Hi Danielle – Now that I’ve had some time to look around it seems that my logic was correct but that only galleries work with slideshows – not albums. And I haven’t found a way to have multiple galleries in a single slideshow – I’m starting to think that it can’t be done.

    I guess the only thing to really do is make a gallery called ALL or Everything and put all your images in that one gallery. :(


  • Hi Kim

    I wonder if you might have an answer for me on this one, as I’ve looked everywhere and your site seems to be the most active and helpful!

    I’ve got a wordpress / next-gen gallery / jw image rotator set up on this site (www.cissystems.co.za), and all I’d now like it to do is for people to be able to move forward and backward through the slideshow using the arrow keys on their keyboard instead of having to click on the “>” and “<" icons (particularly because the position of these icons moves with each image, annoyingly).

    Can this be done? Or is there another way round it, by say making all the images exactly the same size (although that would be a bit of a pain)?

    Best wishes

    Emma


  • Finally, I got closer to learning about how to use the custom fields! Thanks for sharing that.

    Have you tried the WidgetLogic plugin to control what widgets appear in the sidebar of specific pages? It’s pretty powerful once you figure it out how to specify the pages.


  • Thx a lot for this, but it doesn’t seem to work. I’m sure I added the php correctly, as well as the custom field-code, but still nothing


  • thanks for ongoing replies
    I am trying to use the code you originally posted for a nggallery in a custom field. What I can’t seem to figure out is how to format the code so that I can identify a template for my entire gallery [nggallery id=1 template=testing]
    What php would I need to pass the template string variable or value??


  • Thanks so much for this! I’ve been looking for a way to output my gallery shortcode from a custom meta box that I created for my Custom Post type in WordPress 3.0… Works like a charm! Thanks


  • It also works if you condense it into one line (just watch your brackets):

    ID, ‘gallery’, true)) ));
    ?>


  • This works

    Slideshow

    to make the menu drop down in front of the slideshow (not behind it)

    [slideshow id=1 w=180 h=240 ]

    position: absolute;
    z-index: 0;”

    These two items work together to send the slideshow back.

    Unfortunately sends the slideshow back behind the text as well as the menu.
    note: z-index only works on “position: absolute”

    To make the slideshow visible not behind text have a transparent gif/png as a picture for the text to run around.

    [singlepic id=30 w=240 h=180 float=left] My Text………………………………..

    Note the single pic option does funny things to the png/gif you create the image imported though nextgen. So you import a transparent image place it in the document over the slide show so it has an id (the size is part of the name). Then create a transparent gif/png with the same name id and replace the one created by nextgen direct via ftp its stored in wp-content/gallery/cache/


  • Do you know if i can put custom fields in a nextgen gallery which is show as a slideshow? i can’t put the code ngg_custom_fields["Your Field Name Here"]; ?> because i dont find where i have to put it when is a slideshow.

    Thanks!


  • Dear readers,

    this is realy something that will helb me a lot.
    But I’m using the headway theme. So I don’t have a page.php or single.php … So, has someone an idea where to include the code? Somwhere in the easy hooks maybe?

    Would be nice to hear if some already included it in headway.

    Thanks a lot


  • Thank you!!! Fantastic, exactly what I was trying to achieve.

    I was having trouble understanding how custom fields are displayed, this was exactly what I needed now, and great learning for next time :)


  • Owww man, very great!!!


  • Great post, helped me display the slideshow using Custom Fields!


Trackbacks/Pingbacks
  1. Home-Baked Web » Blog Archive » NextGen Gallery
Leave a Comment
You may use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .

CommentLuv badge

About

Kim Woodbridge is an accomplished Information and Technical Consultant specializing in the entire implementation of a WordPress based website including installation, theme design, upgrades, unique customizations and ongoing site maintenance.

Recent Comments

    • Property Marbella: Hi Kim, Good article with several good tips, my friend up in Sweden has clothing stores and online sales with little tr...
    • Kim Woodbridge: This post was written 2.5 years ago. At that time people wanted detailed instructions and asked me to write it. And wh...
    • Kim Woodbridge: Pretty much all themes have a page.php file. Are you using a child theme? If so, you will want to look for the page.ph...
    • Mitch: That's why the internet has evolved into a worthless piece of "junk yard". Everybody is repeating the same thing over an...
    • Meredith: This is very straightforward info, and I think it will help, but I have one question. What if I don't have a page.php fi...

Wordpress Services

  • Installation, upgrades and maintenance
  • Conversion of existing html and css templates
  • Theme and plugin recommendations
  • CSS customizations
  • Troubleshooting and tweaks for unique situations
  • Customization for individual blogging goals and needs
  • Training and advice