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 »

kelly says:

August 21, 2010 at 8:07 pm

thanks! it was the head/footer thing… THANK YOU!!!
marco says:

August 22, 2010 at 6:40 am

Still does not resize larger images.
Worthless.
Christian Schenk says:

August 22, 2010 at 12:39 pm

Hi Marco,
this plugin doesn’t resize images because WordPress can do this for you. Just go to Settings – Media, adapt the dimensions for medium or large images, use the imgsize attribute in the shortcode and the gallery will use the scaled down versions of your images instead.
This doesn’t necessarily make the plugin worthless but you just have to use the features already provided by WordPress.
marco says:

August 22, 2010 at 10:21 pm

But I don’t want all my images resized to 400×400 throughout all the multitude of galleries I have outside the plugin. I just want to use this plugin for one entry, that is all.

In other words, I guess I’m a noob and I need to know how to use the imgsize attribute inside the code. when you push “generate code” shouldn’t it already be incorporated?
Scarlet Duba says:

August 25, 2010 at 8:56 pm

How do I simply change the black background to white or gray?
I don’t see the css files for smooth gallery anywhere. thanks in advance for your help.
I’m in wp 3.0.
Christian Schenk says:

August 26, 2010 at 2:13 pm

Hi Scarlet,
if you’re using the iFrame feature, you can simply set the background color with iframebgcolor in the shortcode; you can read more about that above. If you prefer editing the CSS files, you can find them in the plugin’s directory in the css folder.
15 wordpress slide show plugins for featured articles on home page - Hyperblue's Blog says:

October 21, 2010 at 8:22 am

[...] Download: WordPress SmoothGallery Plugin Plugin Homepage: WordPress SmoothGallery Plugin [...]
lucy says:

October 27, 2010 at 10:03 am

Hi Christian. I am enjoying the plugin very much. One potentially stupid question. For the simplest slideshow, I add my images to the post, and enter the shortcode, then /delete/ the actual images when I am finished? Er, otherwise I have a page full of the images /and/ the slideshow. If so, is their a visual way to reconstruct the slideshow order after that point?
Thanks for your hard work.

Lucy
lucy says:

October 27, 2010 at 11:48 am

Oh sorry, I see now, it’s that’s slightly odd “gallery attached to a post” wordpress thing. It’s all working for me, I just need to muck around it with it some more until I understand. Thanks!
Christian Schenk says:

October 27, 2010 at 12:58 pm

Hi Lucy,
it’s great to hear that you got this working by yourself. Basically, you just have to upload the images but don’t have to add them to a post: the shortcode will do this for you, generating the slideshow.
David Stembridge says:

November 17, 2010 at 5:36 pm

Hi Chris,
is here a shortcode method for disabling smoothgallery on a particular page? I am trying to get lightbox working on this page (http://www.greenpeas.us/church-planting-in-ukraine/), and it seems to want to use both.
Thanks! David
Christian Schenk says:

November 17, 2010 at 11:12 pm

Hi David,
I’ve just checked the page and SmoothGallery isn’t included on that page. In fact, it isn’t active on any page by default if you don’t manually activate it. The lightbox effect is working just fine on my end.
David Stembridge says:

November 18, 2010 at 5:16 am

Thank you Christian, it just seems to be replicating itself, I thought it may have been smoothgallery; thanks for the confirmation though!
David Stembridge says:

November 19, 2010 at 12:01 am

Hey there Christian, figured my issue out… perhaps this may help someone else troubleshoot an issue! I use the plugin pb-embedFlash for playing flash videos, and there was an option:
“Load Shadowbox by default even if there is no flash content displayed, e.g. to make it available for gallery plugins? ”
I disabled that, and all is well! Flash videos, lightbox 2, and smoothgallery are all working fine, and dandy!
Philip says:

November 21, 2010 at 6:20 am

Adding the iframe option does not work correctly in my frame. I simple see the iframe structure but there is nothing populated into the iframe header and body – surely you need to reference the relevant CSS and JS in the iframe body yo call the smoothgallery option to make it work ?

Thanks
Data Wrangler says:

December 4, 2010 at 4:20 am

Awesome plug-in Christian, thanks for making it available.

I am trying to find a listing of “all” options and not having a lot of luck.

For starts I want to change the color and font of the panel that slides over the image. I was able to change the opacity using:
slideInfoZoneOpacity: 1.0

Do I have to make this change in the css? Or is there an option?

Also I see no current way to exclude some media while including other media, is that true? I want to insert another image into the page … do I have to put it elsewhere to use it without triggering inclusion?

Thanks!
Christian Schenk says:

December 10, 2010 at 3:24 am

Hi Data Wrangler,
basically you can use all of the options that come with SmoothGallery plus a few more. If you want to have a look at them all, simply open the file utils.php and have a look at the first function: it contains almost everything interesting. All that may go into the custom field named smoothgallery or as attributes in the shortcode.
Regarding the inclusion/exclusion of images, you’re right. This feature isn’t implemented right now and you’ll either have to put the image into another post or construct the HTML for the gallery manually; if you want to opt for the latter, there’s a box on the edit screen for a post/page that helps you getting started with the markup.
Data Wrangler says:

December 10, 2010 at 3:54 am

I went ahead and created a private post, added my other photos to that, then included them in this post thus getting the best of both.

Eventually it would be nice if you could check off which photos to included and even assign a sort order for display.

Still awesome plug in. I found the opacity and then found the css that applied the color and got it how I would like it now.

Thanks for the suggestions.
Christian Schenk says:

December 10, 2010 at 4:19 am

Hi Data Wrangler,
one neat trick: the sort order applied to the attached images of a post/page through the standard WordPress gallery will be used in the SmoothGallery as well.
David Stembridge says:

January 4, 2011 at 6:50 pm

New Year Greetings Christian!
I have a wordpress site that uses smoothgallery on the front page, and I changed the size of the photos this morning, and can’t quite seem to get it working correctly.

This is the shortcode I’m using:
[smoothgallery iframe=1 width=500 height= 333 imgsize=500x333 frameborder=0 iframebgcolor=EAE8DB scrolling=yes marginheight=0 marginwidth=0 timed=true delay=5000 fadeDuration=500 showArrows=true showInfopane=false embedLinks=false]

the pictures are all 500×333 (well, a few are 500×375)
I checked display full size in gallery settings.

Any ideas on why it appears that smoothgallery is cropping the images the way it is??
Thank you!
Christian Schenk says:

January 5, 2011 at 1:05 am

Hi David,
a happy new year to you as well
The plugin selected images with a size of 500×198 pixels because this seems to be the dimension that gets as close as possible to the value given in the imgsize attribute. If you’d like to change that you could either adapt the imgsize attribute or tweak the settings in the backend under Settings – Media and change the dimensions of the images there; in the latter case you’ll have to re-upload all the images though.
Remember, the plugin doesn’t crop the images in any way, it’s all about setting imgsize correctly and providing images with the right dimensions in the first place; you don’t have to do the latter manually but could just use the functionality that comes with WordPress which automatically creates various versions of uploaded images with different dimensions.
David Stembridge says:

January 5, 2011 at 1:46 am

Thanks Christian, so…. the images are actually 500 x 333; and since the imgsize attribute is set to the same, I am guessing I need to try the second suggestion. I will try that. I am still a little uncertain where it pulled the 198 figure from though. How did you find that?
Christian Schenk says:

January 5, 2011 at 1:52 am

Hello David,
I’ve just had a look at the markup generated by the plugin for the SmoothGallery and it said that it was using images with these dimensions. I don’t know your exact settings under Settings – Media for the different sizes but I guess you might have put 500 by 198 into the thumbnail section – this way WordPress would create images that are cropped to this exact size, resulting in the images you now have. Again, that’s just a guess.
David Stembridge says:

January 5, 2011 at 1:58 am

OK, What exactly in the media settings do I need to change?
Image sizes?
Embeds?
I am a little confused on what I need to change.
Thank you very much!
Christian Schenk says:

January 5, 2011 at 2:10 am

Hi David,
okay, let me explain. When you upload an image WordPress automatically creates various versions of it for you according to these settings, i.e. a thumbnail version, a medium and a large sized version. This is a convenient way to create smaller versions of an image that either fit into the width of your theme or into a SmoothGallery. Say, your theme or SmoothGallery is only 500 pixels wide. You would, e.g., set the width of the medium size to 500 pixels, making sure that you always end up with a smaller variant of your image that’s just this wide.
If your SmoothGallery is 500 by 333 I would recommend filling these values into the medium size setting. Experiment with these settings and you’ll see that it’s fairly easy and super helpful. Just keep in mind to re-upload your images every time you change these settings.
David Stembridge says:

January 5, 2011 at 3:27 am

Hi again, final update on this…. I increased the size (of my original photo) several times, then started bumping back down as close to my shortcode settings, and it seems to work fine; just giving the appearance of cropping the photo, as you explained. if I resize the photos about 5 pixels larger than my markup, it seems to work fine. So, ultimately, trial and error seemed to work, thank you for the advise Christian!
This is still my fav plugin for wordpress!
tesr « Pornchanok Futsal says:

January 18, 2011 at 9:31 am

[...] Download: WordPress SmoothGallery Plugin Plugin Homepage: WordPress SmoothGallery Plugin [...]
qiaoqiao2009 says:

January 20, 2011 at 6:47 am

hi,chris,i found this plugin doesn’t work with pictures which is stored on external hosts,such as the godaddy hosting space,is any solutions?
Christian Schenk says:

January 20, 2011 at 4:25 pm

Hi qiaoqiao2009,
this might be due to anti hotlinking measures implemented by GoDaddy. If that’s the case there’s not much you could about it but upload the images in question directly to your WordPress blog or ask somebody at GoDaddy to allow hotlinking these particular images.
David Stembridge says:

January 25, 2011 at 8:36 pm

Hi Christian,

when adding a SmoothGallery link; I want to have the target=blank function, and found your note about changing the javascript. I am using smoothgallery 1.15.1 but I am guessing you refer to Jon’s smoothgallery ver. ?

Don’t you have to change the reference to the new beta ver of js somewhere? I could not find the note on that!

Thank you!
David Stembridge says:

January 25, 2011 at 8:40 pm

I found it:
lines 43-46 of config.php file:

#define(‘SMOOTHGALLERY_VERSION’, ”);
#define(‘MOOTOOLS_VERSION’, ”);
define(‘SMOOTHGALLERY_VERSION’, ’2.1beta1′);
define(‘MOOTOOLS_VERSION’, ’1.2′);

had to move the # down the the beta vers. and comment out the others as I have done above!
Christian Schenk says:

January 25, 2011 at 11:38 pm

Hi David,
glad to hear that you were able to fix it yourself. What you’re describing was documented under Activating the development version above.