WordPress SmoothGallery Plugin

This WordPress plugin helps you to embed JonDesign’s SmoothGallery in your blog.

Basically it’s this simple:

upload some pictures to a post or page
use the shortcode smoothgallery
set some options
watch your smooth gallery

You can download the plugin here.

Example

Have a look at this example. Kudos to my brother and his friends for taking these awesome pictures; thanks that I may show them here.

Bergpark - Bridge

Another stunning picture.

Bergpark - Aqueduct

Wow! That's awesome.

I’m collecting real world examples where this plugin was used: if you’re interested have a look at the showcase page.

How to

Once you’ve activated the plugin you can start adding galleries to your posts and pages. I’ve split up this How to section into the following use cases.

Getting started

Adding a smooth gallery to a post or a page is easy! Try this:

go to the edit screen for a post or a page
right below the input field for the title click on Add an Image
upload some images and enter a sensible title and description
reorder the images however you want them
insert [smoothgallery] somewhere in the content
add a custom field named smoothgallery with its value set to On
hit save and click on View this Post/Page to see the result

If you’d like to customize the gallery check out the available options.

Activating the development version

If you’d like to use the latest version of SmoothGallery just activate it in the file config.php:

add a # at the beginning of line 43 and 44
remove the # from line 45 and 46

The plugin now uses the new version; currently SmoothGallery 2.1beta1 with Mootools 1.2.

iFrame it

Embedding the SmoothGallery inside an iFrame has several advantages:

the JavaScript for SmoothGallery doesn’t interfere with incompatible frameworks like jQuery, PrototypeJS that you’re probably using on your site
you can have more than one gallery on a single page

Just add iframe=1 as an attribute to the shortcode. If you’ve previously used the normal SmoothGallery and put all the options inside the custom field you’ll have to transfer these to the shortcode now. Say, you’ve got h:250 and i:false in your custom field then you would put this into the shortcode [smoothgallery iframe=1 height=250 showInfopane=false].

Note that you don’t need the custom field anymore; just remove it. Furthermore you can’t use the shortcuts, e.g. h for height, use the long version instead, i.e. height instead of just h. Finally you can’t even use : instead of = in the shortcode either.

More than one gallery

All you have to do is adding the shortcode [smoothgallery] several times to your content, with the iFrame option enabled. Have a look at the options on how to customize the appearance of the galleries.

If you don’t want to use iFrames for some reason have a look at this alternative solution.

A gallery in your sidebar or theme

I’ve created a separate page for this issue.

Some people want to do this because they’d like to have the images of the most recent posts inside a gallery; sometimes displayed in the header part of their theme. Read about this here.

Images from Flickr or Picasa

Your images are hosted on Flickr or Picasa and you want to show them inside a SmoothGallery on your blog? No problem, follow these two steps.

Open the file config.php that comes with the plugin in an editor, search for ENABLE_FLICKR and ENABLE_PICASARSS and change the value from false to true for one of them or both. If you’d like to use Flickr make sure to supply your API key (FLICKR_APIKEY) and secret (FLICKR_SECRET) as well.
Use the following attributes along with the shortcode:
- flickrusername: supply your Flickr username and the most recent photos from your photo stream will be included in the gallery.
- flickrphotoset: use this if you want to show images from a particular set of photos.
- picasaurl: navigate to an album on Picasa, grab its RSS feed and supply it with this attribute in the shortcode.

Have a look at the examples to learn more about their usage.

In case you want to resize images on the fly there’s a parameter called imgmax that you can use. This parameter special to Picasa will resize the image to fit in the frame of SmootGallery. Here’s an example:

[smoothgallery iframe=0 width=640 height=480 embedLinks=false
 timed=true delay=6000 bordercolor=fff imgsize=640x480
 picasaurl=https://picasaweb.google.com/[...]/4711?imgmax=640]

Notice the imgmax parameter at the end of the picasaurl.

Using ReMooz to open the images

If you’ve linked to larger images in your SmoothGallery but don’t want them to open in a new window ReMooz comes to the rescue. Make sure to activate the development version first and keep in mind that this won’t really work if you’ve put SmoothGallery inside an iFrame.

Either add r:true to the custom field or add useReMooz=true as an attribute to the shortcode.

Generated thumbnails

If you’d like to use the carousel feature of SmoothGallery you’ll have to either generate thumbnails yourself or use the plugin to do this for you: just set ENABLE_GENERATED_THUMBNAILS in the file config.php to true. Furthermore make sure that the directory cache under smoothgallery/extra is read/writable by the webserver.

Custom links for images

By default, the shortcode generates markup that contains a link for each image to its large version. This is great if you’d like to have a pure image gallery. If you’d like to setup a gallery, say, for your featured posts with a teaser image and a link to the corresponding post, you can do this like so:

go to Media Library
edit an image
supply a SmoothGallery link

and save. Once you’ve done that the image in the gallery uses the given URL.

For control freaks

If you’d like to have more control over the exact markup that gets inserted inside your page, maybe you don’t want to use the shortcode but insert everything yourself. I’ve prepared two starting points for you:

under Advanced Options on the edit screen scroll down to SmoothGallery and use the generated HTML markup
generate the markup with this tool

No matter what you’ll use, you’ll end up with some markup that you can start customizing. Check out all the available options for full flexibility.

You also might want to check out the tool box which has got useful wizards to ease the creation of compatible markup.

Options

If you aren’t using iFrames and you don’t annotate your post or page with smoothgallery the CSS and JavaScript will not be loaded and the gallery won’t work. So, add a custom field with the key set to smoothgallery if you’d like to enable the SmoothGallery for a particular post or page. If the value is set to 1 or On the default values for the gallery will be used.

If you want to change the defaults you can use the following options. I’ve split up this section into options that come with SmoothGallery and the ones that I’ve added. It’s meant as a reference for you – so, if you’d like to change something you can look up the options here.

SmoothGallery options

Here are the most common options for SmoothGallery. If you need more: have a look at the top of the file utils.php that comes with this plugin.

Option	Short version	Default value
showArrows	a, arrows	true
showCarousel	c, carousel	false
showInfopane	i, info, infoPane	true
embedLinks	l, links	true
timed	t	false
delay	d	9000

I added some more options that aren’t part of SmoothGallery. They help you to customize the dimensions and other CSS related parameters.

Option	Short version	Default value
height	h	345
width	w	460
bordercolor	b, border	000

Example for the custom field

With the following code you would end up with a timed gallery that is set to 350×400 pixels and has got a white border. This goes into the custom field named smoothgallery:

w=350
h=400
timed=true
b:fff

As you can see, you can use : instead of = too. Mixing the long and short version of the attribute names is okay.

Shortcode

The shortcode [smoothgallery] has got some more attributes. If you’re using the attribute iframe along with the shortcode you can use all the above plus the following attributes. Currently the shortcuts that may go into the custom field, e.g. h for height, aren’t supported here – use the long version instead, i.e. height instead of just h.
Please don’t confuse the following with the options that you can use along with the custom field – the following attributes are solely for the shortcode.

id: By default the shortcode uses the images attached to the current post or page. If you’d like to use the images attached to another post or page you don’t have to upload them again but just specify the id of the specific post/page with this attribute.
iframe: Add this parameter if you’d like to take advantage of a gallery inside an iFrame.
iframebgcolor: Adapt the background color of the iFrame. Just supply the color code without the preceding #.
imgsize: If you upload images with WordPress thumbnails will be created for you. We can try picking up these images instead of the original version with this parameter. Say, you’ve set the Thumbnail size for your images under Settings – Media to 150×150 pixels. If you add the parameter imgsize=150x150 to the shortcode the gallery will display the thumbnails instead of the originals.
flickrusername, flickrphotoset: Either just supply your Flickr username and the most recent photos from your photo stream will be included in the gallery or add the attribute flickrphotoset to show images from a particular set. Hint: when you click on a set in Flickr, in the URL it says /sets/numbers#: that number is the one you should use with flickrphotoset.
picasaurl: Navigate to an album on Picasa, grab its RSS feed, supply it with this attribute in the shortcode and the gallery will use your images from Picasa.
dir: You just want to show some images that are in a directory on your webserver? Open the file config.php, add your directory to the array inside the function getImageDirectory and add the attribute dir to the shortcode pointing to the path in the array, i.e. dir=0 for the first path, dir=1 for the second one and so on.

Examples for the shortcode

On this very page I’m using the following simple shortcode to generate the markup for the SmoothGallery:

[smoothgallery imgsize=400x266]

This will grab the images that I uploaded to this page for the gallery. The attribute imgsize says, that I don’t want to use the images with their original size, but the thumbnails that were generated by WordPress during the upload process.
Alongside this shortcode I put this into the custom field named smoothgallery:

w:400
h:266
l:false
t:true
d:6000

This makes sure that the width and height are set accordingly; that there’re no links to the large versions of the images; that it’s a timed gallery with six seconds between the transitions.

As you can see some options go into the custom field and others go into the shortcode. In case you’re adding the iframe attribute to the shortcode you have to supply all the options that originally went into the custom field in the shortcode; this is due to technical reasons and the way iFrames work.

If I wanted to use an iFrame instead, the above example would become (line break just for readability):

[smoothgallery iframe=1 width=400 height=266 embedLinks=false
               timed=true delay=6000 imgsize=400x266]

The images for the gallery can be imported from virtually anywhere: Flickr, Picasa or a simple folder on your webserver just to name a few. If I wanted to show the images of my photo stream on Flickr I would use this shortcode:

[smoothgallery flickrusername=27834774@N05]

Just showing the photos of a particular set can be done using the flickrphotoset attribute. The same works with albums from Picasa: browse the albums there, copy the corresponding RSS feed and add it to the shortcode with picasaurl.

Confused ?

Are you confused because of all these options, attributes, parameters, shortcuts and shortcodes? Instead of getting angry at all this stuff please just stay relaxed, read the FAQ or add a comment with your problem to this page and I’ll try to come up with a sensible response. If that doesn’t help and you’re still puzzled I may help you out.

Message from Certkiller We offer 642-436 training with braindumps that include custom design templates and other WP themes to help you pass 640-816 exams.

633 comments ↓

« Older comments

Newer comments »

Jeffrey says:

January 26, 2009 at 6:41 am

I’m seeing an error on every one of my pages except the homepage (where the plugin is being used.) I’m not great at troubleshooting the PHP, so I’m hoping someone could give me some feedback… it looks like there’s an issue somewhere in my smoothgallery.php, which I’ve tried reloading to no avail.

The warning is as follows…
Warning: Invalid argument supplied for foreach() in /data/9/1/18/131/1344457/user/1441345/htdocs/accessroad/wp-content/plugins/smoothgallery/smoothgallery.php on line 113
Christian Schenk says:

January 26, 2009 at 8:48 am

Hi David and Jeffrey,
@David: instead of adding a new anchor tag, use the existing one and just change the href pointing to the desired location.

@Jeffrey: it seems like you’ve edited the config.php and changed the insertSmoothGallery function. Make sure that this function either returns false or an array that holds the options for the gallery. In your case the function should return false on each and every page but the homepage.
Nancy says:

January 26, 2009 at 10:39 am

I have two problems. Some of the settings I change in my custom field and others don’t. I am not sure what I am doing wrong. I can change the delay but when I change w/h nothing happens.

Also, how do I get my menus to appear over the top of a gallery instead of under it.

Thanks.
Jeffrey says:

January 27, 2009 at 3:01 am

Thanks so much for your help! I’m trying to learn enough about PHP to work my way through these kinds of issues, but feedback like this really makes a huge difference. The plugin is great and so is the support!
Adam Dunn says:

January 28, 2009 at 10:04 pm

I have 2 questions

1. Is there a way to have the carousel stay open?

2. Is there a way to have the carousel separate from the smoothgallery?
Christian Schenk says:

January 29, 2009 at 2:56 pm

Hi Adam,
there’re a lot of options regarding the carousel but I haven’t played with them yet. If you know JavaScript, have a look at jd.gallery.js lines 77 – 95 and try understanding where these options are used in the script and change them accordingly. In your case I would have a more detailed look at carouselMinimizedHeight and useExternalCarousel.
If you don’t know JavaScript please ask your questions here.
Joh says:

January 30, 2009 at 8:34 pm

Hi

I’m installed your plugin on 2.5.1, but I’m having trouble getting it to work. I activated the plugin and added the custom fields, but still I receive a blank space where the gallery should be. I tried a fresh install without luck.

Any help would be appreciated.
ming yuan hsu says:

January 31, 2009 at 7:54 pm

Hi, I just install this plugin and it works but show up the error message before my the gallery(happen when I put in sidebar)”Warning: Invalid argument supplied for foreach() in /home/itouchtw/public_html/shop/wp-content/plugins/smoothgallery/utils.php on line 169″

how can I fit it ?
Thank you
Kang says:

February 8, 2009 at 11:02 pm

Trying your plugin and got the following error:

Fatal error: Call to undefined function insertsmoothgallery() in C:\xampp\htdocs\wordpress\wp-content\plugins\smoothgallery\smoothgallery.php on line 110
Christiaan says:

February 10, 2009 at 8:03 pm

Bummer, updated to the latest version and it broke. Now I just get the images and the titles as separate static images.

Phew, uploading the previous version fixed it.
Jen says:

February 11, 2009 at 7:26 am

Plugin doesn’t seem to work in 2.7.1
Christian Schenk says:

February 11, 2009 at 7:05 pm

Hi Jen,
I’m running 2.7.1 and as far as I’ve tested the plugin it works fine here. Do you want me to help you? Then please be more specific.
Jen says:

February 11, 2009 at 7:56 pm

Is there a way to make it so it’s compatible with Lightbox 2? I want to use both plugins, but couldn’t. When I have both of them on, lightbox works fine (from what I can tell), but SmoothGallery just keeps displaying the loading bar (frozen?).

I have two SmoothGallery galleries on my blog (different pages). One is just a timed slideshow WITHOUT arrows and carousel — this one is only displaying the loading bar. The other gallery is a timed slideshow WITH arrows and carousel — this one is displaying the loading bar, carousel, and the thumbnails inside the carousel; when I click on the thumbnail, nothing shows.

PS: I’m playing with a custom theme on a WP installed on XAMPP…so can’t show you

PPS: Sorry for the delay, but thank you for the plugin.
Christian Schenk says:

February 12, 2009 at 11:13 am

Hi Jen,

Is there a way to make it so it’s compatible with Lightbox 2?

Lightbox2 uses Prototype which is incompatible with SmoothGallery. Using an iFrame circumvents the problem.
Leo says:

February 13, 2009 at 1:46 pm

Hi!

I’m trying to integrate your plugin. The gallery works, but the shotcuts of options don’t work, I don’t understand why.

An oher thing: the gallery looks good. It’d look better, when it could be set centered with an option (margin:auto or smth). The gallery has got left margin (on my site see here).

Thanks
Leo
Christian Schenk says:

February 13, 2009 at 2:24 pm

Hello Leo,

An oher thing: the gallery looks good. It’d look better, when it could be set centered with an option

That’s a good idea. I’ll consider this for the next release.
Andrew McDonald says:

February 14, 2009 at 10:00 am

Trying to use the options for smoothgallery in the custom field and having problems. Smoothgallery works fine if I just have the custom field smoothgallery with a value of “On”. If I try to add any of the additional options for height and width, smoothgallery does not display. I tried it with both the “On” value present and removed, no change. Removing all options but “On” and smoothgallery displays. Can you provide more examples of the custom field using the options?

Ah, oops, sorry I just realized I wasn’t hitting the “update” button under the custom field. Everything working now!

Actually, showCarousel doesn’t work.
Leo says:

February 14, 2009 at 3:22 pm

Hallo Christian,

I’ve tried to use options shotcuts like w, h, b in the shotcode like [smoothgallery w=600 h=400 b=ccc] without any effect. Only “width”, “high”, “bordercolor” works.

It’d be really nice, when you could provide more examples. It’s not self-understanding, where and how the options have to put in, in the shotcode or in the custom field.

Thanks
Leo
Christian Schenk says:

February 14, 2009 at 5:28 pm
Hello Andrew and Leo,
@Andrew:

Actually, showCarousel doesn’t work.

That’s true if you’re using the shortcode. This happens because the shortcode doesn’t include thumbnails in the HTML markup for SmoothGallery. The simple reason for this is that I haven’t implemented a way to generate appropriate thumbnails or use the ones that may already be somewhere inside the uploads folder. Until I found a nice solution to this, you’ll have to remove the shortcode and manually add the HTML markup with the thumbnails into your content. You can learn how to do this here at the second step; watch out for the img-tags with the class set to thumbnail.

@Leo:
Thanks a lot for your hint that the documentation isn’t explaining this so well. I’ve expanded the section about the shortcut and added some examples that hopeful explain how to use the shortcut along with the custom field. Regarding your problem, you’ll have to add these options to the custom field. This said you would end up with this simple shortcode:
[smoothgallery]
and this inside the custom field:
w:600 h:400 b:ccc
Indeed, if you want a SmoothGallery inside an iFrame, by adding iframe=1 to the shortcode, you would have to add the attributes that went into the custom field to the shortcode; this is due to the way iFrames work.
Jane says:

February 15, 2009 at 12:56 am

I’m having trouble controlling the size of the image. I want to use the WordPress medium size with the slideshow, but can only get it to work with the full size.
David Stembridge says:

February 15, 2009 at 2:42 am
Thanks for the expanding shortcode section Christian, I am just on the verge of really figuring it out! Here’s a couple examples:

1. If I add the following shortcode to my post: [smoothgallery iframe=1 width=585 height=392 timed=true delay=9000 fadeDuration=500 showArrows=false showInfopane=false embedLinks=true] and attach 3 images using the image uploader, nothing shows up on this test page.

2. If I use the shortcode [smoothgallery] and add a custom field with the following:
w=585 h=392 t=true b:fff d=9000 fadeDuration=550 a=false i=false l:true
here, the SmoothGallery seems to work.
Christian Schenk says:

February 15, 2009 at 2:17 pm

Hi Jane and David,
@Jane: you are using the shortcode? Have you tried adding the imgsize attribute? Or are you editing the HTML markup for the SmoothGallery yourself? Just make sure that the various img tags point to the medium sized images.
@David: I haven’t had a detailed look at the SEO Title Tag plugin but it seems that it somehow interferes with the process of generating the iFrame. The markup for the iFrame seems to be alright but there’s no sensible content inside it.
Chris Chong says:

February 16, 2009 at 2:53 am

I love the plugin, but for some reason it kills my drop down nav menus? any ideas?
Christian Schenk says:

February 16, 2009 at 8:19 am

Hi Chris,
the website you provided uses jQuery that’s incompatible with SmoothGallery. Have you tried using an iFrame instead?
Leo says:

February 16, 2009 at 10:46 am

Hi Christian,

thank you very for explanations and quick answer. Your plugin with smoothgallery is great thow there are many competitors for a WP gallery plugin.

Just keep your code XHTML-valid and a good documentation is very important. I’d even try to revise the text on this page – less is more, i mean an article is easear readble with a good structure, less text, more examples and a full explained list of the options. Let read and estimate somebody this page who doesn’t know your plugin.

Videos is a good idea, but my expereance with watching such videos: It takes too much time and it’s a litle boring.

Last I have even problems with the options shortcuts (f.e. w, h, b – they don’t work) within shortcode. Don’t they work in the shortcode?

F.e. [smoothgallery iframe=1 w=600 h=400 b=ccc].

Anyway, you’ll get five stars from me.

With regards
Leo
Christian Schenk says:

February 16, 2009 at 4:56 pm
Hi Leo,

Don’t they work in the shortcode? F.e. [smoothgallery iframe=1 w=600 h=400 b=ccc].

This won’t work in the current version, but I’m looking forward to add this in the next release. So for the moment you’ll have to write:
[smoothgallery iframe=1 width=600 height=400 bordercolor=ccc]
(Line break just for readability).
David Stembridge says:

February 16, 2009 at 5:13 pm

Hi Christian,
I noticed after adding 2 posts to my site, which are displayed on the front page, the smoothgallery function stops working. o, I am wondering if there may be something else in addition to the SEP Titletag plugin, which is now disabled.

I haven’t switched to using shortcode there yet, because I noticed on this test page: http://www.greenpeas.us/test-4/
where I have used the shortcode: [smoothgallery iframe=1 width=585 height=392 timed=true delay=9000 fadeDuration=500 showArrows=false showInfopane=false embedLinks=true]

that it seems to display thumbnails rather than the full image. Not quite sure how to adjust this. Any ideas there?

Thanks! -5 stars from me as well
Christian Schenk says:

February 16, 2009 at 5:25 pm

Hi David,

it seems to display thumbnails rather than the full image

This is a flaw in the current version and you’ll have to add the imgsize attribute to the shortcode.

5 stars from me as well

Thank you and everybody else for this great feedback! I’ll try to keep up the great work. Imagine: I just reached over 1500 lines of code for this plugin, that’s a lot of functionality and I’ve created all this just in my spare time.
David Stembridge says:

February 16, 2009 at 5:42 pm

One additional note: on my test page 3:
http://www.greenpeas.us/test-3

the above comment February 15, 2009 at 2:42 am is working; but adding links to the images within the media uploader doesn’t work. It is tagged with l:true

Any ideas on that?

Once I figure out which method works best for my theme, I’ll implement that on the front page (currently just using custom fields)

Thanks
David Stembridge says:

February 16, 2009 at 5:45 pm

How do I need to add the imgsize attribute to the shortcode?

Will this just replace the current dimensions?

like instead of: width=585 height=392
use imgsize=585×392 ?
David Stembridge says:

February 16, 2009 at 7:12 pm

OK, this worked on test page 4:

[smoothgallery iframe=1 width=585 height=392 imgsize=585×392 timed=true delay=9000 fadeDuration=500 showArrows=false showInfopane=false embedLinks=true]

It does not seem to embed links though. I went into add media, opening each of the 3 images and added links, and then saved all changes, and updated the post. It still just points to the full size image, rather than the link. It does not keep the link however, after saving changes, if I reopen the image, the link I added is gine… perhaps a wordpress issue?

Do I need to modify the generated code within the SmoothGallery field at the bottom of edit page?
Christian Schenk says:

February 17, 2009 at 4:02 pm

Hi David,

… perhaps a wordpress issue?

It’s possible that you’ve found a bug here, but I’ll have to investigate this further. Sorry, but I can’t say much about this right now.

Do I need to modify the generated code within the SmoothGallery field at the bottom of edit page?

No, that’s just meant as a starting point if you don’t want to use the shortcode but insert the markup manually into your content. Instead of writing everything from scratch this should get you started quickly.