Cleaner WordPress Gallery Plugin
- Description: This plugin replaces the default gallery feature in WordPress 2.5 with a valid XHTML solution and offers support for multiple Lightbox-type image scripts.
- Version: Updated to version 0.3.2!
- Support: Support forums
- Download version 0.3.2 Tested with WP 2.5.1 (819 downloads)
- Download version 0.2.3 Tested with WP 2.5
Why I made this plugin
So you upgraded your WordPress blog to the nifty new 2.5 only to use the gallery feature that Matt Mullenweg has been raving about.
Now, you upload that first set of pictures to only find that there are a lot of problems:
- The gallery shortcode outputs invalid XHTML.
- It injects style rules in the middle of the page.
Even when you specify to use the thumbnail, it only resizes your image, which causes some problems with page load times.(Fixed in WP 2.5.1)- You’re happy that you have the new feature but are still a bit unsatisfied.
What does this plugin do?
Here’s a list.
- Creates valid XHTML, which I know you all care about.
- Uses the image that you specify. It doesn’t just resize your very large images.
- Let’s you control the display of your images through CSS.
- Supports Lightbox.
- Supports Slimbox.
- Supports Thickbox.
- Supports Lytebox.
- Supports Lightview.
- Supports GreyBox.
- Supports jQuery Lightbox Plugin (balupton edition).
- Supports jQuery Lightbox.
- Supports Shutter Reloaded
You want to see this in action, right?
Since I knew this thing would be very different across multiple themes, I decided to test it out on a few. Actually, I only have a few themes that aren’t mine, so I decided to use a few of those. You’ll see examples from:
- A very popular K2.
- My favorite Small Potato theme, Peaceful Rush.
- One of my more recent favorites from Ian Stewart, Theseus.
- And, a theme I designed for my sister called Colorful Notes.
(Click images for a larger view. Click on the captions to go to the attachment page. The examples are from the alpha version but work nonetheless.)
I think the biggest problem one could run into here is if they’re using a lot of padding or margin on their images. You might have to go into your CSS file and change that if needed.
Instructional stuff
Just unzip the cleaner-gallery.zip folder and upload the cleaner-gallery folder to your /wp-content/plugins folder just like any other plugin. Make sure to activate it.
Basically, this plugin just overwrites the gallery code that the WP team gave us. There’s documentation on using the gallery shortcode available.
The gallery comes ready to use Lightbox or Slimbox “out of the box.” It doesn’t actually come packaged with either. I assume that you’ll figure out how to use them. You can easily configure the plugin to use which Lightbox-type JavaScript you’re running. The section is marked off like this in cleaner-gallery.php:
/************************************************
Begin user-defined variables
************************************************/
// Lightbox or Slimbox?
// jQuery Lightbox plugin(s)?
$a_rel = "lightbox[cleaner-gallery-$post->ID]";
$a_class = "lightbox";
// Shutter?
// $a_rel = "lightbox[cleaner-gallery-$post->ID]";
// $a_class = "shutterset_cleaner-gallery-$post->ID";
// Lytebox?
// $a_rel = "lytebox[cleaner-gallery-$post->ID]";
// $a_class = "lytebox";
// Greybox?
// $a_rel = "gb_imageset[cleaner-gallery-$post->ID]";
// $a_class = "greybox";
// Thickbox?
// $a_rel = "clean-gallery-$post->ID";
// $a_class = "thickbox";
// Lightview?
// $a_rel = "gallery[cleaner-gallery-$post->ID]";
// $a_class = "lightview";
// Show caption link?
$cap_link = true;
// Always show captions (use title if caption isn't defined)?
$cap_always = false;
/************************************************
End user-defined variables
************************************************/You can comment out or uncomment any of the variables to suit your needs. Just stop by the forums if you need help setting any of this up.
You can also auto-load Thickbox by uncommenting these lines:
// Auto load Thickbox (included with WP 2.5)?
// wp_enqueue_script('thickbox');
// add_action('wp_head', 'thickbox_css');A work in progress
I think this plugin has a lot of potential. I haven’t tested it with every available theme or every gallery shortcode option available. That’s for you all to do and let me know how it performs.
I haven’t actually tested this with itemtag, icontag, or captiontag yet. Of course, I assume most users won’t bother using those options anyway.
As with all other releases, keep praise and adoration in the comments section and support questions in forums (just opened a new plugins forum).
Let me know what features need to be packaged with it, what works, and what doesn’t work.
Update versions 0.2.2 - 0.3
I fixed the issues with multiple galleries on one page. Each gallery item should now have a unique rel and class. Each gallery also has a unique class. For example, if your post ID is 49, the gallery for that post has a class of gallery-49. So, you could essentially style every individual gallery differently.
Also, tested and added support GreyBox, Lytebox, Lightview, and two jQuery Lightbox plugins.
Very cool idea, not only cleaning up the gallery, but also preparing the links for Lightbox & friends. Smart thinking.
And surprising that given the concern for standards the gallery code isn’t XHTML strict. Weird.
plus, glad you like Theseus (and thankful it didn’t break in your test)! And Peaceful Rush is still one of the nicer WordPress themes.
Ian
I first noticed the invalid XHTML with RC1 but figured the WP team would fix it before the release. Luckily, they gave us this nifty function, remove_shortcode(), which allows us to overwrite any shortcode already available.
Once I fixed the shortcode to my liking, I figured I might as well add in some extra functionality for fun.
By the way, Theseus is the theme I like to test things on. It’s nice to get rid of the sidebars once in a while when testing new ideas. Another little fact: Peaceful Rush is the theme that got me into this whole WordPress theme-designing thing.
For those following along at home, the XHTML for the gallery should be completely valid for the next release. It just slipped through our testing the first time around.
Matt
Thanks for stopping by and clearing that up. I was tempted to step in on trac and start putting in some fixes because I’ve been following the progress of 2.5 for quite some time. I’m just not sure if I’m ready for the big league yet.
Hi Justin,
Thanx for your release, I downloaded it and tested it in my localhost, and everything looks great. I’m going to upload it on to my blog soon.
I’m using “Options” theme in my local test server and it’s compatible, man. I’m very happy with this…
Thank you anyway
J Mehmett
Thanks for testing it out. Basically, that’s what it’s going to take to make sure it’s functioning with most themes — lots of people using it and reporting any problems they find. Let me know how well it works on your blog.
I’m not gonna use the gallery feature yet, but I was taken slightly aback by the fact that the shortcode outputs invalid XHTML. It’ll probably be fixed in WordPress 2.5.1 or something, but then again, as you said your plugin does have some other nifty features
Quick question..say the gallery feature ends up with valid code soon and for simplicity’s sake I want to go back to using it when that happens… Will disabling the plugin later make it necessary to re-create existing galleries, or will they work with the standard gallery feature post-plugin?
Thanks for the hard work and valid code.
BoltClock
Matt said above, “The XHTML for the gallery should be completely valid for the next release.” I’m not sure if that’s 2.5.1 or 2.6. It seems like something small enough for 2.5.1, so I’m not sure.
I’ll definitely continue the development of the plugin because the Lightbox features are useful to me. I want to run a photostream for my family and thought it’d be a good idea to use Lightbox.
Brandi
There’s nothing you’d ever have to change. The plugin just uses almost the same gallery shortcode included with WordPress. I just modified a few things until the WP team gets around to fixing it.
Great solution, and nice to hear from Matt that the invalid code was just an oversight.
By the time I’ve recovered from upgrading 13 other websites plus my own and hunting down/testing out replacement plugins for plugins that bit the dust upon the release of 2.5 maybe 2.6 will be out.
it would be cool if you could place say a banner on your post and that said banner will be shown on each photo page but not the same banner every time a gallery is posted
Yeah. The new WP really is not helping much. It creates more problem than making things easier as what I have experienced…geez. I’ll try this one soon.
Thanks this is great, exactly what I was looking for!
[...] punto di vista del codice generato, dato che non è valido XHTML. Per cui, provate questo plugin Cleaner WordPress Gallery, che integra anche qualche interessante abbellimento JavaScript come [...]
When i was reading your article, it was really awesome because it feeds my knowledge and it was so entertaining, by the way. hope you can make more article just like this. it helps me a lot. thanks and good luck.
Excellent work Justin, as always.
I modified one thing: in order to limit each gallery to show only the specific pics uploaded for that post I changed the $a_rel to ‘lightbox[gallery-' . $post->ID . ']‘. Otherwise Slimbox shows all uploaded gallery pics in every post that uses the gallery.
WordPress Modder
Yeah. I’m glad to hear it too. I’m looking forward to them taking care of the XHTML, so I can just handle the Lightbox features.
mccormicky
That’s usually how it goes.
I can barely run one site. I don’t see how you have the time to work with 13.
Dade
I’m not sure I understand.
Kay
I don’t know. I think WP 2.5 solved quite a few more problems than we give it credit for. Multiple file uploading is great. There’ll always be bugs with new software. That’s why open source is so great — we’ve got 100s of people developing the main source code and 1000s complaining.
justin
Thanks. I hope it works well for you.
olovito
Thanks for sharing. It’s something I’ve already got planned for implementation. I should update it by the end of the weekend.
[...] gallerifunktionen i Wordpress, för nu har Justin fixat ett plugin för att rätta till alla fel: Cleaner WordPress Gallery Plugin. Insticket gör att sidan validerar, att det skapas alt-taggar på miniatyrerna samt att man [...]
awesome plugin man, thanks alot. this is a lifesaver!
Great plugin, thanks so much!
[...] Alternatives to the Built-in Gallery: Cleaner WordPress Gallery Plugin acts as a replacement with the default gallery feature of WordPress 2.5, and solves a lot of [...]
[...] for more than this summary. [↩]And thanks to Justin Tadlock the widget master for the shiny new Cleaner Gallery plugin! [↩]While I was drafting this, an even more exasperated comparison was posted by Huug and [...]
This plugin rocks!!! I was looking for something like this for the gallery. Tried it out on my localhost and would be uploading it soon to my blog. Thanks Justin.
I honestly did not know Wordpress had a gallery. Where’s the gallery? Also, is it possible to make this plugin turn all pictures in post to lightbox by default with captions.
Hi,
I took your plugin as a base for mine. I added greybox, thickbox (the one standard in wp) and highslide support. And I use the exif info that wp 2.5 now stores in the metadata to ad to the boxes. Als I extract gps info and you can view the location of the pictures taken in a box to.
You can see it live here: http://kruyt.org
To everyone
I just updated the plugin to version 0.2.2. It supports a few more Lightbox-type pieces of JavaScript too. I’ve also fixed a few bugs. The post has been updated to reflect the changes.
theWizard
Thanks. I just had to use the new gallery feature but wouldn’t with the invalid XHTML. So, it was time for a plugin.
Brad Mahaffey
You’re welcome. Let me know how it works.
Hetal Bhagat
No problem. Thanks for using it.
Doug
WordPress 2.5 has a new gallery feature. Just read about it at that link. This plugin only uses the gallery for WordPress. It just overwrites the original code. It’s not primarily a Lightbox plugin.
Dennis
The plugin already supported Thickbox. Thanks for pointing out GreyBox. I just tested it and added support for it.
I would add HighSlide, but it uses invalid XHTML from what I can see. That kind of goes against the purpose of the plugin.
[...] not-so well working, because it outputs broken XHTML code (not validated). Here’s the plugin Cleaner WordPress Gallery, that does well the job and adds some nice JavaScript like [...]
Hi Justin,
What I mean with thickbox, is I auto load it in the plugin. no need to embed in my theme. And thickbox is already by default in WP2.5
code for using the tb in wp:
And here some code I use to put the exif info that wp 2.5 now reads from files in the title, so the ‘boxes’ can use it to. To display exif.
Thanks so much for the plugin. I was so anxious about the Gallery feature in WP 2.5 however I was shocked when I saw the inline css in the page and it was breaking. I wondered what had happened because ever since I started developing using css, i hadn’t come across css code in the middle of a page.
Anyway, it was great to hear from Matt that it was just an oversight but it will be out very soon with the next release. That will be so fantastic.
Otherwise, I really like the gallery feature and most of the other features in WP 2.5.
Great work - the first plugin I’ve found which deals with the wp2.5 gallery the way I wanted to (by turfing it out entirely, and doing it better!) Seriously, excellent work!
The only addition I made to this was adding the lines;
That way it looks for the caption in first the caption, then the description field, and if it can’t find it in either, it uses the title. Not appropriate for everyone I’m sure, but for my usage I always want a caption and Picasa captions come out in description, not caption annoyingly enough.
[...] över att dom inte tagit tag i valideringsfelen från mediagalleriet bland buggfixarna. Så Justins Cleaner WordPress Gallery plugin fick slås på igen. Nu har jag upptäckt att andra små förargliga valideringsfel uppstår [...]
[...] other cool feature that l installed was the Cleaner Wordpress Gallery Plugin. This thing is a beauty. Using the native wordpress admin interface, starting at version 2.5, [...]
Dennis
Yeah, I know WP 2.5 has Thickbox pre-included. I went ahead and added the option into the plugin.
I’ll look more into the image metadata thing.
Matrich
They’ve fixed a few issues with 2.5.1, but the style is still right in the middle of the page. I’m not sure why they haven’t found a solution to put this stuff in the header.
Andrew
Thanks for the feedback. I’ve added an option to always turn captions on, even if you don’t define them.
Hi Justin. Thanks for creating this awesome plugin. Keep up the good work.
BTW, here’s the lightview user defined variables that I used.
Hi Justin,
Yeah, I downloaded WP 2.5.1 to see if it was sorted out about the inline css but unfortunately, it is still there so I am using your wonderful plugin however I am sure it will be sorted out.
But atleast we are sure it will be sorted out sooner than later.
I’ve got the plugin installed and activated, but the gallery isn’t showing up. I’m using the “Insert gallery into post” and it outputs the [gallery] tag. Am I doing something wrong?
[...] Thanks for visiting! If you’re new here, you may want to subscribe to our RSS feed. This blog posts regular Wordpress news, updates of themes, plugins, ideas, hacks, quick fixes and everything about blogging, especially about Wordpress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.Clean WordPress Gallery Plugin [...]
[...] added the Cleaner WordPress Gallery Plugin and trying it out on the [...]
It seems that this plugin uses “dl” lists (definition lists) with “dt” elements (”definition term”), just like the default WP gallery code.
I’ve read lots of criticism of the galler code, but as yet I haven’t seen anyone question the element choice. In what way is a gallery of images a definition list? In what way is an image in such a galler a definition term? And where are the definitions (the “dd” elements)?
If were going for valid XHTML, shouldn’t we try to use elements according to their definitions too? Validators don’t catch such errros, but they are just as important as validation errors, perhaps even more important.
“dl” lists are often (mis)used to get the typical layout that such lists usually get in browsers, but as far as I can tell, that’s not the reason for the choice of “dl” here. The CSS seems to override the typical “dl” presentation completely. So I’m really baffled? Why “dl”?? I must be missing something…
Perze Ababa
Thanks. I’ve updated it to include that code.
Matrich
Unfortunately, they still put it in. Adding something like a gallery is a tough call when it comes to CSS because if they put it in the header (where it should be), then they run the risk of other code messing it up. It’ll be interesting to see where they take it. At least they cleaned up the alt text problem.
Shane
I’ve responded to you on the forums. I’ll try to get it sorted out. It may be an incompatibility with WP 2.5.
Bertilo
If you don’t like the element choice, you can always change it with your gallery shortcode. Read Using the gallery shortcode. It’s explained there.
From what I can tell, this works perfectly fine:
Granted, we should probably use different elements, but what should those elements be? I don’t see any clearly logical elements for displaying galleries.
Maybe the use of a definition list is perfect for this situation. The gallery (dl) has images (dt) and captions (dd). A list with terms and descriptions. Of course, this is using the word “term” a little looser than usual, but do terms have to be text? If we answer yes, then the markup is most definitely wrong. If we say no, then maybe it’s a good solution.
I’m all for standards and good clean code, but I also don’t see a whole lot of other options to mark this thing properly. I guess we could always go with divs and spans.
This is an awesome plugin. Thank you very much.
Sorry to hijack this thread but…:
@Dennis - I just checked your blog. I really like what you did with your lightbox images. I see the code you posted for the EXIF information. Which files do you insert that into? Thanks!
Justin:
Yes, but 99.99% of all users won’t. And then we’ll have heaps of “dl” elements that are not definition lists at all. There goes our semantic web… The default choice should be a good one.
If there is no element in XHTML with a meaning that fits, then we should use “div” and “span”. That’s what they are there for. XHTML is not a particularily rich markup language. But it doesn’t get any better if we misuse the XHTML elements that do have a clear meaning.
I think a “dt” needs to be a term. That might be a symbol, and an image could be a symbol. In any case the corresponding “dd” element should be a definition of that term/symbol. A caption could perhaps be a definition of its image, sometimes, but not very often. I doubt very much that many actual galleries are of that kind. And a gallery without captions? Could that in any conceivable way be seen as a definition list? A definition list without definitions? I really don’t think that makes any sense.
In my opinion the default should be changed to “div” instead of “dl”.
[...] Clean WordPress Gallery Plugin [...]
hi there, good job, I started to use this plugin and it gives a lot, and of course it’s better that the standard gallery, also - because it creates valid code - I don’t know how other people but in my mind that always stands for quality.
best regards from scotland
a.d.
At the moment everything looks great, I keep testing on diverse browsers.
Charles
Thanks. I’m glad you’re enjoying it.
Bertilo
“Semantic Web.” That would be great.
And 99.99% of users will never use semantic code in other places anyway (this is definitely not a good argument for using
dlthough). The “default choice should be a good one,” but I think that maybe, just maybe, the WP team thought this was a good choice. I could be entirely wrong though, and it would make no sense to otherwise use a definition list.I think you bring up some great discussion points in your reply. Maybe the term “definition list” needs a clearer definition. According to the XHTML List Module, “Definition lists, created using the dl element, generally consist of a series of term/definition pairs (although definition lists may have other applications).” Of course, there’s plenty more to read and decipher. It goes on to give its first example, not of a traditional term with a definition, but how to advertise a product with product descriptions.
Now, the one thing I do disagree with your statement is “the corresponding ‘dd’ element should be a definition.” The word “definition” isn’t always accurate, even when talking about a definition list. W3 (article above) calls this both a definition and a “description.” Now, an image caption may not always be a definition, but it should always be a description. Otherwise, it’s not a caption at all. Of course, I’m being a bit picky with words.
I’d really like to expand on this discussion at some point with a larger blog post. It’d be interesting to see what others’ thoughts are on this.
tartan
Thanks. I hope it works well for you.
Diseno Web
Please do keep testing it in a variety of environments and report any problems you find. I’ll be sure to update it.
@Denis
Curious about your meta code…did you add that to the plugin? I see the end result on your website, and would like to do something similar. Any suggestions?
this plug in rock, thank you VERY much, it helps me a lot
thanx again
Justin Tadlock wrote:
Maybe not too picky. That could be a way to justify the use of “dl” in the gallery code. But I’m a bit afraid that we’re getting close to redefining “dl”, “dt” and “dd” as “list (dl) of items (dt) with related text(s) (dd)”. That seems a bit too “unsemantic” too me, but I could be wrong.
Would it then be OK to use “dl” with a single element as a general way of marking up images with captions? It’s not illogical for a list to have just one element, I guess… Actually I’ve long felt that XHTML lacks a good way to add a caption to an image. Could “dl”, “dd” and “dt” be it?
But then again: If there are no captions (i.e. no descriptions), just a bunch of images (I think that will very often be the case), then it’s hard to justify the use of “dl”. But the gallery code uses “dl” for such galleries too…
[...] → cleaner-wordpress-gallery-plugin Stampa (Nessun Voto) Loading … Tags: gallery, plugin, Wordpress & C., wordpress [...]
[...] Clean WordPress Gallery Plugin [...]
im choosing the thickbox option.
however, it seem to break the site
before applying the plugin
http://img113.imageshack.us/img113/2561/15920743ac6.png
after applying the plugin
http://img113.imageshack.us/img113/5743/49590464ct0.png
could you please help me check it out?
[...] meiner Seite setze ich zusätzlich das Plugin Cleaner Gallery ein. Das Plugin behebt ein paar Fehler der derzeitigen Gallerie-Funktion von Wordpress und bietet [...]
[...] this post has me a bit disappointed with the integrated gallery feature in WP2.5. I downloaded a cleaner gallery plugin which is a start, but still. There doesn’t seem to be a way to do the things I wanted to do [...]
ho great!
thx a lot justin, that’s really the best photo plugin for WP!
your plugin cleaned up my gallery just installing it, and I got exactly what I want: a valid xhtml gallery with lightbox!
nice plugin mate, works very well.
[...] Cleaner Gallery - Fixes WP’s default gallery and provides valid XHTML code instead. [...]
Hi Justin,
Nice plugin you made, I have a trivial question about the wp_postmeta table :
I want to upgrade my previous thumbnails format to the 2.5.1 format but when I replace “thumb” by “thumbnail” and the file extension .tumbnail.jpg by the -150×150.jpg but it didn’t work, maybe you have an idea
Thanks a lot
henri
[...] Lightbox的Ajax照片显示效果对访客来说是很有吸引力的。但对于WordPress插入整个相册的功能，我们怎样让它们都支持lightbox的便捷浏览效果呢？这里介绍的就是一个增加WordPress原生相册lightbox效果的插件：Cleaner WordPress Gallery Plugin。 [...]