Integration into your theme

If you want to integrate a SmoothGallery into your theme you can use the WordPress SmoothGallery plugin. There’re two ways to do this:

  1. You want a gallery in your sidebar? Use the widget.
  2. You want a gallery somewhere in your theme? Follow the developer howto.

Sidebar widget

The widget is pretty new. I’ll improve it soon…

The plugin comes with a widget that displays a gallery in your sidebar. This way it’s very easy to insert a gallery because you don’t need to know how to write PHP code. Since the widget renders the gallery inside an iFrame you can add as many galleries as you want.

Developer Howto

All you have to do is to implement the function insertSmoothGallery in the file config.php; you can find that file under wp-content/plugins/smoothgallery. Depending on your implementation the plugin makes sure that the CSS and JavaScript will be included inside your page.

Let’s say you want a timed gallery on the page with the id 4711 somewhere in your theme that’s 400×80 pixels. Open the file config.php and implement the insertSmoothGallery function like this:

function insertSmoothGallery() {
  # add all the conditional tags you're using to the array
  if (assert_functions_exist(array('is_page')) === false)
    return false;
 
  if (is_page('4711')) {
    return array('width'  => 400,
                 'height' => 80,
                 'timed'  => 'true');
  }
  return false;
}

Once you’ve done that put the HTML markup for the gallery somewhere inside your theme and you’re all set. No matter how you implement the function don’t remove the call to assert_functions_exist.

As you can see, I used the conditional tag is_page. These come in handy if you’d like to display the gallery on some specific pages only - if you don’t want that but a gallery on each and every page just remove the if statement and the corresponding curly brackets.

Just add another sidebar…

Instead of implementing the clumsy insertSmoothGallery function you can simply add another sidebar to your theme if you like that better. Think of it as a placeholder for widgets. It doesn’t necessarily have to be a vertical bar on the side - some horizontal thing in your header or footer is okay too.

So, maybe you want to have a look at the Widgets API and learn how to add another sidebar to your theme. Check out register_sidebar and dynamic_sidebar in particular; the page about the second function tells you how to manage Multiple Sidebars in your theme.

38 comments ↓

#1 Danny on 02.11.08 at 1:39 pm

Hi Christian, this is a sweet plugin, exept I cannot activate it as I get the
“Plugin could not be activated because it triggered a fatal error.”
Message.
I’ve tried deactivting all my other plugins, and checked for the call to the header and footer, but no luck.
Any ideas what the problem might be?

#2 Christian Schenk on 02.11.08 at 5:58 pm

Hi Danny,
please have a look at this comment.

#3 Paul on 03.16.08 at 3:41 am

Great plugin but I can’t get it to work. What am I not doing?

I’ve uploaded the plugin and activated it, but when i put

function insertSmoothGallery() {
  return array('width' => 400,
               'height' => 50,
               'timed' => 'true');
}

in to my Main Index Template all that shows up on my page is the actual words and it doesn’t show the plugin.

#4 Christian Schenk on 03.16.08 at 11:37 am

Hi Paul,
you’ll have to edit the file smoothgallery.php that comes with the plugin. Open it and search for the function insertSmoothGallery and insert your code there.

#5 Paul on 03.16.08 at 6:42 pm

Thanks for the quick reply but when I went in the smoothgallery.php file and changed the first function that says return false to the code above I still get the same problem.

#6 Dave Von Bieker on 03.17.08 at 7:43 pm

This looks like a simple solution, but when I load my index page I get a big white blank where the image should be.

You can see it here … http://www.bodycreativenetwork.com

Any help would be greatly appreciated, thanks!

#7 mas on 03.31.08 at 12:21 am

Ok I edited the smoothgallery.php already, plugin activated already and how to insert smoothgallery.php in my index.php?

Do I have to put include smoothgallery.php? how do you do it?

#8 Christian Schenk on 04.01.08 at 2:27 pm

Hi mas,

how do you do it?

This video shows you how I did it.
Activate the plugin, implement insertSmoothGallery, insert the markup in your theme and you’re done. If it still doesn’t work read the FAQ or write me an e-mail.

#9 U.S. Common Sense on 05.03.08 at 7:50 pm

Hello Christian,

Thanks for providing us with this plug-in which we can use. I have a question though regarding integrating the plug-in within the site for the latest articles.

On my home page, I currently have a tabbed feature where my latest article is displayed. What I would like to do is replace that with the SmoothGallery plug-in so that it would grab the three most recent articles and their related images.

I was trying to use the code from your example on the front page, and wrapping that around the existing code in my theme which displays the latest article, but with no luck. Can you provide us with a way to integrate the plug-in in that fashion? Or at least point us in the right direction?

Thanks. :)

#10 Christian Schenk on 05.05.08 at 6:25 am

Hi everybody,

Can you provide us with a way to integrate the plug-in in that fashion? Or at least point us in the right direction?

This should be the feature you were looking for…

#11 Justin on 05.06.08 at 7:04 am

When you say “put the code for the gallery somewhere on your page” which code is that? Thanks!

#12 Christian Schenk on 05.06.08 at 7:24 am

Hi Justin,

When you say “put the code for the gallery somewhere on your page” which code is that?

That’s the HTML markup for the gallery. Thanks for the hint!

#13 m on 05.15.08 at 10:31 pm

What about using a gallery on one page only? I have mine on the front page but no where else. It works fine without error on this page. I used conditional wordpress tags in smoothgallery.php.

All other pages give the error: invalid argument supplied for foreach() ….[file location] smoothgallery.php on line 94. This line is looking for key values but finds none since the gallery is only on the one page.

What do I add to smoothgallery.php to avoid this little error?

#14 m on 05.15.08 at 10:43 pm

Answering my own question…

in smoothgallery.php: make sure you double check your work when adding function insertSmoothGallery. Don’t change return false;.

#15 Irene on 05.16.08 at 5:33 pm

(implementing smooth gallery into theme)

I tired to enter the code below into my wp-config.php file. Because of a statement below the code, according to the instructions as to how I understand it. I didn’t see a config.php file so I used the wp-config.php file. I also installed the smoothgallery files into my plugin directory.

Now I just get this message when I get to my site.

Parse error: syntax error, unexpected ‘}’ in /home/jaxel/public_html/sodafox/sodafoxblog/wp-config.php on line 28

(code inserted)
function insertSmoothGallery() {
return array(’width’ => 400,
‘height’ => 50,
‘timed’ = ‘true’);
}

(instructions)
If you want to integrate a SmoothGallery into your theme you can use the WordPress SmoothGallery plugin. All you have to do is to implement the function insertSmoothGallery in the file config.php.

#16 Christian Schenk on 05.17.08 at 10:54 am

Hi Irene,
have a look at the directory wp-content/plugins/smoothgallery: you’ll find a config.php there. Insert your code into this file.

#17 Lizza on 05.28.08 at 2:08 pm

Hi Christian,

Thanks for this fab plug in! I’m just having trouble getting it to work. I amended the congif.php file in the smoothgallery folder:

function insertSmoothGallery() {
  return array('width' => 550,
               'height' => 250,
               'timed' = 'true');
}

And then I inserted this code in my home.php file

Corker Issue 2: Winter 2008 is out now
Will Kevin Rudd deliver on all his election promises?
<a href="http://tocome" title="open image" rel="nofollow"></a>
 
Glam Punk
We feature pieces from Aussie designers Trimapee and Robby Tjia
<a href="http://tocome" title="open image" rel="nofollow"></a>
 
Walking on thin ice
One drug user and two nurses openly talk about their experiences with ice.
<a href="http://tocome" title="open image" rel="nofollow"></a>
 
Plastic Palace Alice
Listen to our exclusive interview with this Aussie band
<a href="http://tocome" title="open image" rel="nofollow"></a>

And it is coming up with just words on the page. See http://corkermag.com/blog/

What am I doing wrong?

Thanks in advance.

#18 Steve on 05.29.08 at 4:44 am

Ok, there is some serious misunderstanding on my part.

I am trying to install the plugin on my home page and I get nothing.

Here is what I did:

1. uploaded & activated the plugin

2. added this code to the config file (in the plugin directory):

function insertSmoothGallery() {
  return array('width' => 380,
               'height' => 250,
               'timed' => 'true',
               'showInfopane' => 'true',
               'showArrows' => 'true',
               'showCarousel' => 'true',
               'embedLinks' => 'true');
}

3. placed this in my header file: insertSmoothGallery();

4. in homepage file: insert_recent_images_box(5);

5. created a test post with an image.

Nothing displays on the home page. I want the carousel to display the images from the last 5 posts.

What am I missing?

Thanks.

#19 Christian Schenk on 05.29.08 at 3:30 pm

Hi Steve,
step three isn’t necessary. Have you used WordPress’ built-in Media Library to upload and attach the image to the post? Have you tried using the special tag inside the post? Does the latter work?

#20 Zolud on 06.13.08 at 5:52 pm

Hi, Christian. Is this version compatible with WP 2.0?
And is there a “Gallery Set” function?
Thanks a lot from Ukraine :-)

#21 Christian Schenk on 06.15.08 at 9:30 am

Hi Zolud,

Is this version compatible with WP 2.0?

I haven’t tested the plugin with WP 2.0 but just give it a try ;-)

And is there a “Gallery Set” function?

If you want images from some set in a gallery you have two options:

  1. attach images to a post/page, in the edit-post-screen scroll down to the bottom and copy the markup somewhere into the post; watch this.
  2. I’m working on an integration with Flickr - you’ll be able to create galleries based on set/favorites from Flickr.

    3. Since the second option currently doesn’t work and if you’re using WP 2.0 you won’t have the “Media Library” (do you?), so option one isn’t possible either. I suggest, that you update WP to 2.5 or wait until I’ve included support for images from Flickr.

#22 RSimpson on 06.20.08 at 1:19 pm

Hi Christian,

I’m experiencing a bug in FireFox. The gallery loads, there’s a black flash on the screen, then the first image fades to white before the second loads without the fade transition.

The page is the link I’ve set in the website field in this comment form. I’ve got the gallery loading as part of my theme so I haven’t included the smoothgallery custom field.

Any ideas?

Cheers,
Robert

#23 Christian Schenk on 06.20.08 at 3:11 pm

Hi Robert,
hm strange, I can’t see the error here and I’ve tried it with Firefox (2.0.0.14) and Safari (3.1.1): the transition looks fine for me. I’m sorry, but I can’t help you with that.
BTW: If you’ve integrated the gallery into your theme with the insertSmoothGallery function, you don’t need the custom field. So that should be okay.

#24 Bong on 07.24.08 at 9:28 am

Hi!

I was looking for a plugin that will show images in a nice way and I was glad I stumbled on your plugin. I want to integrate nextgen smooth gallery in the theme. I’m not a coder so I rely on cut-and-paste instructions.

But I was stumped with the how to on integrating it with the theme.

First, the plugin directory of the site I’m working on looks like this…

mydomain.com/wp-content/plugins/nextgen-smooth-gallery/

Do we have to rename the nextgen-smooth-gallery folder to smoothgallery?

Inside the nextgen-smooth-gallery folder are the following:
1. /smoothgallery ==> another folder
2. nggsmooth.php
3. nggsmoothframe.php
4. nggsmoothsharedfunctions.php
5. readme.txt

Inside the /smoothgallery folder are the following:
1. /CSS ==> another folder with images and CSS.
2. /Scripts ==> a folder with JavaScript files only.
3. License.txt

My best bet for what passes as config.php is nggsmooth.php so I placed the function insertSmoothGallery there above all the other functions. My dashboard went blank. I also watched the videos.

BTW, I have NextGen itself installed and running. Fact, the the images are showing great in the plugin settings page. If I can only make it appear on the front page… this is embarrassing but I’m also lost on the HTML mark-up to insert the gallery into the index.html or home.php.

Thanks. :)

#25 Christian Schenk on 07.24.08 at 10:04 am

Hi Bong,
this plugin is just about SmoothGallery - if you’d like to integrate SmoothGallery with NextGen, you should ask these guys.
However, if you decide to use this plugin I will of course help you to integrate it on your website; just write me an email.

#26 Gregg on 08.28.08 at 2:22 am

Hi Christian,

I am integrating this into my theme, but it displays the box with the arrow but no image. I am so close! I have checked the path to the image and it’s there. I am stumped. If you have any ideas I would really appreciate it.

-Gregg

#27 Amir on 09.04.08 at 7:39 am

Hey Christian

Nice Plug-In you got going here. I’m trying to install it, but once I do all the steps you’ve put in the instructions I get no change visible. I’ve activated the plug-in, and pasted the markup text in the main index template so that it would show up after the header. I then went into the config.php, saw this

function insertSmoothGallery() {
	return false;
}

Which I then replaced with this

function insertSmoothGallery() {
  return array('width' => 550,
               'height' => 250,
               'timed' => 'true');
}
#28 Vincent on 09.08.08 at 6:10 am

I am getting this error on ALL my pages and blog posts:

Fatal error: Call to undefined function insertsmoothgallery() in wp-content\plugins\smoothgallery\smoothgallery.php on line 94

I have added the code to config.php:

function insertSmoothGallery() {
  return array('width' => 400,
               'height' => 50,
               'timed' => 'true');
}

The plugin seems to be breaking the wp_header() code on WordPress 2.6.1.

#29 Salman on 09.08.08 at 4:55 pm

Hey man thanks for the great plugin.

im having some trouble with installation.. i did everything youve requested (im trying to include the plugin as part of my theme on the home page i.e. display featured posts) and you keep mentioning insert the HTML markup in the header.

Could you please tell me WHAT html markup? im new to programming so i have no idea how to call the plugin on my home page?

PS i think a lot of people are trying to use this to display their featured posts… maybe a tutorial just on that???

thanks!

#30 Sebastien Page on 09.17.08 at 9:58 pm

That’s a great plugin however I am having a bit of an issue. I installed it and played with the plugin enough to have it work (that’s what I thought!).

The plugin displays the images and everything but I get an error message at the top and bottom of my page saying:

Warning: Invalid argument supplied for foreach() in /home/.minni/xxxxxx/iphonedownloadblog.com/wp-content/plugins/smoothgallery/smoothgallery.php on line 97

Line 97 is : foreach ($parameters as $key => $value) {

I really don’t know what to do here.

Any help would be greatly appreciated. Thanks

#31 Christian Schenk on 09.18.08 at 6:10 pm

Hi Sebastien,
if you changed the insertSmoothGallery function and it doesn’t return false or an array that holds the options for the gallery, the foreach statement will break apart.
Just replace this function with the original one and everything should be okay. If you want to integrate the gallery into your theme and you want to change that function make sure to either return an array or false.

#32 Sebastien Page on 09.18.08 at 6:32 pm

Thanks for the quick reply :-)

#33 Craig on 10.02.08 at 11:42 pm

I do web design & coding for a living and I have to say the instructions here are not the clearest I have ever seen. If I struggled to get this working, I can only imagine how many newbs get frustrated and go onto some other plugin.

This is an excellent plugin and looks great, so here are the instructions to get it working:

  1. Open /wp-content/plugins/smoothgallery/config.php and at the bottom find this: function insertSmoothGallery() … and change it so that it looks like this: 
    function insertSmoothGallery() {
  return array('width' => 600,
               'height' => 200,
               'timed' => 'true',
               'delay' => '5000',
               'showInfopane' => 'false',
               'showArrows' => 'true',
               'Carousel' => 'true',               
               'embedLinks' => 'false');
}

    Of course, you can change the settings to your needs and image size.

  2. Use Christian’s Markup generator or write your own code to insert on the page that you want to display the carousel. In my case, it was on the homepage and this is what it looks like: Sorry, but WordPress stipps out the HTML
  3. Upload the images to the spot that you designated in your code.
  4. Refresh your page.

The reason I struggled to get it to work was that I had ShowCarousel, which was not correct and I happen to come across the correct variable (Carousel). Before I changed that variable I got zip, nada, nothing displaying although I could see that the code found the images ok. I even reverted config.php to its original state and my 5 images would display, stacked. I knew the problem had to be a setting in the plugin.

Hope this helps the next person.

#34 Kat on 11.25.08 at 11:09 pm

I must be very stupid. I have attempted to add this plugin and get it to work. I believe I followed the directions: I have WP version 2.3.1. I uploaded the plugin to my plugins folder. I then activated it.

Herein lies the problem. I do a test post. I add a couple of images and the plugin does not provide the code until I save. So I save and I follow all the directions in your video: I add the custom field and implement the shortcode. I’ve added the html generated code also and still, It won’t work. If there’s something else I need to do to the files, please tell me step by step because I’m not a programmer.
But I get this error:

Warning: Invalid argument supplied for foreach() in /home/content/e/f/o/efoliomn/html/wp-content/plugins/smoothgallery/utils.php on line 357

I don’t know what to do. Please help.

#35 Christian Schenk on 11.26.08 at 10:11 am

Hi Kat,

I must be very stupid.

No you’re not ;) I’m sure that we’ll get this working!

Can you e-mail me a link to your test post? I’ll have a look at your page to see what might be wrong.

PS.: The error should be fixed in version 1.11.2.

#36 Christiaan on 11.30.08 at 12:43 am

Once I add images to a post or page I just get “There aren’t any images attached here” where the code is meant to be.

#37 Christian Schenk on 12.01.08 at 12:15 pm

Hi Christiaan,
After adding the images you’ll have reload the edit screen. The SmoothGallery panel under Advanced Options won’t pick up the images until you hit reload in your browser or click Save. There’s no AJAX magic involved here.

#38 andy on 12.03.08 at 7:31 am

I have a weird problem where the smoothgallery.php css returns a 404. If I remove the ‘prefix’ get parameter, it works ok.
Any ideas?

Just to clarify the statement above, it’s the css link to the css code (smoothgallery.php) the plugin inserts in the head section of my html that I discovered was returning the 404.

Leave a Comment