Clean Code Gallery

(See also the original post on this topic for background and the bugs posted.)

There are a few changes I’d like to propose for WordPress’ new gallery shortcodes function. In the meantime I’ve created a quick hack-module to get the output I would like. I make no warrantee for this, but it basically replaces the function that produces the gallery code, but without the extraneous markup. Readme to come once I’m reasonably happy with it: gallery-code-cleaner.zip

Unzip into the plugins directory and enable, you’ll have to add you’re own CSS into your theme.

Proposed changes

Options

In order to make this a viable change to the current code base, it does not make sense to simply switch how it works, so I propose that an option is added (probably to Settings > Misc) for a ‘clean code’ version of the gallery. This should include a warning that you will need to add your own CSS for the gallery to work (perhaps with a suggested default, or link to one).

Also, with the ‘clean code’ switch on, the gallery code option ‘columns’ should do nothing, the minimal code just uses floats, and the number of columns just depends on how many fit into the parent container.

Another option that would be better site-wide rather than on a per gallery basis would be whether you link to individual pages or straight to the image.

Linking to the image is better for people using a basic site, or for those who use Lightbox style galleries.

Linking to a sub-page (preferably with previous/next links) is good when you have extended descriptions.

Interface changes

Before discussing the output, it might be possible to trim down the input. The current interface is:
Example of the item interface with one picture showing.

This includes title, caption and description, which is good, but they are inconsistently mapped to the output. The definitions we need to remember (because they are defined in HTML, and used by browsers and other user-agents) are:

alt
Alternative text, for when a person or user-agent cannot see/display the image.
title
offers advisory information about the element for which it is set.
I.e. extra information.
Description
Sort of maps to longdesc, although the current WordPress implementation is better supported by user-agents.

These are not things that need to be apparent in the editing interface, but there does need to be a mapping between them.

Currently in the interface: ‘title’ maps to the image/link title, the ‘caption’ maps to alt text, and the ‘description’ to the longer description on the attachment’s page.

Caption is currently mis-leading, as a caption is something you expect to be visible. However, I suspect the best way to deal with this is to only have title or caption, not both.

I suggest that the ‘caption’ is removed, and the ‘title’ is the main thing for the image. This would then be used for the image alt when in the gallery. If people wish to use this as visible text next to an image, that’s fine, the image should then have a null alt (i.e. alt="").

Code changes

Even for the default code output, I do not believe that the use of a definition list makes sense. To have a wrapper around each image/caption pair is helpful for styling, but having multiple lists of 1 does not make sense.

A better default would be an unordered list, like this:

<ul class="wp-gallery">
<li><img src="" alt="[title]" /></li>
</ul>

If the visible-text approach was taken, it would be:

<li><img src="" alt="" /><p>Title text</p></li>

I’d also change the class to wp-gallery to decrease clashes with plugins and non-core galleries, but that’s a minor thing.

I’ve created a few examples to show the changes:

Hopefully these can be used by someone to make a patch?

Last modified: July 2, 2008

Contribute to this article:

NB: Posting a comment means that you agree to the comments policy.

NB: Your email will not be shown, published or used.

Allowed HTML tags: a, acronym, strong, code, em, blockquote, ul, ol, li.