WordPress has a built-in media library management system with the ability to display photographs in a tabular gallery style. The images themselves are all associated with a particular page or post. For a simple blogging site this is fine, but for me this presents two problems:

  • I have lots of photos that I want to present in many different galleries.
  • I don’t want to have to load them separately into each page that is displaying the gallery

There are several great gallery add-ons for WordPress which help address these issues as well as providing many additional photo management features. Although I’ve used a few of them in the past, part of my approach to my new site design is to use out of the box functionality wherever possible; In particular for image management.

So I needed a simple way of putting a gallery on a page and then being able to easily choose images from anywhere on my site. The approach I’m going to outline is not for the serious WordPress developer because it does not follow good WordPress coding standards. But, it easy to use and easy for somebody with a blog but no real html/php experience.

The first step in the process was to place a standard WordPress gallery on a page (left in draft mode for the whole of this exercise). This was done so that I could copy its html and styles.

I then deleted the standard gallery and switched the page view into html mode and pasted the copied html and styles into the post/page at the place I wanted it to appear. The gallery is now back, but crucially, because the gallery is now just html & styles, I can treat the images just like any other image inserted into a post. So I can select them individually, edit them or select new ones from anywhere else in the site.

So far so good.

The only real issue I bumped into was that the gallery didn’t layout quite as I wanted. The (non-technical) reason for this is that WordPress takes over the text you type in (even in html mode) and manipulates it so that it is suitable for a blog post. For the most part this is fine and works well. But in my case the translation breaks the gallery layout because of the way it treats newlines (<br/> in html).

I gave up looking for a solution after some Googling and decided to fix it myself. Basically wherever one of the broken <br/> tags appear in the gallery, I replaced it with my WordPress safe <br/>. The approach I used to sod this was to create a WordPress short code that bypasses WordPress’s tag manipulated. So, the general structure becomes:

A line of gallery images
One or two of my <br/> short codes
A line of gallery images
One or two of my <br/> short codes

Anyway, by way of example, this is the “code” to insert into the post/page’s html view to get a 4 column gallery:

<div id="gallery-1" class="gallery galleryid-390 gallery-columns-4 gallery-size-thumbnail"><dl class="gallery-item"><dt class="gallery-icon"><a title="Chrysanthemum" href="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Chrysanthemum.jpg">
<img class="attachment-thumbnail" title="Chrysanthemum" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Chrysanthemum-150×112.jpg" alt="Chrysanthemum" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">Seascapes</dd></dl><dl class="gallery-item"><dt class="gallery-icon"><a title="Desert" href="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Desert.jpg">
<img class="attachment-thumbnail" title="Desert" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Desert-150×112.jpg" alt="Desert" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">Infrared</dd></dl><dl class="gallery-item"><dt class="gallery-icon"><a title="Hydrangeas" href="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Hydrangeas.jpg">
<img class="attachment-thumbnail" title="Hydrangeas" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Hydrangeas-150×112.jpg" alt="Hydrangeas" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">Black &amp; White</dd></dl><dl class="gallery-item"><dt class="gallery-icon"><a title="Jellyfish" href="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Jellyfish.jpg">
<img class="attachment-thumbnail" title="Jellyfish" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Jellyfish-150×112.jpg" alt="Jellyfish" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">Mountains</dd></dl>
[[br style=’clear:both;’]]

<dl class="gallery-item"><dt class="gallery-icon"><a title="Koala" href="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Koala.jpg">
<img class="attachment-thumbnail" title="Koala" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Koala-150×112.jpg" alt="Koala" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">Long Exposure</dd></dl><dl class="gallery-item"><dt class="gallery-icon"><a title="Lighthouse" href="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Lighthouse.jpg">
<img class="attachment-thumbnail" title="Lighthouse" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Lighthouse-150×112.jpg" alt="Lighthouse" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">Toned</dd></dl><dl class="gallery-item"><dt class="gallery-icon"><a title="Penguins" href="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Penguins.jpg">
<img class="attachment-thumbnail" title="Penguins" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Penguins-150×112.jpg" alt="Penguins" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">BBC</dd></dl><dl class="gallery-item"><dt class="gallery-icon"><a title="Tulips" href="http://www.bbc.co.uk"><img class="attachment-thumbnail" title="Tulips" src="http://www.chrisblakephotography.co.uk/wp-content/uploads/2012/01/Tulips-150×112.jpg" alt="Tulips" width="150" height="112" /></a></dt><dd class="wp-caption-text gallery-caption">BBC</dd></dl>
[[br style=’clear:both;’]][[br style=’clear:both;’]]


The “br style=’clear:both;'” in square brackets is my short code that bypasses WordPress’s translation routine and outputs the correct newline (break in html). The code for this is:

function apBR_ShortCode( $atts, $content = null ) {
"style" => ‘clear:both;’
), $atts));

return $content . ‘<br style="’.$style.’">’;
add_shortcode(‘br’, ‘apBR_ShortCode’);

This needs to be placed in your functions.php file. You can easily paste this in by going to the Appearance Menu, then choosing Editor. On the edit page choose the functions.php (depending on your version of WordPress it may be titled “Theme Functions”). Paste the short code code at the end of the file and press the “Update File” button.

And that’s it! You now have a four column gallery that you have control over. The above technique allows one gallery per page, but I’ll blog later about the (easy) extension you need to allow multiple galleries on a page.

Categories: ArticlesBlog


Leave a Reply

Avatar placeholder