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

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:

  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.

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.

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. 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]

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.

633 comments ↓

« Older comments
Newer comments »
  • kazclark says:
    July 13, 2009 at 11:51 am
    Ach – my centering has stopped working too! Bizarre. Code is there in custom css but the images no longer centering! http://www.mamanmedoc.com.
    I wonder if something going in between stacked images/thesis/wordpress. Was working and suddenly = popped out of center!
  • Marc says:
    July 20, 2009 at 3:30 am
    Hi Christian,
    I am on WP 2.8.1. and followed all installation steps with smoothgallery. I also tried iframing it, deactivating all other gallery plugins, reinstallation, etc. still, the plugin does not recognise the images i want to appear in the gallery. i put in the shortcode and the front end will only show the added images next to each other. any ideas? thanks for your help.M
  • neil says:
    July 28, 2009 at 8:13 pm
    Great plugin.
    I’m having trouble with one particular theme on one WordPress blog. Clearly there’s some conflict as everything works fine in the default WordPress theme (on 2.8.2), but my own theme results in just the images being placed into the post without any gallery functions being added.

    Any suggestions on where to start looking for whatever is conflicting? I’ve verified it’s not prototype, but am puzzled as to where to look next.

  • SmoothGallery von Christian Schenk says:
    August 5, 2009 at 3:38 pm
    [...] If you are new here, you might want to subscribe to the RSS feed for updates on this topic.Das WordPress Plugin SmoothGallery Christian Schenk ermöglicht es die SmoothGallery von JonDesign auf einfache Weise in das Blog [...]
  • zingzangzung says:
    August 6, 2009 at 8:57 pm
    I have also been having some problems with the plugin on 2.8.2, and 2.8.3. The plugin worked fine on my localhost using xampp, but since uploading to my LAMP server results in the following errors (debug set to true).
    with iframe:no images, an nternal server error, and error message –
    Notice: Undefined index: id in myserverinfo/wp-content/plugins/smoothgallery/utils.php on line 421
    Using without iframe results in no images (though they did appear in the post once and you can see the title of one), no internal server error, and error message – Notice: Undefined variable: markup in myserverinfo/wp-content/plugins/smoothgallery/utils.php on line 215
    This is happening in the default theme as well as my own. Any help or suggestions would be much appreciated.
  • Marc says:
    August 8, 2009 at 9:55 am
    This Plugin is great. I missing a adminpanel for the plugin how i use to integration on my posts. This with the tags is okay but a panel is greater…

    greez

  • Wordpress Photogalerie says:
    August 8, 2009 at 10:19 am
    [...] möchte ich an dieser Stelle empfehlen. Und zwar das von Christian Schenk. Das Plugin heißt SmoothGallery  und lässt sich per Shortcuts (Tags) steuern und auf die Page oder im Post [...]
  • Marc says:
    August 8, 2009 at 10:28 am
    Super Tool.. Könnte aber für den Adminbereich noch etwas bestückt werden. :)
  • Tammy Hart says:
    August 11, 2009 at 7:57 pm
    I have followed your instructions exactly, and it’s not working. I’m not sure what’s going on, because i’ve installed this script manually before (like on my portfolio site) and it works fine, but i haven’t been able to to get it to work on this site at all, with the plugin, or just manually, not even with their demo code! I’m about to pull my hair out, perhaps with a fresh set of eyes, you might notice something i’ve done wrong? thanks here’s the link: http://tammyhartdesigns.com/wpmediabook/the-title-of-a-post-goes-here/
  • Debbie says:
    August 12, 2009 at 10:41 pm
    I’ve installed SmoothGallery on this page: http://www.redkitecreative.com/projects/getborn/

    I can’t see what I’ve done wrong – I added three images to my page, added this to the content area: [smoothgallery imgsize=586x460], and added the smoothgallery custom field with these options:

    On
    w=460
    h=586

    Why are my images not being shown as one gallery?

  • Christian Schenk says:
    August 12, 2009 at 11:05 pm
    Hi Debbie,
    you’re using incompatible JavaScript frameworks – like jQuery or PrototypeJS – on the same page. Using the iFrame feature should fix your problem.
  • Debbie says:
    August 14, 2009 at 11:26 pm
    Working pretty well now, but I have two questions about my gallery which you can see here:

    http://www.redkitecreative.com/projects/getborn/

    1) How do I get rid of the iframe scrollbar areas?

    2) I’ve set a custom link for each image, but the link is displayed in the iframe. How do I go directly to another page and break out of the iframe?

  • Christian Schenk says:
    August 15, 2009 at 8:13 am
    Hi Debbie,
    1. you can either use CSS (hint: “overflow: hidden“) to fix this or enlarge the iFrame a bit with the parameter ADD_PIXELS_TO_IFRAME; the latter can be found in the file config.php.
    2. you’ll have to adapt the JavaScript. Open the file jd.gallery.js in the plugin’s directory under scripts and do a search for “makeLink: function“. Change the following three lines to this:

    this.currentLink.setProperties({
  href: this.galleryData[num].link,
  title: this.galleryData[num].linkTitle,
  target: '_parent'
})

    This makes sure that the link opens in the parent window, i.e. not inside the iFrame. If you’d like it to open in a new window or tab replace parent with blank.

    By the way, you can adjust the background color of the iFrame with iframebgcolor.

  • Debbie says:
    August 16, 2009 at 6:38 pm
    Excellent – thanks for all your help. It looks great.
  • pr0wn3r says:
    August 20, 2009 at 4:11 pm
    Hey,

    I tried using SmoothGallery as a widget in WordPress…i get this message everytime i add a picture:

    Forbidden

You don't have permission to access /wp-content/plugins/smoothgallery/smoothgallery.php on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.2.11 (Unix) mod_ssl/2.2.11 OpenSSL/0.9.8i DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at http://www.bumpped.com Port 80

    I also get this when i try to add to a post and put iFrame=1.
    If i don’t put the iFrame…nothing happens…no SmoothGallery is on :s

    here’s the code i used in the post: [smoothgallery imgsize=400x266]

    And i added a customfield like this:
    Name: smoothgallery
    Value: On and infoPane:true

  • Christian Schenk says:
    August 21, 2009 at 8:56 am
    Hi pr0wn3r,
    this doesn’t seem to be a problem with the plugin but your webserver’s setup. Try to allow the execution of scripts under wp-content/plugins and everything should be working fine.
  • Doug Smith says:
    August 22, 2009 at 7:18 am
    I would like to show a SmoothGallery on my home page. The problem is that it is not an actual page, but WordPress displaying posts using the appropriate page template. So there is note home page to insert the shortcode.

    Two questions as I try to make this work:

    1. Can I insert a function in my page template instead of using a shortcode?

    2. Since no actual home page exists, can I pull photos from another page by its ID if I upload them to that page?

    Thanks

  • Christian Schenk says:
    August 22, 2009 at 7:59 pm
    Hi Doug,
    have you already had a look at this page? It should help you to implement a SmoothGallery anywhere in your theme and the plugin should assist you to do that, e.g. at least generate the CSS/JavaScript for you.
    To answer the second question: yes, you can pull the images from any post/page into the gallery. I recommend adding a sidebar to your theme, using the SmoothGallery widget and setting the ID in the options of the widget to the post/page in question.
  • Itamar says:
    August 25, 2009 at 2:10 am
    Hi guys,
    I’ve installed the plugin, working great as I need a very basic carousel. I’ve managed to put the options I want. However haven’t been able to control the timing between the images. Have tried values form 1000, 6000, 9000 to 20000. They all look the same. Any ideas??
    Theses are the values I’ve used in my field -
    h:400
    w:800
    showInfopane:false
    showArrows:false
    timed:true
    delay:2000
    embedLinks:false
    border:false
  • Genevieve says:
    August 28, 2009 at 2:11 am
    Hi Christian,

    I love this plugin, thank you. One thing I’d love help on is figuring out how to implement multiple gallery sets–I’ve seen your instructions on how to do multiple galleries on one page, but I’m actually trying to do multiple galleries within the same iframe. I see on JonDesign’s site that it’s possible, but don’t know how to make it work in the WordPress plugin. The reason I need to do it this way (rather than having multiple pages for different galleries) is that it’s for a photographer who wants music to play on her site, so I’d like to autoplay audio but not have the song reload when each different gallery is clicked.

    thanks!
    Genevieve

  • Christian Schenk says:
    August 28, 2009 at 10:37 am
    Hi Genevieve,
    the plugin doesn’t support gallery sets yet; although this is on my todo list I can’t promise to finish this any time soon.
    I’m sorry that you can’t use the plugin for this task. I suggest that you manually add the gallery set to your site; the howto can be found here.
  • Adel says:
    August 29, 2009 at 11:30 am
    Hi, I’m having a prblem with the image sizes showing as indicated below. Do I need to upload the images with the size below in order for it to show properly?
    [smoothgallery iframe=1 embedLinks=false
    timed=false delay=600 imgsize=500x400]
  • Christian Schenk says:
    August 30, 2009 at 3:55 pm
    Hi Adel,
    the parameter imgsize just selects the right images from the set of images, generated by WordPress during the upload process. So yes, you have to upload the images with the appropriate sizes because the plugin won’t resize the images in any way; this should be done manually by you or automatically by WordPress.
  • Adel says:
    August 30, 2009 at 4:39 pm
    Thanks Christian, that’s what I did. Great plugin!!
  • nina says:
    September 1, 2009 at 11:21 am
    hi!
    ich hab ein kleines problem. ich hab, denk ich, alles gemacht wie beschrieben. nur erscheint nur einmal kurz ein bild, dann verschwindet es und es erscheint nur der titel!
    wp version 2.8.3 und php Version 4.4 (kann es daran liegen? denke aber nicht!).
    sorry, mein englisch ist nicht seht toll, daher auf deutsch :-)
  • Genevieve says:
    September 6, 2009 at 4:11 pm
    Hi Christian, Just wanted to thank you for letting me know that smoothgallery was in fact working with IE on my site–for some reason wasn’t working on my PC and it was keeping me up at night–it wasn’t until you said it was working fine on IE for you that I checked it out on netrender and it was fine. Must have been something funky or a cache issue or something to do with my janky old PC. All is well now and I can finally put this project to bed!
  • Pauline says:
    September 8, 2009 at 11:18 am
    Hi, This is working smoothly. Where do I change the alignment from the left to the right?
  • Pauline says:
    September 8, 2009 at 12:44 pm
    PS: The display box only allows for text above or below it. Is there a way to get the text to run alongside it when the display box is narrower and set to one side of the screen?
    Your instructions and help surpass other plugin developers. Thank you. I’d donate but I don’t use Paypal.
  • Christian Schenk says:
    September 8, 2009 at 12:45 pm
    Hi Pauline,
    open the file jd.gallery.css that you can find in the folder css in the plugin’s directory. The first CSS selector is called #myGallery: add the following on a new line inside the curly brackets:

    float: right;

    You might want to add margin-left: 1em; or something similar too.

  • Looking for ideas for a wedding photography website | onsendesigns.com says:
    September 8, 2009 at 10:08 pm
    [...] – Decided to use SmoothGallery 2.0 for my online photograhy site . Details can be found HERE I will use it in conjuntion with the “How to make your own gallery” php script to allow for dynamic editing (adding/deleting) of images. – How to integrate the SmoothGallery 2.0 into a WordPress blog (will need this for my photo blog) HERE [...]
  • Pauline says:
    September 8, 2009 at 10:23 pm
    Hi, Nothing changed when I added float: right; to jd.gallery.css. Is it because by the title: “Editing smoothgallery/css/jd.gallery.css” , it states “(inactive)” ?
  • Stephanie Leary says:
    September 10, 2009 at 11:07 pm
    Hi, Christian! I just discovered this plugin and it’s exactly what I’ve been looking for! I have it working here: http://writingcenters.org/gallery/ — except that I can’t get the info pane to show up. I’ve tried turning it on explicitly in the shortcode — [smoothgallery showInfopane=true] — and the heading and paragraph tags do appear in my HTML, but they’re not being displayed. When I view your example gallery on this page in Firebug, I can see a div with the ID slideinfoZone that contains the captions. That div does not appear in my gallery. Is there something else I have to do to enable it?

Leave a Comment

Hint: consider reading the FAQ before submitting a question.