Galleries in WordPress 2.5

Posted in Accessibility, Front-end code.

The gallery example as published, showing the 6 example pictures.The recent (and quite significant) overhaul of WordPress‘ admin area is very good, streamlining your blogging and making previously diffiicult things quite simple. They are suffering from a slight case of the Office Ribbon (users not happy with the learning curve for a demonstrably better interface), but overall it is a big improvement.

One of the new features is the ability to automatically create a gallery within a post of all the picture uploaded to that post. I wasn’t very happy with the code output for galleries, so I took it apart and tried to improve it.

Current process

To see how it works now, I uploaded a few photos, and included titles, captions, and descriptions in a way that I could see how they came out. I tend to have lots of windsurfing pictures lying around, so I picked half a dozen from an event last year to test with.

This is what you get after selecting a few files.

Example of the media interfaces, with 6 pictures uploaded to the page library.

Once in, you can add the alternative text, a title, and longer description.

Example of the item interface with one picture showing.

Inserting a single image into post

The code produced by simply inserting an image into the post is:

<p><a href="/path/_b5m1617-01.jpg">
<img class="alignleft size-thumbnail wp-image-289"
title="Title - Formula sailor speeding across the course."
src="/path/_b5m1617-01-150x150.jpg"
alt="Caption - Joe Bloggs"
width="150" height="150" />
</a></p>

Not bad, the title is added as a title, the ‘caption’ is the alternative text. I’m not sure if the standard use would need a title and caption, why not just use ‘title’ and use that as the alt? (As mentioned in the images part of my WYSIWYG spec.) Still, it’s a nice implementation of having a longer description, as it creates a page for each item.

Adding a gallery

Adding a gallery is pretty easy: press the button. It doesn’t add in the pictures into the editor, it simply adds a bit of text for gallery (in square brackets). The advantage to this approach is that how galleries are dealt with from a code point of view is handled when the page is rendered in PHP, rather than hard-coded by the TinyMCE editor.

However, the code when previewing the page is not what I had hoped for:

<style type='text/css'>
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;			}
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>

<p>	<!-- see gallery_shortcode() in wp-includes/media.php --></p>
<div class='gallery'>
<dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='path/_b5m1617-01/'
title='Title - Formula sailor speeding across the course.'>
<img src="path/_b5m1617-01-150x150.jpg" width="150"
height="150" class="attachment-thumbnail" /></a>
</dt>
<dd class='gallery-caption'>
Caption - Joe Bloggs
</dd>
</dl>
<dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='path/_b5m1622-01/'
title='_b5m1622-01'><img
src="path/_b5m1622-01-150x150.jpg"
width="150" height="150"
class="attachment-thumbnail" /></a>
</dt>
</dl>
<!-- more lists for for each picture -->

<p><br style="clear: both" /><br />
<br style='clear: both;' >
</div>

Ok, so the main problems here are:

  • Inline styling embeded into the page content.
  • Invalid HTML. Open paragraphs tags without closing paragraph tags.
  • Classitus, with each item being given a class, rather than using inheritance. (It is fair enough to put a div with a class around it, but it should just be plain HTML under that.)
  • No alternative text on the image.
  • Each item is created with a list, a single item in each definition list. (A definition list is a slight stretch, but it would be ok if it was one list.)

It looks ok in my theme:

The gallery example as published, showing the 6 example pictures.

But I was unhappy enough with the code to start looking at how to change it.

Altering the Gallery code

The code itself gave me directions as to where to look, see gallery_shortcode() in wp-includes/media.php. This shows:

// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);

I looked into writing a pluggin that used a filter to override this, but either I just didn’t get it (very possible, I’m not a programmer) or the gallery aspect is too new to be documented yet. Also, my understanding of the filters is that it changes the output, but I also want to include something that is missing – alt text.

I copied across the entire function, and two others that it relies on, into a plugin that overrides the shortcodes function set for the gallery.

I cut out the style tags, and adjusted it so the same gallery outputs this:

<ul class='gallery'>
<li><a href='path/_b5m1617-01.jpg'>
<img src="path/_b5m1617-01-150x150.jpg"
width="150" height="150"
alt="Caption - Joe Bloggs" />
</a></li>
<li><a href='path/_b5m1622-01.jpg'>
<img src="path/_b5m1622-01-150x150.jpg"
width="150" height="150"
alt="" /></a></li>
</ul>
<p><br class='cl' /></p>

It takes a little styling in your own CSS, but this is much better, more basic code. It looks pretty much the same, but it will drop to two columns if you are on a smaller screen.

If I could work out how, I would make it so that the title is added within each list item, so you would have:

<li>
<a><img></a>
<p>Title</p>
</li>

Anyway, if it is of use to you, the extension I created to do this is available: Gallery code clearner plugin. I’m not going to try and put it on WordPress.org, I’ll be submitting some bugs so that hopefully this can be changed in WordPress.

Other little bugs

Whilst digging around in 2.5, I did find a couple of other bugs:

  • The edit the URL (permalink) aspect is much better than ‘page slug’, but when you click ‘save’ next to it, you also have to know to save the post as well, otherwise it doesn’t take effect.
  • Titles are added to text navigation, for example, on the category links. This is somewhere between annoying (for regular users), and positively disruptive to people using screen magnifiers.
  • When adding images, it adds the domain name, I would rather it used an absolute link without the domain name. E.g. /path/to/image.jpg rather than http://domain/path/to/image.jpg.

Update:

26 contributions to “Galleries in WordPress 2.5”

  1. I think absolute URLs can be disabled in the WordPress preferences. Some people claim they help to make the site more search engine friendly.

  2. Hi Thomas,

    That would be good, but I can’t find that setting. 🙁

    Also, I would have thought it’s a setting in the editor rather than WordPress per-se?

  3. Excellent. I haven’t played around with the gallery yet, but I had a feeling it’d need attention. Now when I do, I’ll come here first.

    The use of absolute URLs in “posts” serves one purpose that I know of: It keeps stuff working if you use a external feed like Feedburner since the URLs will change (to something relative to the Feedburner URL, not your own).

  4. Hi Mike, thanks, it’s there to be improved on!

    Hmm, I take the point about the feeds, but personally I would prefer to use local URLs and add the domain to the feed at that stage. Perhaps that’s difficult?

  5. That’s the preferred method, but I don’t think I have that option with feeds through Feedburner and the like. Here’s a link to my feed:

    http://feeds.feedburner.com/Beast-Blog

    The images show up in the feed because once in the feed they are effectively hot-linked. If I didn’t use the full URL it’d be text only. I think so anyway.

  6. Feedburner and similar services should resolve the links in a document and ensure they are properly based.

    Resolving URIs starting with / is dead easy. If the links work on your site but break in their service, it’s a bug in their service.

    Alastair, the part which says “it will drop to two columns if you are on a smaller screen:” reads like there should be an image after it?

    Incidentally, have you considered automating proper thumbnails for the images you post? At the moment, most of them are just the big versions squished by small width and height values.

  7. Hi Ben,

    Agreed about the services, anything referenced under / should be easy to deal with.

    Thanks for spotting that colon, I had intended to put a picture in, then I realised it looked the same as the one above!

    Do you think thumbnails are better in this case? Each image does link through to the full size version, but if you’re on a wide res, you see it almost full size anyway.

    I was thinking of adding a lightbox style thing as well, but I need to check into it more.

  8. This entry currently has 336.96kB of images in the content. Thumbnails would reduce that significantly if you chose the right format. I think these pictures would compress better as PNG or GIF than JPEG as they have large areas of solid colour with sharp changes between colour.

    I run a 1,600×1,200 desktop size. Image widths in the page, in pixels:

    1. 150
    2. 617
    3. 500
    4. 499

    The physical widths, in pixels:

    1. 150 (same width)
    2. 671 (9% wider)
    3. 624 (25% wider)
    4. 710 (42% wider)

    So all of the large images are getting squished by a significant amount.

    Shrinking and cropping in a graphics program, or using a blogging plugin to do it automatically, would reduce filesize and provide enough detail for users to get the idea without looking at the big versions.

    If you keep the links to the big versions, users can still follow them if they want.

    Incidentally, great minds think alike when it comes to markup and class names! 😀

  10. Sorry, updating to WordPress 2.5 must have erased my changes, I’ll try and put them back in.

    With regards to the images, they are PNGs and they are linked through to the full size picture, so I’m not sure what the issue is?

    Surely an image at the widest it can be in the available area is going to be better than one that has been shrunk to an arbitrary size? And given a flexible layout (with limits), I would have to pick a smaller size for that.

    I quite like the way they fit to the available width, and browsers are getting better at re-sizing images these days (Opera and IE to, something to do with bi-cubic rendering).

  11. 336kB of images isn’t an issue?!

    Thumbnailing large images is a long-established design pattern. It helps users.

    Doing the thumbnailing yourself with sizing cropping will do the best job at showing the key information compactly and efficiently. If users want to full image, they can still get that by clicking the thumbnail.

  12. 431 from a fresh cache, which isn’t that much bigger than average.

    But the main reason I don’t think it’s an issue here (apart from 90%+ of visitors probably being on broadband, and 60%+ definitely are), is the context.

    Thumbnails is an established pattern where bandwidth or space is an issue. I don’t think either are in this case, although in some cases I do, otherwise I wouldn’t have written this article!

    Bandwidth isn’t an issue because it’s a long article, the chances of the images not having loaded by the time you get to them is rather small.

    Space is an issue where you have many images an you don’t necessarily want to open all of them full size (like a gallery situation). But here, they are part of the dialogue, not necessarily critical, but useful as you go along.

    It’s a personal choice (the authors in this case), but I would rather have them inline than have to open them separately, then come back.

    Btw, WordPress creates the thumbnails automatically, so it was definitely a choice, not just laziness effeicency.

  14. Excellent 🙂

    I spent the past three hours swearing at WordPress trying to figure out how the heck I get rid of that abomination of HTML they call a gallery. Your plugin works flawlessly and is much appreciated 🙂

    Hopefully I can shoehorn this into my themes so my users don’t need to bother adding another plugin though.

    Hopefully the powers that be will fix the code in WP 2.6 as it certainly isn’t up to scratch in it’s current incarnation.

  15. Thanks Ryan, I did find a few current bugs to comment on, and added one of my own. Perhaps if more people agree/disagree there it might help? See the update for the specifics.

  16. That’s a good rundown of the image features of WordPress 2.5. Nice article.

    Just as a note about my Cleaner Gallery plugin, it does add the alt text for you. It chooses the caption if it exists; if not, it uses the title.

  17. Thanks Justin, and thanks for the info on alts – I only came across you’re plugin just now and hadn’t had a chance to try it yet.

  18. I’m using the plugin, love the use lists instead of dl. For me it doesn’t display a caption or title underneath, either on the gallery page or the link opener page. The alt tag is filled in. Have not made any changes to the plugin coding.

    This also doesn’t use the same page for opening a gallery item in a new page (I believe it is attachments in gallery default). Can I get this
    to either: use the attachments page or display title, description, caption on a popup page.

    Thanks!

  20. Hi sldesigns,

    I’m afraid I couldn’t work out the nesting on the short-tags function, which is why I didn’t put captions underneath.

    If you have a look at the bugs in the update, I’ve specified what I would want, but can’t code myself.

    If you have a look you might be able to work it out, but it’s not something I’m going to maintain.

  21. I’m trying to get an image in the gallery to link to another website, but when I save the URL in the gallery and then save the post, it doesn’t work… It keeps linking the image to a WordPress page with the bigger image, and this image in turn links to the image URL. No matter how i’ve tried to save it it won’t work..

    anyone have a fix for that issue?

    Thanks

  22. Webdiggr, it’s not really an ‘issue’, it’s not supposed to work like that.

    Any gallery will link to the larger image (or a page for that), but putting a standard image in with a link should work.

  23. Alastair – First, thanks for all the work you are doing on the Gallery for WP.

    I just wanted to drop by and let you know that you don’t have to create a plugin. You can over-ride the core function by copying it into the functions.php file for your theme. Then make your changes there.

    If there is any function in the core that is ‘not to your liking’, then copy it and tweak it as you see fit.

    This method is good for creating themes with ’embedded’ plugin functionality.

  26. “I can’t try it right now, but I guess that I just drop that function into the functions.php file in the theme and edit it from there?”

    Yes, copy the whole function, including the function name/parameters/curlybraces, and paste it in the functions.php file in your theme subdirectory.

    Any WP core function name found there will over-ride that core function. You can also add your own user-functions there, as Chris’ article explains. It is really pretty nifty and easy to use.

Comments are closed.