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 ↓

  • Hi Leo, Poser,
    @Leo: this might be a bug in the plugin and I’ve put this on my todo list to investigate it further. Unfortunately, I can’t tell when this will be fixed.
    @Poser: with some changes the plugin could make use of timthumb and would be ready scaling the images. It has been a design decision not to include such a feature in the plugin but I’ll definitely consider this for a future release.
  • Aernout says:
    Hi Chistian,

    Can you help me sort out a problem I suddenly started having? I made a site off-line, everything went perfect. After uploading it to go test-live, somehow the plugin fails. When I check the content of the frame with Firebug, it appears the body remains empty…

    http://storycatcher.info/test/wp-content/plugins/nextgen-smooth-gallery/nggSmoothFrame.php?galleryID=2&width=690&height=600&timed=&showArrows=1&showCarousel=1&embedLinks=&delay=9000&defaultTransition=fade&showInfopane=1&textShowCarousel=take%20your%20pic&showCarouselOpen=1&margin=&align=

    Any idea what could cause this to happen, and how I can fix it?

    Thanks in advance!
    Aernout

  • Aernout says:
    I found the solution to the problem described above: it was caused by a migration, which led to wrong paths in NextGen Gallery. I re-installed that plugin, and now all is back to normal… :-)

    Another quick one: is it possible to make the Slideshow inside the Widget clickable?

  • Hi Aernout,
    please have a quick look at this item in the FAQ.
  • Hi Christian,
    Suppose I have a page, with a smoothgalley using shortcode and want to add an additional image that doesn’t end up in the smoothgallery. Is there a means of excluding an image from showing up in the rotation?
    Thanks!
  • Hi David,
    unfortunately, there isn’t an option to exclude images from the gallery yet. A simple but effective workaround would be instead of uploading the special image – that shouldn’t appear in the gallery – to the given post or page, upload it simply via the media library – this way my plugin won’t pick up the image since it isn’t attached to the current post or page. Adding the special image to the post or page is still easy: click on the insert image icon and select it from the media library.
  • Echo says:
    If you’d like to use Flickr make sure to supply your API key (FLICKR_APIKEY) and secret (FLICKR_SECRET) as well.

    what is an API KEY, and flickr secret? thanks.

  • Hi Echo,
    please have a look at the Flickr documentation. You can learn the ins and outs of the Flickr API there and you’ll learn what an API key, secret and whatnot is all about.
  • Hi Christian,
    Setting up a new “sister site” for one that I have a gallery running on, shortcode s being used on a page with dimensions of width=576 height= 432
    The images I noticed using firebug are being re-sized to 576 x 288…. where do I need to look for the place to adjust that incorrect height?
    Thanks! David
  • Sebastian says:
    hallo christian,

    das plugin “TimThumb Vulnerability Scanner” hat in deiner resizer.php problematischen code nach dem juengsten hackerangriffen gefunden nachdemzufolge damit hacker zugang zur seite bekommen. magst du das vielleicht korregieren? dann können wir alle schnell die neue sichere version kopieren. danke dir.

  • Christopher Scott says:
    Is there a way to link images already contained in media library to the post page so that smoothgallery picks them up as being linked?
  • Mats says:
    I have enabeled the carousel and it appears as it should but the thumbnail containers are empty, there is no pics/thumbnails there. How can I solve his? I have made the cache folder writable and I changed the generate thumbnail code in the config.php to true.
  • Hi Sebastian, Christopher, Mats,
    @Sebastian: the current version of the plugin (1.15.2) comes with the most recent version of TimThumb which shouldn’t be vulnerable to any security issues the mentioned plugin found.

    @Christopher: you can use the attribute id followed by a post ID in the shortcode to tell the plugin to use the images attached to the given page/post instead of the current one. If the images simply aren’t attached to a post, attach them to the current post or a page/post of your choice.

    @Mats: in these cases check out the HTML code generated by the plugin and search for the img tags pointing to the thumbnails. Open these links and make sure that a thumbnail is returned. Most likely a certain error message is returned and you should be able to fix this. If you simply get a blank page ask your hosting company whether they’re using the Apache webserver and enabled mod_security, it’s likely that this module blocks the links used to resize the images for the carousel.

  • Seb says:
    Hi Christian thank you for your great plugin.
    My question is how do I alter the z-index of your gallery so that my fixed navigation bar can remain at the top most when I scroll the site. At the moment your gallery obscures the fixed bar. I can’t see what I need to alter.

    Thanks again in advance.

  • Hi Seb,
    please do a Google search for this issue because it has been solved here or there.
  • [...] Download: WordPress SmoothGallery Plugin Plugin Homepage: WordPress SmoothGallery Plugin [...]
  • Mauricio Roa says:
    Hi Christian:

    Thanks for your work! I have read several users asking for a resize capability. Even if wordpress have one, I’m using Picasa web albums with some large pics, and need this feature, as I cannot resize all the fotos on Picasa and, correct me if I wrong, Picasa only has one thumbnail size that the plugin is ignoring. I think if you add that, your plugin will rocks on the Picasa/Wordpress users!

  • Mauricio Roa says:
    Christian: After looking some examples of Shashin plugin, I found the parameter in Picasa that permits resize the image on the fly, called imgmax. So, the problem is solved. Maybe you can update your documentation on the picasaweb section and tell this little tip to other PicasaWeb and SmoothGallery users. This parameter will resize the image coming from Picasaweb album to fit on the frame of SmootGallery. An example follows:

    [smoothgallery iframe=0 width=640 height=480 embedLinks=false
     timed=true delay=6000 bordercolor=fff imgsize=640x480
     picasaurl=https://picasaweb.google.com/data/feed/base/user/puntaitata/albumid/5271971015774168305?imgmax=640]

    Great work, Christian!

  • Hi Mauricio,
    I added your information above into the Picasa section – thanks for the research.
  • Tom Ranson says:
    After reading all this I am still not sure how to display several galleries on the same page. I have two sets of photos that I want to display in two separate galleries on the same page. Putting in the shortcode for a second time doesn’t display a second gallery and further photos added just go into the original gallery. Can you help?
  • Hi Tom,
    this is how you do this:

    • upload the first set of photos to a page
    • upload the second set of photos to another page; this may be just a placeholder, you don’t necessarily have to publish it.
    • insert the shortcode on, e.g., the first page, use the attribute iframe=1 and adjust the gallery to suit your needs.
    • insert the shortcode once again, use the attribute iframe=1 again and add the ID of the second page to the shortcode, e.g. if the page ID is 42 you’d add id=42 to the shortcode.

    This way you’ve got two independent galleries. Adding images to the galleries is as easy as uploading them to one of the two pages you created.

  • Tom Ranson says:
    Thanks a lot Christian, I’ll be giving this a go.
  • Mauricio Roa says:
    Hi Christian:

    I have updated the plugin some days ago and now I have this problem:

    Fatal error: Call to undefined function get_picasa_images() in /home/granig5/public_html/wp-content/plugins/smoothgallery/utils.php on line 420

    Do you have some idea about the solution for this problem?

    Thanks in advance!

    Regards & Happy New Year,

    Mauricio.

  • Sylwia says:
    Hi, thanks for the plugin.

    I’d like to use it to show Flickr images, but I can’t find out how to make them large. I mean really large like 1000px wide.

    Thanks for your help!

  • Hi Sylwia,
    unfortunately, I don’t know very much about all the details of Flickr. That said, I can’t tell how to grab the large image. My best idea would be to create the SmoothGallery by hand, i.e. insert the markup that you can normally find in the SmoothGallery box on the post/page edit screen and change the URLs to the images to the large images on Flickr. As a last resort you might import the images in question into WordPress, attach them to the post/page you’d like to show the gallery on and simply use the shortcode that comes with the plugin; don’t forget to set the dimensions of the gallery accordingly.

Leave a Comment

Hint: consider reading the FAQ before submitting a question.