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
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!
Hi Valerie – I haven’t used the albums feature. I should try it and see
what happens. But overall it’s a great plugin.
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!!
Hi Jannie – LOL It depends on whether Blue Bunny is old Gen of Next Gen ;-)
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
Hi John – This code is for the slideshow component but the same thing can be done for the photos and the galleries.
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 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.
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 =-.
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.
Thanks for your reply, Kim. I’ll keep investigating!
.-= Lori´s last blog ..Bamboo Laundry Room =-.
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 =-.
Jeff Starr has a good intro to custom fields here
http://perishablepress.com/press/2008/12/17/wordpress-custom-fields-tutorial/
Thank you so much, Kim!
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 =-.
Sorry–the cut and paste was completely ineffective…
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.
Hi Jeff – Glad it worked! I’m on vacation and am only checking emails sporadically.
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.
Hi Mike – Thanks for the recommendation. I’ll have to give that a try.
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?
Hi Jonathan – I have never seen the ad. Is this with the slideshows? There should be any ads.
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.
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.
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!
Hi Juliana – I’m glad the article helped.
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
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
Hi Emma – Unfortunately, I don’t know. I want to say it can’t be done but I’m not 100% certain.
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.
Hi Antonella – I believe I have used that plugin on another site – it does makes things easier for conditional display of widgets.
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
Hi Saya – I’m not sure why it isn’t working for you – there could be any number of reasons.
Did you install the imagerotator?
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??
Hi – I don’t know the answer. Maybe someone who comes along will be able to assist.
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)) ));
?>
Soz, forgot to put that in code tags:
ID, 'film_trailers_value', true)) ));
?>
Or apparently code tags don’t work in this comment form… never mind, I’m sure you can figure it out ;)
Sorry about that – that is very useful!
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/
Hi – Does this allow the image in the slideshow to then be linked to a page or a post?
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!
Hi Lidia,
There are some oldish instructions for doing that with ImageFlow for the Slideshow here
http://shabushabu.eu/software-plugins/nextgen-imageflow/#comment-933
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
Does Headway have a sidebar.php? That’s where I am putting the code in this example. If not, then it would be done through a hook.
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!