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 - Bridge

Bergpark - Aqueduct

Wow! That's awesome.

Bergpark - Aqueduct

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:

  1. add a # at the beginning of line 43 and 44
  2. 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:

  1. the JavaScript for SmoothGallery doesn’t interfere with incompatible frameworks like jQuery, PrototypeJS that you’re probably using on your site
  2. 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.

  1. 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.
  2. 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.

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.

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:

  1. under Advanced Options on the edit screen scroll down to SmoothGallery and use the generated HTML markup
  2. 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.
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]

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.

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.

550 comments ↓

« Older comments
Newer comments »
  • Christian Schenk says:
    June 5, 2009 at 10:04 pm
    Hi Daniel,
    the short answer is that I haven’t tested the plugin with Windows and that it doesn’t seem to work.

    I’ve already got this on my todo list but there aren’t that many people who use Windows as a web server and so this issues hasn’t got a very high priority.

    Anyway, as soon as I find the time for this I’ll have a detailed look at it.

  • Damir - Travel Guides says:
    June 11, 2009 at 6:05 am
    Hi!
    This looks great. I have not tried it yet but I have a question: How can I link images to posts on the blog? as seen on this website (http://www.mincel.com/)
    Thanks for your help.
  • Christian Schenk says:
    June 11, 2009 at 8:01 am
    Hi Damir,
    have you read how to add custom links to images?
  • Damir - Travel Guides says:
    June 11, 2009 at 8:11 am
    Hi Christian,

    thanks for a quick response, I will try to implement it on my Wordpress blog in next couple of days and will let you know how it goes. And no I did not read how to part, I missed that. Thanks again.

  • ww says:
    June 15, 2009 at 2:42 pm
    hello, I got mistakes when I upgraded my wp blog to version 2.8, can you update this plugin soon to be compatible with the V2.8?
  • Christian Schenk says:
    June 15, 2009 at 3:14 pm
    Hi ww,
    sure I’m already working on a release that’s compatible with WordPress 2.8. For example: the widget doesn’t work anymore.
  • Paul says:
    June 17, 2009 at 7:01 pm
    Hi Christian

    Thanks for all your hard work on the smooth gallery plugin. It was working perfectly up until we upgraded Wordpress to 2.8, which then resulted in php errors. Realised that there was a new version of the plugin available, which I’ve now installed and it fixes the error, but leaves me with a white, empty iframe where the smoothgalleries used to be.

    I can’t fathom out why this is, and I appreciate you’ve probably been inundated, but can you tell me – are you aware of any problems with WP2.8 and the current plugin and, if so, are you still working on it?

    Thanks in advance!

  • mrben says:
    June 19, 2009 at 12:05 pm
    Hmmm – I went from having the gallery up with recent images, but with no images showing, to upgrading to the latest version of the plugin and having nothing at all showing – the page just displays the [recent-images-box] tag. :(
  • Kim says:
    June 19, 2009 at 4:49 pm
    I am using wp2.8 and I believe newest version of smoothgallery. I posted with a gallery of 4 pictures, great, worked, then put up a new post with 8+/- pictures and now only the new post can you view the gallery, the earlier post does not show the pictures when looking at both on the same page (home). If you look at the posts separately, you can see the appropriate gallery on each post. what 2 do? novice!
  • Kim says:
    June 19, 2009 at 10:55 pm
    I tried the iframe=1 for each of the galleries and they now both work, yeah! I guess I just need to keep reading. thanks.
  • Philip Stark says:
    June 19, 2009 at 11:41 pm
    How do I put the gallery in a Wordpress post (with the shortcode), so it actually hides the images below?
    is there some way of commenting out the images?
    (check out my blog to see what i mean)

    awesome work on this plugin!
    cheerio
    Phil

  • Christian Schenk says:
    June 20, 2009 at 8:35 am
    Hi Kim and Philip,
    @Kim: great to hear that you’ve figured that out ;)

    @Philip: I’ll get in touch via e-mail so we can fix this.

  • Thomas says:
    June 27, 2009 at 10:34 pm
    Can you confirm if this works with wordpress 2.8 or not? I can’t seem to get it to work.

    Plugin enabled, images uploaded and inserted, [smoothgallery] in the content, smoothgallery on in custom field and nothing in the output but a regular gallery

  • Dru says:
    June 28, 2009 at 2:45 pm
    Hi Christian, thanks for your plug in!

    I installed it and it works fine, except on Internet explorer (7), the hover effects for the arrows dont work.

    Any help would be much appreciated, thanks again,

    Cheers,

    Dru

  • Jay says:
    June 30, 2009 at 8:13 am
    Greetings Christian!

    Thank you for a great plugin! I’m no expert so it took me a few tries but I have it up and running. As I finalize the customizing of it, I have 2 questions I can’t seem to find answers to.

    1. Can I/how can I have the thumbnails (carousel) show up on the left side of the main image?

    2. How do you set the carousel to show the thumbnails all the time? showCarouselDefault=true

    Thanks again!

  • Christian Schenk says:
    June 30, 2009 at 8:41 am
    Hi Jay,

    Can I/how can I have the thumbnails (carousel) show up on the left side of the main image?

    Vertically? Not above the images of the gallery? You’ll have to use an external carousel for that. I’m working on an example for this but if you know some CSS and JavaScript just have a look at the option useExternalCarousel and you should be able to figure it out yourself.

    How do you set the carousel to show the thumbnails all the time?

    You can use the following combination to archive this:

    thumbCloseCarousel=false
carouselMinimizedHeight=135
carouselMinimizedOpacity=0.9

    This should do the trick.

  • Jay says:
    June 30, 2009 at 5:21 pm
    Thank you so much! Above and beyond support, donation on its way!
  • Harrison McLeod says:
    July 1, 2009 at 8:48 am
    Hey Chris,

    I need some of the image links to open a new tab. Adding target=”_blank” to the markup doesn’t seem to be working. Any idea how to do this? Thanks

  • Darren says:
    July 6, 2009 at 8:47 pm
    Hi Christian,

    Love the plug-in though I’m using Wordpress 2.8. Just wondered if there’s any info on when there might be a working release of your plug-in for 2.8?

    I’m working on a project that I’d like to launch this month and if there’s any chance of using your plugin for it that’d be great.

    Darren

  • Christian Schenk says:
    July 6, 2009 at 9:28 pm
    Hi Darren,
    have you had a look at this page and read the “Compatible up to” line on the right? Indeed, the plugin should work just fine with WordPress 2.8.
  • Julika says:
    July 10, 2009 at 12:45 pm
    Hello Christian,
    I’ve just upgraded to wordpress 2.8.1 and I got the following message:
    Fatal error: Cannot use string offset as an array in /var/www/vhosts/szepvilagextra.com/httpdocs/wp-content/plugins/smoothgallery/utils.php on line 581
    Could you please help?
    Thank you
  • Tim Johnson says:
    July 11, 2009 at 5:57 pm
    Hey Christan! I’m having a problem with changing the color of the iframe. The short code will not work because I’m embedding the code into my footer.php and not with the WP editor… here is my code…

    $showgallery = ‘[smooth=id:4; width:326; height:129; timed:true; delay:6000; transition:fade; arrows:false;
    info:false; carousel:false; text:xx; open:false; links:false; margin:0; align:center;]‘;
    $showgallery = apply_filters(’the_content’, $showgallery );
    echo $showgallery;

    the iframe is on in the plugin menu… but what do I type to change the color…

    Thanks!

  • kazclark says:
    July 11, 2009 at 7:03 pm
    How do I centre the smooth gallery using shortcode in custom fields? Is it possible?
    Thanks
  • Tim Johnson says:
    July 11, 2009 at 10:19 pm
    Hey kazclark…

    I think the short code is: align=center

  • kazclark says:
    July 12, 2009 at 2:21 pm
    Thanks – unfort did not work; the code at the bottom of the dashboard – where it says:
    “If you want more control over the exact markup for the gallery, copy the following code into your content.”

    Does that go into custom functions?

    Would just like to center the images somehow and wondering if needs to be done via custom css, but not sure how to call the smoothgallery!

    Tried this:
    .myGallery {width: 900px; margin: auto;}

    Didn’t work!

    This plug in rocks by the way; have been looking for something like this and works like a dream! Just can’t center it. Thanks!

  • kazclark says:
    July 12, 2009 at 3:14 pm
    Ok, so I have my gallery and that’s working great. I want to add a line of stacked images underneath the gallery but don’t want them to cycle through with the gallery images. How do I stop images on the same page as images in gallery from showing. This not a two gallery question; I want to add a row of static images under my gallery. You can see the problem I am having here http://www.mamanmedoc.com; the small images keep coming into the gallery! THANKS! Once I’ve cracked this I am done.
  • Christian Schenk says:
    July 12, 2009 at 3:51 pm
    Hi Julika, Tim and Kazclark,
    @Julika: make sure that you’re using the most recent version of the plugin because this particular bug should be fixed in this release.

    @Tim: Wow, I’ve never thought about injecting the iFrame like this – although I haven’t used it this way it seems to be a nice solution. Anyway, you’ve got two options to change the color: one for the border color (bordercolor) of the SmoothGallery and another one for the background color (iframebgcolor) of the iFrame. Just use these and supply a color code without the “#“.

    @Kazclark: the CSS selector for the gallery isn’t a class but an id, so make sure you use #myGallery instead of .myGallery. Open the file jd.gallery.css under wp-content/plugins/smoothgallery/css and just add margin:auto to #myGallery.
    Regarding the other problem that all images are included in a gallery, you may want to filter some images out. This can be done using the (currently undocumented) filter attribute. Say, you don’t want images that have “dontuse” in their name – e.g. picture-1_dontuse.jpg – in the gallery, you’d add filter=dontuse to the shortcode. Rest assured that this simple filtering mechanism will be improved in future versions of the plugin.

  • Tim Johnson says:
    July 12, 2009 at 9:24 pm
    Hey! thanks for the reply… unfortunately it didn’t work… I could have put it in the wrong place but I included it with all my other commands…
    $showgallery = ‘[smooth=id:4; bordercolor=666666; iframebgcolor=666666; width:326; height:129; timed:true; delay:6000; transition:fade; arrows:false;
    info:false; carousel:false; text:xx; open:false; links:false; margin:0; align:center;]‘;
    $showgallery = apply_filters(’the_content’, $showgallery );
    echo $showgallery;

    … do you see any thing wrong…? is there somewhere else I can put it or can I edit your css file? It’s only IE that’s giving me a problem… it look great on every other browser…!

    Thanks!

    Tim

  • kazclark says:
    July 12, 2009 at 11:52 pm
    Thanks – popped this into custom css and worked like a dream, again!
    #myGallery {height: 598px; width: 900px; margin: auto;}

    Will now try the exclusion bit & let you know how I get on; only other alternative I thought of was the iframe and including other images as non-smoothgallery but will try this first! let you know!

  • kazclark says:
    July 13, 2009 at 12:32 am
    Unfortunatley the filer shortcut did not work. I have this:
    [smoothgallery imgsize=900x598 filter=dontuse] and they are still showing up. I popped this into shortcode on page; also tried in cusome field but did not work to excluse the 4 images I wante excluded. Am I putting this bit of code in wrong place? Thanks again!
  • Christian Schenk says:
    July 13, 2009 at 9:59 am
    Hi Tim and Kazclark,
    @Tim: you aren’t using this plugin, right? I guess you want to ask your question here?
    @Kazclark: you’ve renamed your images that shouldn’t show up any more to something with “dontuse”?
  • kazclark says:
    July 13, 2009 at 11:12 am
    Hi – yes, took your example and _dontuse on end of all calls. For instance visit_dontuse.jpg; about_dontuse.jpg etc Also tried taking numbers out of gallery order in hope would trigger it.
    I am putting this into shortcode – is that right place?
    [smoothgallery imgsize=900x598 filter=dontuse]
    Ah – maybe its looking for images of that size with dont use. Will try taking that out ….. nope, no difference.
    Does the image need to be named in specific way?

Leave a Comment

Hint: consider reading the FAQ before submitting a question.