Using WordPress Custom Fields to Display NextGen Gallery Slideshows Conditionally
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.
- 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.
- 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
- 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; ?> - 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 [ ]
- 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.
- 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.
- 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
Related Posts:
June 18, 2009 at 6:36 am
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!
June 18, 2009 at 4:33 pm
Hi Valerie – I haven’t used the albums feature. I should try it and see
what happens. But overall it’s a great plugin.
June 18, 2009 at 10:25 am
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!!
June 18, 2009 at 4:34 pm
Hi Jannie – LOL It depends on whether Blue Bunny is old Gen of Next Gen ;-)
June 26, 2009 at 1:31 am
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
June 26, 2009 at 1:50 pm
Hi John – This code is for the slideshow component but the same thing can be done for the photos and the galleries.
July 12, 2009 at 8:01 am
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
July 13, 2009 at 7:18 am
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.
August 15, 2009 at 5:56 pm
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
August 15, 2009 at 6:06 pm
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.
August 15, 2009 at 7:44 pm
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
August 18, 2009 at 1:23 am
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
August 18, 2009 at 7:04 am
Hi Jordan – Sorry I didn’t get back to you. I haven’t been feeling well for a couple of days. I’m glad you found a solution.
August 18, 2009 at 2:30 pm
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
August 18, 2009 at 2:38 pm
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
August 19, 2009 at 7:07 am
Hi Lori – I’m not sure how the title would be pulled in automatically. Since this method is using custom fields you could make another custom field that contains the title of the gallery – but that’s a manual solution.
Even when the widget is used for the slideshow it doesn’t have the title.
August 19, 2009 at 12:03 pm
Thanks for your reply, Kim. I’ll keep investigating!
Lori´s last blog ..Bamboo Laundry Room
August 20, 2009 at 12:57 am
Kim,
Any guidance on where I can go to learn how to create custom fields for the title and description?
Thank you!
Lori´s last blog ..Bamboo Laundry Room
August 20, 2009 at 7:04 am
Jeff Starr has a good intro to custom fields here
http://perishablepress.com/press/2008/12/17/wordpress-custom-fields-tutorial/
August 20, 2009 at 11:28 am
Thank you so much, Kim!
August 27, 2009 at 2:02 am
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
August 27, 2009 at 2:05 am
Sorry–the cut and paste was completely ineffective…
August 28, 2009 at 1:12 am
There’s always more than one way to skin a cat. I just went in and switched the settings on all my plugins and put them into the templates manually.
Regardless, thanks for the bit of code–it works great now, and will let me do what I need to.
August 30, 2009 at 7:30 am
Hi Jeff – Glad it worked! I’m on vacation and am only checking emails sporadically.
October 5, 2009 at 4:33 pm
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.
October 6, 2009 at 9:07 am
Hi Mike – Thanks for the recommendation. I’ll have to give that a try.
December 23, 2009 at 10:13 am
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?
December 23, 2009 at 7:13 pm
Hi Jonathan – I have never seen the ad. Is this with the slideshows? There should be any ads.
December 24, 2009 at 3:02 pm
Yes this is with the slideshow. It looks like a balloon like in the comics. It pops up briefly during the transition effects and then goes away. So far, I’ve only previewed my pages, but I have to assume that if I actually make a post, it will appear the same way.
December 24, 2009 at 3:26 pm
I’m afraid my last reply was at the wrong thead level. Forgive me. Anyway, here is a is a link to a live test page on my site:
http://www.shapirohome.com/2006/12/24/test/
You can see the word “jwplayer” between images.
December 24, 2009 at 3:20 pm
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.
December 26, 2009 at 1:39 pm
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
December 26, 2009 at 5:52 pm
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.
December 27, 2009 at 7:46 am
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.
December 27, 2009 at 9:09 am
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?