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.
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
smoothgallerywith its value set toOn - 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:- add a
#at the beginning of line 43 and 44 - remove the
#from line 45 and 46
The plugin now uses the new version; currently SmoothGallery 2.1beta1 with Mootools 1.2.
- add a
- iFrame it
-
Embedding the SmoothGallery inside an iFrame has several advantages:
- the JavaScript for SmoothGallery doesn’t interfere with incompatible frameworks like jQuery, PrototypeJS that you’re probably using on your site
- you can have more than one gallery on a single page
Just add
iframe=1as 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 goth:250andi:falsein 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.
hforheight, use the long version instead, i.e.heightinstead of justh. 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.
- Open the file
config.phpthat comes with the plugin in an editor, search forENABLE_FLICKRandENABLE_PICASARSSand change the value fromfalsetotruefor 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. - 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.
- Open the file
- 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:trueto the custom field or adduseReMooz=trueas 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_THUMBNAILSin the fileconfig.phptotrue. Furthermore make sure that the directorycacheundersmoothgallery/extrais read/writable by the webserver. - Custom links for images
-
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:
- under Advanced Options on the edit screen scroll down to SmoothGallery and use the generated HTML markup
- 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.
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.
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
idof 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=150x150to 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
flickrphotosetto 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 withflickrphotoset. 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 functiongetImageDirectoryand add the attributedirto the shortcode pointing to the path in the array, i.e.dir=0for the first path,dir=1for 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.
633 comments ↓
right now the plugin expects that all the images attached to a particular post/page should be used in the gallery. That said, you can use the attribute
idin your second shortcode referencing another post/page which holds the images for the second gallery and the plugin will use those image instead of the ones attached to the current post. Just create a dummy post/page, don’t publish it and attach the images for the second gallery to it. Then in the shortcode add theidattribute and point to the dummy post. This way you’ll have two galleries on a single page showing a distinct set of images.Please ignore the above – I got the ‘id=’ tag to work, but am still struggling with the ‘dir’ method. So I now have images from two different places on the same page. I’m still stuck with a couple of things though – firstly I can’t get rid of the white space of about 15px on the right and underneath my iframes. I’ve tried the ‘iframebgcolor=’ property and in FF no matter what colour I set for that it appears transparent (great, the background colour of the page shows through which is what I want) but on IE the white border remains no matter what colour I choose.
Secondly I have to remember to watermark each of my images before uploading – isn’t there a way of adding a watermark to the pictures automatically? Or does your script work with another WP plugin that adds a watermark?
so that I can link to a specific slide in the sequence, rather than to the image only. Is this possible? Historymanager.js?
You can set the amount of pixels in the file
config.php. If you reduce that to zero and change the CSS a bit (hint:overflow:hidden) you can get rid of the white space.Regarding the watermark: this plugin hasn’t got a feature to add something like this to an image but there should be no conflicts with plugins that do this.
@Blake: please have a look at this: it allows you to add custom links to each and every image in your gallery.
Thank you so much for your efforts. Being fairly new to WordPress coding, unfortunately I cannot get Smooth Gallery to function properly. Adding images into posts just doesn’t work for me (see example http://interactus.dk/wp/?page_id=281). I am content to use Smooth Gallery with NextGen Gallery, which works when I put the shortcode in the top of the page. BUT I would really like to link gallery images to posts rather than to the image itself.
I have read your piece on that, but I dont get it. I don’t have the option of adding “Smooth Gallery links” in the media library…? Any help would be greatly appreciated – regards, Ulla
you aren’t using my plugin but an extension to NextGen. Please ask the guys over here for clarification regarding this plugin.
I try to used the plugin but I don’t understand….
Where must I put the [smoothgallery] into the content?
It’s so difficult cause I’m not good on PHP…
you don’t need any knowledge of PHP to get this working. Just have a look at the getting started section above and place the shortcode into the content of a post or page where you’d like the gallery to appear. Just give it a try and change the location of the shortcode in your content to see the changes.
Warning: There is a bug on JonDesign’s SmoothGallery 2.0 that shows the carousel on a blank frame with the options: arrows: false; carousel: true; links: true;
I have GoDaddy for hosting, and use WP 2.9.2…my smooth gallery is not so smooth, the top 1/3 shows godaddy in the background.
artisticrocks.com
is it possible to reorder the sequence of the images after I have published my gallery? In the post/page there is the smootgallery window with the div containers, but this part is not editable.
Greetings Eckhard
I love how easy it it to use with WordPress, and so smooth and slick.
The example you have at the top of your page doesn’t have the lightbulb with links. I would like to do this with mine too, but having trouble removing the links. Just wondering if you can give me any tips.
Thanks for the good work.
Belinda
just have a look at the options above: set
embedLinkstofalseif you’d like to disable the links. Note that there’s no need to remove theaelements from the HTML manually.I have added a smoothgallery to a new page, using the K2 theme. I have noticed that when enabling embedlinks in shortcode, I lose the image altogether, it loads the page I’m trying to link within the iframe… http://pinelandbakery.com is the site. Any suggestions?
Oh, here’s my shortcode:
[smoothgallery iframe=1 width=468 height= 302 imgsize=468x302 frameborder=0 iframebgcolor=EAE8DB scrolling=yes marginheight=0 marginwidth=0 timed=true delay=5000 fadeDuration=500 showArrows=true showInfopane=true embedLinks=false]
have you read how to open links in another window when using an iFrame. I guess this should fix your issue.
Do I need to change references anywhere else? Or just replace the js file?
first of all thanks for the great work!
I have a problem with the dir field for the widget. No matter what folder I specify, it just doesn’t show any images. Tweaking the config.php doesn’t help either. Is there anything obvious I could have done wrong?
Thanks a lot in advance,
Sebastian
” 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. ”
Works great now! Thanks Christian for the great tool. You all are awesome for helping me put my website together.
I’m really happy that the plugin is working for you so well
Regards,
I’m currently planning to improve the plugin but integrating it with NextGen hasn’t been on my todo list so far. I’m aware of the fact that some people miss the one or the other feature in the media library that comes with WordPress – keeping things clear and orderly being the most difficult part.
I must say that I use my plugin on a lot of different pages and both my clients and me haven’t got a big problem managing the images. Even with a few hundred pictures on one page everything is okay so far – the trick is to attach the images to certain posts/pages so nobody gets confused in the first place.
That said, I haven’t got a real need to integrate the plugin with NextGen. Since a lot of other people like this piece I might think about adding support for NextGen galleries sooner or later; I can’t tell when I’ll find the time for this.
any hints?
Thanks for this great plugin. My question is: Is it possible to pause the carousel when the cursor is over an image?
Thanks
please have a look at the forums over here – this entry might be interesting regarding your issue.
that depends on how you’ve added the SmoothGallery to your website. In case you’ve chosen to integrate it inside an iFrame there’s nothing special you can do to speed it up; in fact iFrames are pretty bad when it comes to performance. If you’ve inserted the galleries more or less manually – e.g. according to the description here – you should have a look at Yahoo’s guide Best Practices for Speeding Up Your Web Site; the sections Put Stylesheets at the Top and Put Scripts at the Bottom can be really useful here.
The entire site comes up quickly, with the exception of smoothgallery instances, which take between 2 and 10 seconds to come up after the entire rest of the page, including flash objects and other pictures, have come up.
If there is no way to speed its coming up, can you give me an example on how I can embed a picture come up behind where smoothgallery is supposed to come up so when it does come up the uesr will simply think it is a bad transition instead of just seeing a ton of whitespace?
I guess you’ve put pretty large images – filesize wise – into the gallery which need to be downloaded. Maybe I state the obvious here but you should make sure that:
With all this in place you can make the gallery loading faster; configuring your webserver won’t have any positive effect on first time visitors though, if you just use the things stated above.
If you want to hide the gallery until it’s finished loading the images, I think you’re better off asking this some JavaScript guru with some time on his hands, at Stack Overflow or the community in the forums over here.
What about putting up a picture underneath the area that smoothgallery exists?
Here’s the shortcode I’m using:
[smoothgallery iframe=1 width=468 height= 302 imgsize=468x302 frameborder=0 iframebgcolor=EAE8DB scrolling=yes marginheight=0 marginwidth=0 timed=true delay=5000 fadeDuration=500 showArrows=true showInfopane=true embedLinks=true]
I figured the iframe would prevent issues like this.
Any ideas?
Thanks!
I’ve had issues regarding the visual editor as well and I’ve heard of many people complaining about problems. This is due to the fact that the visual editor might replace or reorder some of the HTML elements – since SmoothGallery relies on a certain structure of the markup for the gallery the editor might break it. If you’re using the iFrame feature, the editor can’t change the HTML and so the gallery is working because the plugin generates the correct markup.
I recommend deactivating the visual editor if you’re working on a page that contains a SmoothGallery.
I actually have done that; but any new posts or pages are without the visual editor as well. I use the visual editor sometimes when creating a html rich graphic for a widget.
Is it possible that not using the iframe feature may cure this?
Leave a Comment