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:
    September 11, 2009 at 12:28 am
    Hi Stephanie,
    it seems like you’ve manually added the JavaScript for SmoothGallery to your site’s header, i.e. you theme’s header.php. The JavaScript snippet sets showInfopane to false – try changing that to true.
    Normally you don’t have to add any CSS/JavaScript to your them because the plugin will do this for you. Another thing: if you aren’t using the iFrame feature you’ll have to put the options – showInfopane=true in your case – into a custom field called smoothgallery.
  • Tom says:
    September 11, 2009 at 5:00 am
    Looks like a great plugin! Please tell why I get the following error (I am attempting to link to my Picasa Web Album and show this photos on a page).

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /nfs/c01/h04/mnt/44908/domains/saintjoelacrosse.com/html/wp-content/plugins/smoothgallery/extra/picasa_rss.php on line 33

  • Christian Schenk says:
    September 11, 2009 at 7:45 am
    Hi Tom,
    are you still using PHP4? The code for Picasa needs PHP5 so please upgrade to the most recent version.
  • Stephanie Leary says:
    September 11, 2009 at 4:58 pm
    Thanks for the reply, Christian. I’m not adding the javascript manually to the theme, so I’m puzzled as to why that value is wrong.

    Here’s how I have things set up:

    1. I have a Gallery page with the smoothgallery custom field set to showInfopane=true. I’m uploading all my photos to this page through the media uploader, with captions and descriptions.

    2. I do want the gallery to appear on my home page, but I want to avoid using iframes. I have a text widget containing the shortcode with the ID of the Gallery page specified:
    [smoothgallery id=3002 showInfopane=true]
    I’ve enabled shortcode parsing for widgets in my functions.php file, so that works fine. The gallery does appear in the right place and the js is loaded with wp_head() as it should be… just with that one wrong value.

  • Jack7 says:
    September 12, 2009 at 11:05 pm
    I can´t understand, why SmoothGallery isn´t working on my web? viz. http://www.test.prima-web.com/ Please, can anybody help me?

    I am giving SmoothGallery to my theme.

  • Christian Schenk says:
    September 13, 2009 at 12:19 am
    Hi Jack7,
    I’ve noticed two things on your website:

    1. although the CSS for SmoothGallery gets included in your header the JavaScript – supposed to be somewhere at the end of the HTML – is missing. Please make sure that your theme has got a call to wp_footer in footer.php (or a similar file).
    2. even if the JavaScript for SmoothGallery got inserted into the page it would be very likely that the gallery wouldn’t work. This is the case because you’re using jQuery on your site which is incompatible with SmoothGallery. One solution is an iFrame.

    I recommend adding another sidebar to your theme. Once you’ve done that you can use the widget that comes with this plugin; it’s pretty easy to display a gallery this way anywhere in your theme. You can read more about that here.

  • Anna says:
    September 14, 2009 at 9:43 pm
    Hi Christian, I have a really quick question, I hope you may be able to help.

    Here is my site: http://www.bargainmoose.ca/

    I tried using SmoothGallery as a sidebar widget on my site. I set the “embed images” to true, and added the appropriate links in the media library, as I want it to open on a post, rather than a larger version of the thumbnail.

    When the widget is active in the sidebar, the posts open inside the thumbnail window. Can it be set to open in a new window please?

    Thank you in advance for your help!

  • Anna says:
    September 14, 2009 at 9:45 pm
    I meant “embedlinks” in above, not embedimages, sorry :)
  • Francesca says:
    September 15, 2009 at 4:59 pm
    Does it work for WordPress 2.8.4. ?
    I can’t get it to work even if I do everything right (I think!)
  • Henry Bagilhole says:
    September 16, 2009 at 2:30 pm
    Hi Christian
    Sorry the site I’m referring to is stored locally – basically I’ve installed the plug-in and it works fine in the actual post but on the home page it just shows an empty smoothgallery box.
    I’m using 2.8.4
    Thanks in advance
  • Chriss says:
    September 16, 2009 at 10:48 pm
    Why SmoothGallery isn´t working on my page?
    http://planet-fitnesswelt.de/?m=200809
    Anybody can help me please?
  • David Stembridge says:
    September 25, 2009 at 5:47 am
    Hi Christian, I am adding a smoothgallery to a new site, and getting an iframe border larger than the images. The images are 400 x 267; so I made the iframe the same size. Here’s the shortcode I’m using:
    [smoothgallery iframe=1 imgsize=400×267 timed=true delay=7000 fadeDuration=500 showArrows=false showInfopane=false embedLinks=false randomize=1]
    and the page:
    http://www.chanceandhydrick.com

    any suggestions? Thanks :)

  • Christian Schenk says:
    September 25, 2009 at 7:45 am
    Hi David,
    using the attribute imgsize in the shortcode just selects the right images but doesn’t change the size of the iFrame; you’d have to use width and height for that.
    Anyway, making the iFrame a little bit larger than the images is the default behaviour to prevent some browsers from showing scroll bars. If you don’t like this, please set ADD_PIXELS_TO_IFRAME inside the file config.php to another value.
  • vlad says:
    September 25, 2009 at 4:10 pm
    Christian thanks very much for this magnificent plugin. I already start to try it in my demo blog and I found that drop down menu disappears in a page where its gallery, i search as well as for “open the link of images outside the gallery” and “where is id of the gallery” and I didn’t find till now solution. If you can, please help.
  • Jiaren says:
    October 22, 2009 at 8:06 pm
    Hi Christian,

    Thanks for all the hard work you put into this! I’m quite a code noob so I’ve spent over a week trying to implement this plugin into my next theme.

    I’m so very close to getting what I want out of the plugin which is basically to have the smoothgallery in the side header which pulls images from a custom directory on the webserver instead of getting them from posts. I’ve got the smoothgallery to pull the images from posts but I have no idea how to pull them in from a custom directory. I’ve added the directory to the array inside the function getImageDirectory but I have no idea how to “add the attribute dir to the shortcode pointing to the path in the array”.

    Help please!

  • Nathan says:
    October 28, 2009 at 9:14 pm
    Hi Christian. This may be a silly question, but I don’t see a readily available solution to this. All I want to do is add a SmoothGallery slideshow to the home page of http://paulathomasrealtor.com (i.e. I don’t want to use it for individual posts). What code do I grab and where do I need to put it! What else am I not thinking of that I need to do? Thanks in advance for your help!

    p.s. I’m willing to pay you to do this for me!

  • Christian Schenk says:
    October 28, 2009 at 11:26 pm
    Hi Nathan,
    I guess your theme has a special file that renders the home page, like home.php. Add a new sidebar to the template file and use the widget that comes with the plugin. All that’s left to do is to create a draft post/page that you’re attaching images to and using that post’s ID in the widget’s configuration. Changing the gallery, i.e. adding or removing images is as easy as uploading more images to the aforementioned post/page or deleting them. The widget just displays the images from the given post/page.
  • Nathan says:
    October 29, 2009 at 6:17 am
    OK. Thanks, Christian. Most of that went over my head, but I’ll try to take it step by step. My offer still stands if you’re willing to do it for me!
  • Top 1000 WordPress Plugin Authors « Metode de promovare says:
    November 6, 2009 at 8:40 pm
    [...] SmoothGallery [...]
  • Pocz?tki testów « Prospekty Forda Fiesty says:
    November 8, 2009 at 11:41 pm
    [...] (autorzy: FlippingBook Team), Fotobook (autor: Aaron Harp), Flickr Gallery (autor: Dan Coulter), SmoothGallery (autor: Christian Schenk), Excellent transition gallery (autor: Gopi.R). Zaszufladkowany do: [...]
  • Kyle says:
    November 10, 2009 at 5:47 am
    Great script. After some heavy tinkering I was able to get it working properly. A more detailed explanation might save you some time with answering all these questions. :)
  • Joel says:
    November 10, 2009 at 10:04 am
    Hi Christian,
    can you tell me why the navigation elements are under the gallery picture? Is there any option to activate?
    Thanks,
    Joel
  • Indialanctic Real Estate Agent says:
    November 10, 2009 at 7:54 pm
    Is it possible to change the color of the space between the boarder and the image when using IFRAME? I have had no luck changing the color on this page: http://www.riversidedriveestate.com/
  • Christian Schenk says:
    November 10, 2009 at 8:43 pm
    Hi,
    at the moment I don’t know how to change this color without maybe touching the JavaScript. Why don’t you remove this white space by setting the width and height to 420 and 620 respectively?
  • Joel says:
    November 11, 2009 at 11:10 am
    Hi Christian,
    I would appreciate if you can have a look on my
    website http://messerschmidt-reisen.de/2/
    The navigation elements are behind the pictures. How can I get them in front on them?
  • Marek says:
    November 12, 2009 at 3:23 pm
    Hi
    I’ve managed to do all the custom field stuff to my liking – this is great!

    My only problem is with ReMooz. This opens both with an X in the top left and caption/description text below. Can I stop both or at least one of these?
    Thanks

  • eCommerceCircle says:
    November 19, 2009 at 4:48 pm
    Hi Christian,

    I’ve enabled iframes because the JavaScript was not playing nice with other objects on the page. For some reason all the pages are still calling the Smooth Gallery JS files in the header. How do I stop this?

    Thanks,
    –M

  • Christian Schenk says:
    November 19, 2009 at 8:12 pm
    Hi M,
    just remove the custom field. Make sure that you’ve transferred the configuration from the custom field to the shortcode.
  • Dak Sullivan says:
    November 24, 2009 at 4:51 pm
    Thank you for a great plugin. I have a installed successfully throughout my website. I was wondering how I remove the “light bulb” from the center of the Smooth Gallery? Also does this plugin work with Lightbox 2 plugin? Currently if you click the gallery image it links to the image file where the gallery is located, this is a bit confusing because the gallery controls seem to disappear. I would like to have the image link removed or open the image using lightbox.
    Please let me know how to solve this. Thank you
  • Christian Schenk says:
    November 24, 2009 at 7:35 pm
    Hi Dak,
    if you’d like to remove the links set embedLinks to false. If you just don’t want the light bulb to appear replace the corresponding image in the plugin’s directory under css/img with an empty one.
    If you’d like to use Lightbox2 on one page with SmoothGallery you should put the gallery inside an iFrame. Opening the images with Lightbox2 doesn’t work AFAIK but you can use ReMooz instead.
  • Sven says:
    November 26, 2009 at 3:21 pm
    Hallo Christian,
    erstmal vielen Dank für das tolle Plugin.
    Eine Frage hätte ich da noch:
    Habe showInfopane=false gesetzt und bekomme trotzdem die Einbledendung des Titels in jedem Bild. Selbst die Änderung in der utils.php bringt nicht. Hast du vielleicht eine Idee woran das liegen könnte? Vielen Dank.
  • Christian Schenk says:
    November 26, 2009 at 4:16 pm
    Hallo Sven,
    sobald du in der utils.php etwas geändert hast, ist die Wahrscheinlichkeit hoch, dass der Plugin anschließend nicht mehr ordentlich funktioniert; grob gesagt hängt das mit der Implementation der Standardwerte zusammen. Kurz gesagt: Änderungen bitte wieder rückgängig machen.
    Dann ist die Frage, ob du die iFrame-Funktionalität nutzt. Falls ja, gehört showInfopane=false als Attribut in den Shortcode, falls nicht, muss es in das benutzerdefinierte Feld eingetragen werden; ein i:false reicht aus.

Leave a Comment

Hint: consider reading the FAQ before submitting a question.