gallery and caption

A Solution For The WordPress Gallery

November 16th, 2009 by Michael • WordPress Hacks36 Comments

There are things in WordPress, I do not like. This includes the gallery. Not that the idea behind it is bad. It is just poorly implemented. But only criticizing is not fair. Let’s see what you can do better.

The problem of the gallery is the style sheet, which is simply written in the Post. So that the page no longer validates. Additional problems arise when you want to change the look of the pictures in your theme for example. The style sheet in the post overwrites the values from the theme style sheet. How do the developers know if I like a 2px border #cfcfcf around my images? Something like this definitely does not belong in the code!

Cause of the problem is the ability to choose when you insert the gallery into the post, the number of columns (2-9). WordPress then calculates the width of the list elements by the number of selected columns and writes the values in the style sheet.

WordPress Gallery settings

An own gallery function

The function gallery_shortcode, which generates the gallery, can be found in wp-includes/media.php. For simplicity, we copy the complete function gallery_shortcode in to functions.php of the active theme. Then we rename the function, disable the function of WordPress and activate our own function:

  • //deactivate WordPress function
  • remove_shortcode('gallery', 'gallery_shortcode');
  • //activate own function
  • add_shortcode('gallery', 'wpe_gallery_shortcode');
  • //the own renamed function
  • function wpe_gallery_shortcode($attr) {
  • ...
  • }

We are now going to call up a post with an inserted gallery. It should all work exactly as before, except that our own gallery function is now active. Now let us take any necessary changes to improve the output of the gallery.

First, we delete the following line. Which calculates the column. We do not need it anymore.

  • $itemwidth = $columns > 0 ? floor(100/$columns) : 100;

Then we modify the variable $output. The style sheet will be completely erased. The inline style of the clearing br will be also removed. It’s more elegant in its own theme style sheet. Finally, the last br-tag gets removed. The revised code $output should now look like this:

  • $output = apply_filters('gallery_style', "
  • <div id='$selector' class='gallery galleryid-{$id}'>");
  • $i = 0;
  • foreach ( $attachments as $id => $attachment ) {
  • $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
  • $output .= "<{$itemtag} class='gallery-item'>";
  • $output .= "
  • <{$icontag} class='gallery-icon'>
  • $link
  • </{$icontag}>";
  • if ( $captiontag && trim($attachment->post_excerpt) ) {
  • $output .= "
  • <{$captiontag} class='gallery-caption'>
  • " . wptexturize($attachment->post_excerpt) . "
  • </{$captiontag}>";
  • }
  • $output .= "</{$itemtag}>";
  • if ( $columns > 0 && ++$i % $columns == 0 )
  • $output .= '<br />';
  • }
  • $output .= "</div>n";
  • return $output;

After we have updated the post in our browser, we see all the pictures one below the other. But the document is valid. Now we need to create the column functionality again, that we have erased before. We simply add one additional class with the number of columns in $itemtag:

  • $output .= "<{$itemtag} class='gallery-item col-{$columns}'>";

In your source code, depending on the number of columns you see

  • <dl class="gallery-item col-5">

Now, implement a few lines in the theme style sheet and the gallery is finished.

  • .gallery {
  • margin: auto;
  • /* gallery clearing*/
  • overflow: hidden;
  • width: 100%;
  • }
  • .gallery .gallery-item {
  • float: left;
  • margin-top: 10px;
  • text-align: center;
  • }
  • .gallery img {
  • border: 2px solid #cfcfcf;
  • }
  • .gallery .gallery-caption {
  • margin-left: 0;
  • }
  • .gallery br { clear: both }
  • /* available Columns */
  • .col-2 { width: 50% }
  • .col-3 { width: 33.333% }
  • .col-4 { width: 25% }
  • .col-5 { width: 20% }
  • .col-6 { width: 16.666% }
  • .col-7 { width: 14.285% }
  • .col-8 { width: 12.5% }
  • .col-9 { width: 11.111% }

WordPress gallery