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:

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

Hint: 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.

There’re various options that you can change on the edit screen for every widget. The first thing you should do though is supplying the ID of a post or a page where you uploaded the images. Once you’ve done that the widget should work as expected displaying the images from the given post/page. If it doesn’t work check the value for imgsize: this has to match the values for the thumbnails under Settings – Media.

Developer Howto

All you have to do is to implement the function insertSmoothGallery in the file config.php; you can find it under wp-content/plugins/smoothgallery. Depending on your implementation the plugin makes sure that the CSS and JavaScript will be included inside your page; keep in mind that this won’t work if the SmoothGallery sits inside an iFrame.

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.

I wrote a post about adding a sidebar to your theme, just three easy steps that should be easy to follow if you’ve got a basic understanding of PHP and themes in WordPress.

Still not convinced? Maybe you’d like to read Ian Stewart’s We Need To Kill The Sidebar.

85 comments ↓

« Older comments

Newer comments »

Craig says:

October 2, 2008 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.
Kat says:

November 25, 2008 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.
Christian Schenk says:

November 26, 2008 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.
Christiaan says:

November 30, 2008 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.
Christian Schenk says:

December 1, 2008 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.
andy says:

December 3, 2008 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.
Christiaan says:

December 5, 2008 at 11:47 pm

Can someone please explain exactly what the “HTML markup” is?

Christian Schenk says:

December 6, 2008 at 5:48 pm

Hi Christiaan,
the “HTML markup” is something like the following:

<div id="myGallery">
  <div class="imageElement">
    <h3>Headline</h3>
    <p>Description</p>
    <a href="image.jpg" title="open image" class="open"></a>
    <img src="image_thumb.jpg" class="full" alt="Image Description" />
  </div>
  <!-- more imageElement div's here... -->
</div>

So it’s just the HTML describing the images for the SmoothGallery.

Christiaan says:

December 6, 2008 at 11:32 pm

Thanks Christian.
Matt says:

December 7, 2008 at 2:33 am

This is now working for me. I activated the plugin, there is nothing now in the admin controls.

I took the function code and posted it in my index.php file. There came an error saying it was already posted in the config.php.

I want this to show up on the home page ONLY and not all the other pages. Please help…..
Christian Schenk says:

December 7, 2008 at 12:49 pm
Hi Matt,
just edit the file config.php in the plugin’s directory and the plugin will notice it; don’t copy the function to your theme. In case the howto above wasn’t that clear for you to grasp here’s what you should do:
1. open the file config.php under wp-contents/plugins/smoothgallery
2. edit the function insertSmoothGallery like so:
  # add all the conditional tags you're using to the array if (assert_functions_exist(array('is_home')) === false) return false; if (is_home()) { return array('width' => 400, 'height' => 80, 'timed' => 'true'); } return false;
3. adapt the returned array to your needs
4. try playing around with the conditional tags if is_home isn’t working for you.
5. insert the HTML markup somewhere into your theme and make sure that it just shows up where you want it – again use the conditional tags here.
That should be it
Matt says:

December 8, 2008 at 6:11 pm

How would I make the pages/posts show up in the gallery?

smoothgallery > On?

Because that didn’t work with a post.
Christian Schenk says:

December 8, 2008 at 6:18 pm

Along with the custom field you’ll have to add the shortcode too, like so: [smoothgallery].
Sarah LeBlanc says:

December 10, 2008 at 12:29 am

Hi Christian,

Thanks for the plug-in!

I was able to get the smoothgallery up and running in my header, but when I insert the mark-up into the code for my header, I bump down the rest of the page 300 pixels (the same size as my smoothgallery).

This is likely just an HTML problem, but perhaps others have encountered it as well. Could you please give me a hand?

Thank you!
Christian Schenk says:

December 10, 2008 at 9:25 am

Hi Sarah,
I’ve just changed the CSS value for element.style from display:block to display:inline and the page looks fine again – except for the gallery: it seems to hide behind the black box.
I haven’t got the time and I’m sorry that I can’t have a detailed look at your theme but I hope that you’ll figure out how to display the gallery above the black box; try adjusting the z-index for the myGallery CSS element or change the background color to transparent, some of this might work.
Allan says:

January 5, 2009 at 6:53 pm

I want to put the gallery in my homepage.. how i can do this? because i only saw here the widgets and pages.. how can i insert it to the homepage only? thanks
Christian Schenk says:

January 5, 2009 at 7:49 pm

Matt wanted to do the same thing. Check out my suggestion here.
Tracy Hartzler says:

January 14, 2009 at 8:23 pm

Hi, I get the following error in my widget….

Warning: Invalid argument supplied for foreach() in /home/tracyhar/public_html/wp-content/plugins/smoothgallery/utils.php on line 169

Warning: Invalid argument supplied for foreach() in /home/tracyhar/public_html/wp-content/plugins/smoothgallery/utils.php on line 169

Didn’t see this in the FAQ… hope you can help.
Thanks, tracy
Christian Schenk says:

January 15, 2009 at 12:01 am

Hi Tracy,
can you tell me what exactly you did to produce this error?

You placed the widget in a sidebar, inserted the id of the post/page with the appropriate images on the edit screen of the widget, adjusted the value for imgsize and checked that WordPress generated thumbnails in that size? What else did you probably do?

Sorry that there’s not much documentation for this right now, but I’m really looking forward to improve this.
David Stembridge says:

January 17, 2009 at 8:50 pm

I am trying to figure out the widget as well….

is there a particular place the widget needs to be? I tried using the ID for my current front page. It doesn’t work though.

any more research on these widgets?

Thanks!
Christian Schenk says:

January 18, 2009 at 9:51 am

Hi David,

is there a particular place the widget needs to be?

Any sidebar with enough space for the images will work.

I tried using the ID for my current front page. It doesn’t work though.

The widget uses the images attached to a post/page with an ID that you can enter in the options of the widget. If there’re no images attached to the given post/page the widget might break apart with a short error message or just don’t display anything. So in your case make sure that you uploaded some images to your front page.

any more research on these widgets?

As soon as I find the time I’ll improve the documentation on this one.

amy says:

February 4, 2009 at 2:41 am

Hi Christian,
I’ve been trying to get the carousel to show with no luck.
All the other options work – I’ve tried ’showCarousel’ and ‘c’ as well – what am I missing?
here’s what I’ve got…

if (is_page('200')) {
  return array('width' => 600,
               'height' => 600,
               'Carousel' => 'true',
               'timed' => 'true',
               'delay' => '5000',
               'showInfopane' => 'false',
               'showArrows' => 'false', 
               'embedLinks' => 'false');
}
return false;

Thanks
a

turketay says:

February 16, 2009 at 5:13 pm

Hi, first sorry my english is a little weak:) ..
I “zoxengen” I’m using the theme, but a kind of theme in the show’s homepage spaces and I would be happy if you could not help ..
Harrison McLeod says:

February 23, 2009 at 11:02 pm

Hey Chris,

I just upgraded the plugin and now the gallery isn’t working. It’s showing two static images on the main page. Is there a fix for this?

Ha, nevermind, figured it out. The config.php got overwritten. Thanks!
Quatog says:

March 2, 2009 at 3:07 am

Hello Christian,

I really love your plugin. It makes it easy for me to create a slideshow for my current posts on wordpress. However I also like this theme – http://bustatheme.com/wordpress/coda-blue/. I’m having a hard time to make them work toegether. I thought iframe was the answer but it does not seem to work. Can you help me on this? Thanks.
Christian Schenk says:

March 2, 2009 at 7:03 am

Hi Quatog,
have you already installed this theme on your site? Can I have a look at the not-so-well-working galleries? URL?
Lenny says:

March 17, 2009 at 9:04 pm

Hey Christian,
I have spent 3 hours trying all the different methods to get this plugin to work. I want it to show up only on my homepage. Can you check the site and help me?
Tricia says:

March 31, 2009 at 3:43 am

Hi Christian,

I found SmoothGallery and was impressed – but was confused on the implementation. So I was very happy to find your plugin!

I have followed the instructions to install to my main index template. I do see the outline where the gallery should be and I even see the left/right arrows. However, the images are not there. I am only seeing the black status bar like it is trying to find the images. When the plugin is turned off, I am able to see the images.

I have a feeling I missed something really simple…what does it mean when you only see the black status bar?

Thank you so much!
Christian Schenk says:

March 31, 2009 at 7:39 am

Hi Tricia,

what does it mean when you only see the black status bar?

Either the links to the images are broken or another incompatible framework (jQuery, PrototypeJS) might interfere with SmoothGallery.
I’ll write you an email so we can figure this out.
JT says:

May 21, 2009 at 9:28 pm

Christian – I have the same problem as Tricia. This is a recent problem as the plugin was previously working fine. Could you email me any advice you came up with for her?
Thanks – plugin is great. Really like it.
Christian Schenk says:

May 22, 2009 at 6:59 am

Hi JT,
you’ve got PrototypeJS on your website which is incompatible with SmoothGallery. To work around this you’ll have to put SmoothGallery inside an iFrame. Have your read my advice on adding another sidebar? Do this, use the widget and you’re all set.
Peter says:

June 11, 2009 at 8:51 am

Hi Christian,
I am attempting to use the smoothgallery widget on a wordpress based site I am building.
I am getting this error.

Fatal error
: Call to a member function register() on a non-object in
/homepages/45/d204742291/…P/wp-includes/widgets.php
on line
427

The website I am building is in the Website section of the form. I would appreciate it if you took a look!
Thanks

Integration into your theme

Sidebar widget

Developer Howto

Just add another sidebar…

85 comments ↓

Leave a Comment

Search

What’s new ?