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 »
  • 30 Free Resources for Photoblogging and Image Galleries (Wordpress) « Rich Magazine says:
    February 18, 2009 at 4:26 pm
    [...] 7. WP Smooth Gallery (http://www.christianschenk.org) [...]
  • David Stembridge says:
    February 18, 2009 at 9:09 pm
    I just noticed on the read-me FAQ that it mentions disabling the visual editor do to the div-tags may be replaced with
    p-tags. There’s a plugin here called “Deactivate Visual Editor” which you can add a custom field that says deactivate_visual_editor = true and it’ll disable the visual editor for that post, or page.
    Helpful on the page you are using SmoothGallery with!

    Does iFrame clears this problem up as well?

  • Christian Schenk says:
    February 19, 2009 at 8:47 am
    Hi David,
    thanks for the hint.

    I haven’t verified this again but the Visual Editor used to replace some tags of your hand-crafted markup for the gallery once you saved a post/page. You won’t have any problems if you’re using the shortcode though, no matter whether the gallery will sit inside an iFrame or not.

  • David Stembridge says:
    February 19, 2009 at 2:41 pm
    Very Good Christian. I have seen this happen many times when going back and forth between the visual editor. For now, until there’s a means of getting the link = true to work, I’ll have to use the markup at least on my main page.
    Thanks!
  • sam says:
    February 19, 2009 at 9:04 pm
    Has anyone experienced any problems running this with the featured gallery plugin? it seems to clash?
  • Adam Dunn says:
    February 19, 2009 at 9:37 pm
    Thanks for your feedback before. I was able to get the carousel to be separate from the gallery.

    Is it possible to have a play/pause button? I have read a few posts about this, but have been unable to implement it on my site.

    Thanks.

  • Christian Schenk says:
    February 20, 2009 at 10:45 am
    Hi Sam and Adam,
    @Sam: Do you mean the Featured Content Gallery? Without modification you can’t have two SmoothGalleries on the same page. I would suggest leaving the Featured Content Gallery as it is and using the iFrame feature of this plugin.

    @Adam: Have a look at this post – I think that I can’t describe it much better. But I may help you with that.

  • sam says:
    February 20, 2009 at 11:54 am
    Hi Christian

    Thanks ever so much for the quick help & suggestion

  • WordPress Plugin Spotlight | thephotographer4you says:
    February 25, 2009 at 4:27 pm
    [...] some power in the hands of the digital photographer. I am still trying to figure out how to use the NextGen smooth plugin….I am not sure if it has bugs at this point or is it me? It does require time and patience [...]
  • Adam B. says:
    February 26, 2009 at 4:08 am
    Christian,

    Working the plugin into a custom theme. Installing it on the main page. All is good except it messes with my js. How can I iFrame this or code so the js isn’t effected… (the iframe=1 seems to be no use in my case)?

    Thanks!!

  • Pedro Rebelo says:
    February 27, 2009 at 8:26 pm
    Hi Christian. Before anything else, thank you very much for this plugin. Great work. It convinced me to use SmoothGallery.

    Now, I’ve been making some tests with it to use it on my website and also on a future photo portfolio but I would like to have just a little bit more control that is, what I really would like to have was a list type menu under the image like, photo1, photo2, photo3… That would allow the user to navigate directly to a precise image and would not use thumbs.

    Any idea on how to achieve that?
    Thank you very much.

    p.s. Sorry for the lousy english.

  • Kurt says:
    February 28, 2009 at 3:42 am
    Christian, this looks like a promising plugin for our WP-driven news site. We want to replace the Flash image rotation (of news stories) we currently have due security issues with Flash. However, I am limited in my programming skills; I am a web designer, editor and writer, not a programmer. I tried to get this to work with iFrame but was unable to do so, more than likely because I missed something. Can you recommend somebody to implement this? We have an oDesk account and occasionally use programmers there. Is there somebody you might recommend on oDesk capable of implementing this plugin? We’d be happy to pay to get this plugin working on our site.
  • Christian Schenk says:
    February 28, 2009 at 5:41 pm
    Hi Pedro and Kurt,
    @Pedro: have you already had a look at the FAQ where it says how to jump between images? If you know JavaScript it should be no problem to integrate this into your site.
    Anyway, I’ll integrate this into the next release ;) So stay tuned.

    @Kurt: the iFrame feature in the current release contains some bugs, so more likely than not it wasn’t your fault but the plugin malfunctioning. I’ll write you an email – maybe I can help you figuring this out.

  • Pedro Rebelo says:
    March 2, 2009 at 4:52 pm
    Thanks for your fast reply Christian. Well, as Kurt I’m more a designer, editor and writer than a programmer. I will with no doubt wait for your next release…
    Anyway, once again, thank you very much for your hard work.
  • hal jurcik says:
    March 3, 2009 at 7:01 pm
    I cant quite get your plugin to function. I’m on 2.7 and there is not a key field in the custom field setting.

    I’ve tried inserting the [smoothgallery] shortcode into the post but all it does is make a copy of each image. Now I have two copies of each image but no slide show functionality.

  • Christian Schenk says:
    March 3, 2009 at 7:25 pm
    Hi Hal,
    if you’ve never used the custom field smoothgallery before you’ll have to add a new one. To do this scroll down to Custom fields on the post/page edit screen, under Add new custom field click on Enter new, enter smoothgallery in the input field along with just On to use the defaults or some options.
    If you don’t do this the JavaScript and CSS won’t be inserted and the SmoothGallery won’t work – you’ll just see the images as-is.
  • cotton says:
    March 4, 2009 at 12:32 pm
    Thanks for all the info here. the plugin works perfectly for me. I am struggling with one customizing issue. I have googled it and found some answers but it does now seem to work. I am trying to display the thumbnails outside the image, i.e. not as a drop down box but always show the thumbs at the bottom and the large image at the top. I would really appreciate any advice on this…
  • wayne says:
    March 5, 2009 at 8:32 am
    I can’t get the carousel to even show up. I have tried everything in your suggestions. As far as your videos don’t waste your/my time they are too out of focus to see anything. I suggest you take some time and go buy Camtasia if you are going to make helpful videos to support your software. Heres a link to my page… check it out if you would. Thanks.
  • Christian Schenk says:
    March 5, 2009 at 9:27 am
    Hi Wayne,
    please read what I wrote Andrew in this comment, maybe that helps you to figure it out.
    BTW: thank you for the harsh critic on my videos – I’ll redo them as soon as I can.
  • wayne says:
    March 5, 2009 at 7:36 pm
    Christian,
    I did all the code inserting, updating, downloading you said and it is still not working. I have spent a lot of time on this I have better things to do. If you can take another look at my link and maybe give me your thoughts? I will try a little more. I will try what you reply but that’s it. I have got too many hours into this with no progress. Thanks.
  • sam says:
    March 10, 2009 at 5:28 pm
    Hi Christian

    it’s all working beautifully thank you so much for doing this! A couple of quick questions – can you let me know where to alter the font type please, I am guessing one of the style sheets and is it possible to play it only 1 rather than have it on a loop?

  • Christian Schenk says:
    March 10, 2009 at 6:49 pm
    Hi Sam,

    can you let me know where to alter the font type

    Open the file jd.gallery.css that you can find under wp-content/plugins/smoothgallery/css, search for the CSS selector .jdGallery .slideInfoZone h2 or .jdGallery .slideInfoZone p. There you can change the font for the title and description respectively.

    is it possible to play it only 1 rather than have it on a loop?

    Sure, but like the font type above this isn’t configurable either. I guess you’ll have to change the goTo function (jd.gallery.js line 260) in a way that it won’t jump to the first image once it has reached the last one. I’m sorry but I haven’t got the time to do this right now.

  • sam says:
    March 10, 2009 at 6:53 pm
    thank you :)
  • Edwin says:
    March 11, 2009 at 2:22 pm
    Simply great stuff and exactly what I needed. 1 thing: how do I alter the order of the images áfter I’ve uploaded them? Or how does the ordering work, as in: which one’s shown first?
  • Christian Schenk says:
    March 11, 2009 at 3:18 pm
    Hi Edwin,
    although this isn’t totally random, the plugin lacks the feature to order the images. That said the following worked for me so far: upload the first image first, then the second one and so on. This way they’ll appear just the way you’ve uploaded them. If you’re using the Flash-Uploader you don’t have to upload the images one after another but just name them like image-1.png, image-2.png, etc. – they’ll be uploaded in the right order; at least it worked for me.
    I’m looking forward to use WordPress’s built in feature for ordering images. This will make things a bit easier.
  • netze says:
    March 12, 2009 at 8:41 pm
    Hi, nice plugin :-)
    Is it possible to show all uploaded post-images in a gallery on a separate page (gallerypage)?
    Thanks for your answer
  • Scott says:
    March 12, 2009 at 10:49 pm
    Hi there, I’ve installed smoothgallery on my website, but the images only show once I click on the image inside the frame. Is there any way to fix this?
  • DanP says:
    March 12, 2009 at 11:53 pm
    Hi Chris,

    Is it possible to have the info zone on the gallery activate on mouseover, rather than automatically appearing?
    Thanks. Dan

  • Christian Schenk says:
    March 13, 2009 at 10:30 am
    Hi netze, Scott and DanP,
    @netze: of course, you don’t have to upload your images twice. Just put the shortcode on your gallerypage along with the attribute id. Say the page you’ve uploaded the images to has got the ID 4711 then you would use this shortcode [smoothgallery id=4711].

    @Scott: there’re two things that come to my mind:

    1. don’t use an iFrame but make sure that you don’t use any conflicting JavaScript frameworks (like jQuery, PrototypeJS) on the page with your SmoothGallery. This way you can use ReMooz too.
    2. set the border color to match your background color and make the iFrame just as large as your large images. This way you won’t notice that the SmoothGallery sits inside an iFrame. But keep in mind that you can’t set the size of the iFrame to an arbitrarily high value, since it must fit into your site’s layout.

    @DanP: sure, but you’ll have to add some extra JavaScript. Since this is a very special request, I’ll send you more details in an e-mail.

  • Scott says:
    March 13, 2009 at 10:53 am
    @Christian: unfortunately, there’s nothing I can do about the conflicting frameworks thing – our theme uses jquery…
  • cotton says:
    March 13, 2009 at 2:32 pm
    Hi I am trying to figure out how I can add the code for smootthgallery so it is automatically visible, i.e. so I dont have to insert the short code into each post or page. What code should I insert into the template. I followed the video tutorial but there it shows how to display the smoothgallery if one is on a certain page. i would like to figure how it would always be visible.

    many thanks for a great plugin

  • Christian Schenk says:
    March 13, 2009 at 6:54 pm
    Hi cotton,
    make use of WordPress’s Conditional Tags and the function insertSmoothGallery. Instead of using is_page with the parameter pointing to a specific post you might want to use is_page and is_single without any parameters instead. This way you’re able to include the CSS and JavaScript for SmoothGallery on each and every post/page.
    BTW: have you read this?

Leave a Comment

Hint: consider reading the FAQ before submitting a question.