If you want to integrate a SmoothGallery into your theme you can use the WordPress SmoothGallery plugin. There’re two ways to do this:
- You want a gallery in your sidebar? Use the widget.
- You want a gallery somewhere in your theme? Follow the developer howto.
Sidebar widget
The plugin comes with a widget that displays a gallery in your sidebar. This way it’s very easy to insert a gallery because you don’t need to know how to write PHP code. Since the widget renders the gallery inside an iFrame you can add as many galleries as you want.
There’re various options that you can change on the edit screen for every widget. The first thing you should do though is supplying the ID of a post or a page where you uploaded the images. Once you’ve done that the widget should work as expected displaying the images from the given post/page. If it doesn’t work check the value for imgsize: this has to match the values for the thumbnails under Settings – Media.
Developer Howto
All you have to do is to implement the function insertSmoothGallery in the file config.php; you can find it under wp-content/plugins/smoothgallery. Depending on your implementation the plugin makes sure that the CSS and JavaScript will be included inside your page; keep in mind that this won’t work if the SmoothGallery sits inside an iFrame.
Let’s say you want a timed gallery on the page with the id 4711 somewhere in your theme that’s 400×80 pixels. Open the file config.php and implement the insertSmoothGallery function like this:
function insertSmoothGallery() { # add all the conditional tags you're using to the array if (assert_functions_exist(array('is_page')) === false) return false; if (is_page('4711')) { return array('width' => 400, 'height' => 80, 'timed' => 'true'); } return false; }
Once you’ve done that put the HTML markup for the gallery somewhere inside your theme and you’re all set. No matter how you implement the function don’t remove the call to assert_functions_exist.
As you can see, I used the conditional tag is_page. These come in handy if you’d like to display the gallery on some specific pages only – if you don’t want that but a gallery on each and every page just remove the if statement and the corresponding curly brackets.
Just add another sidebar…
Instead of implementing the clumsy insertSmoothGallery function you can simply add another sidebar to your theme if you like that better. Think of it as a placeholder for widgets. It doesn’t necessarily have to be a vertical bar on the side – some horizontal thing in your header or footer is okay too.
So, maybe you want to have a look at the Widgets API and learn how to add another sidebar to your theme. Check out register_sidebar and dynamic_sidebar in particular; the page about the second function tells you how to manage Multiple Sidebars in your theme.
I wrote a post about adding a sidebar to your theme, just three easy steps that should be easy to follow if you’ve got a basic understanding of PHP and themes in WordPress.
Still not convinced? Maybe you’d like to read Ian Stewart’s We Need To Kill The Sidebar.
92 comments ↓
somebody else reported this problem and in the end it was some other plugin causing this error. Try deactivating all plugins, turn them on one after another and check what plugin causes this.
In case you’re using WordPress 2.8 this might be a problem of my plugin. I’ll try to verify this as soon as I can.
I’m having problems with the setup of the plugin. I want gallery to be shown on the homepage only, I followed your instruction, but it’s unclear where exactly shortcode [smoothgallery] must be inserted (not the custom field, because I did that like in your video). Please give me an example, where and how to insert the shortcode. Thanks!
K
the shortcode goes into the content of your page. Say, you wrote some text for your home page and want to show a gallery there. Just place
[smoothgallery]somewhere inside the text where the gallery should appear.I disabled all plugins.
edited the config.php file
uploaded test images
added HTML (This could be explained in detail or add a link)
“Once you’ve done that put the HTML markup for the gallery somewhere inside your theme”… What HTML?
I tried the is_home conditional
and the is_page() conditional
The image will load with the captions, but then disappears as soon as it loads. The only thing that is visible are the captions (which transition correctly and have a link).
Does anyone have any ideas?
The markup for SmoothGallery: you can read more about that here under the second step.
Maybe you’ve activated the carousel (
showCarouselset totrue) but forgot to add thumbnails to the markup? In case you’re using the plugin’s mechanism to generate the markup read how it generates the thumbs for you here.Thanks for the reply. I will double check the function to see if showCarousel is set to true.
Thanks for the good job, I love SmoothGallery but something went wrong, obviously because of my fault.
I have just transferred the page from /wordpress to the root dir and smooth gallery and actually the whole widget part just does not work, I can not change anything.
Any idea please?
Thanks,
Juli
can you point me to a URL with a (broken) SmoothGallery? Then I’ll have a look.
A first guess is that you forgot to change the site’s URL after you moved the blog to the root folder. Have a look at “WordPress address” and “Blog address” under “Settings – General”, maybe you have to adjust these settings.
BTW: have you read this?
Item 1 Title
Item 1 Description
Item 2 Title
Item 2 Description
function startGallery() {
var myGallery = new gallery($(’myGallery’), {
timed: true
});
}
window.addEvent(’domready’, startGallery);
However, I don’t understand how the [smoothgallery] tag comes in to play. Am I supposed to place this within php brackets some where? Could you explain this in greater detail. Thanks for your time.
have you read the developer howto above? The plugin helps you to insert the JavaScript/CSS where ever you want and you don’t have to add this yourself.
Do you know what a shortcode is? Since this is a pretty powerful feature of WordPress I recommend that you look it up. Basically, you put it somewhere into the content of a post/page and it generates the HTML markup for SmoothGallery.
thanks for great plugin! I am having problems with widget at http://pal-w.ic.cz/.
It works well, but there are some white stripes on the right and bottom (Il looks like space for scrollers, but I do not want to scroll pictures…). I believe that i am not using iframe… Do you think that it may causes theme?
Sorry for bothering, but I really don’t know how to replace it.
Thanks in advance!
I’ll add an option to the widget that lets you change the background color of the iFrame; yes, the widget uses the iFrame – for many reasons – too.
In the meantime please open the file
utils.phpthat comes with the plugin, go to line 313 and insert the following code:Adjust the color code to suit your needs.
thanks a lot, now it’s much better. But still, stripes are here (only in black color), I hoped for some solution to remove them entirely… Anyway – thanks!!!
I’ve found your advices to Debbie, so I have managed to “hide” scrollbars, but I have the same problem as the Debbie: the links are displayed inside iframe. So i followed your instructions and changed jd.gallery.js (using: target: ‘_blank’). But it didn’t help. I have checked the lines hundred times, I mean everything is correct, but the problem uis still here – I can’t open it in new window…
Christian’s code worked fine for you from what I can tell. It changed the stripes on the side/bottom to ‘black’ — this is because the ‘#000′ in the code equals ‘black’ ‘#fff’ would be ‘white’, and ‘#777′ would be grey.
Please use this hex code reference chart to help you insert the proper code. It usually takes 6 digits, not 3.
http://www.2createawebsite.com/build/hex-colors.html
@CHRISTIAN: Thanks so much the amazing work, I really appreciate you taking the time to answer questions about the widget. I was having the stripe problem as well, and this thread helped so much. It’s already made a lot of people happy. Rock on.
all I can say is: thank you so much!
First: thank you for this great plugin.
Second: I need it for creating an animated slideshow in my theme. Now after activation of this plugin, when I want to create a new page or post, I do not get any of the visual editor icons in the empty post/page. When I deactivate smoothgallery, they are there again.
Is this due to a memory problem?
Did anyone experience the same phenomenon?
Cheers,
Heinz
‘timed’ => array(’true’, ‘t’, ‘timed’),
but it’s not working – or did I read that bit wrongly (probably…)?
Thanks very much!
please don’t make changes in the code but use the attributes in the shortcode or configure the widget to adapt the gallery to your needs. In case you’re using the shortcode add
timed=trueto it, if you’re using the widget entertruewhere it readstimed. This should do the trick.I was searching and searching, and I still can’t find it.
Can you please help me, somebody ?! How to show smoothgallery in header (I know where to put call code, but I don’t know how to set it up with smooth gallery?!)
I have nextgen gallery, ID of gallery is 1! How to take all photos from that gallery to show in header instead of my title ?!
Please help. I will try to do it even if nobody gives answer, but it would be very nice that somebody helps. Thanks.
this plugin has got nothing to do with NextGen Gallery. These guys might help you setting up a SmoothGallery with NextGen though.
help me
sure, just supply the corresponding parameter –
defaultTransitionin this case with the desired value either in the custom field or as an attribute in the shortcode. Since you’ve posted your comment on this particular page I’d like to add that this isn’t possible using the widget at the moment; usinginsertSmoothGallerymakes it possible though.Is it possible to use html tags on the description field? I’m trying to cusomize font sizes and put some”<a>”, but it doesn’t seems to work. Thanks!
I guess the JavaScript of SmoothGallery simply removes these tags. If you just want to change the font sizes the gallery comes with distinct IDs or classes usable by CSS selectors. Instead of changing the HTML, just adapt the CSS.
Another question: If I try to use a “<a href>” the final url shows something like: http://www.mywordpress_site.com/category/post/URL_I_typed. I’m using absolute values… how can I fix that?
Leave a Comment