Easy Way Of Getting Control Of The Images in a WordPress Gallery

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
etc…

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.polestarphotography.co.uk/wp-content/uploads/2012/01/Chrysanthemum.jpg">
<img class="attachment-thumbnail" title="Chrysanthemum" src="http://www.polestarphotography.co.uk/wp-content/uploads/2012/01/Chrysanthemum-150x112.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.polestarphotography.co.uk/wp-content/uploads/2012/01/Desert.jpg">
<img class="attachment-thumbnail" title="Desert" src="http://www.polestarphotography.co.uk/wp-content/uploads/2012/01/Desert-150x112.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.polestarphotography.co.uk/wp-content/uploads/2012/01/Hydrangeas.jpg">
<img class="attachment-thumbnail" title="Hydrangeas" src="http://www.polestarphotography.co.uk/wp-content/uploads/2012/01/Hydrangeas-150x112.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.polestarphotography.co.uk/wp-content/uploads/2012/01/Jellyfish.jpg">
<img class="attachment-thumbnail" title="Jellyfish" src="http://www.polestarphotography.co.uk/wp-content/uploads/2012/01/Jellyfish-150x112.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.polestarphotography.co.uk/wp-content/uploads/2012/01/Koala.jpg">
<img class="attachment-thumbnail" title="Koala" src="http://www.polestarphotography.co.uk/wp-content/uploads/2012/01/Koala-150x112.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.polestarphotography.co.uk/wp-content/uploads/2012/01/Lighthouse.jpg">
<img class="attachment-thumbnail" title="Lighthouse" src="http://www.polestarphotography.co.uk/wp-content/uploads/2012/01/Lighthouse-150x112.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.polestarphotography.co.uk/wp-content/uploads/2012/01/Penguins.jpg">
<img class="attachment-thumbnail" title="Penguins" src="http://www.polestarphotography.co.uk/wp-content/uploads/2012/01/Penguins-150x112.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.polestarphotography.co.uk/wp-content/uploads/2012/01/Tulips-150x112.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;']

</div>

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 ) {
	extract(shortcode_atts(array(
		"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.

Why Are Wedding Photographers “So” Expensive?

A wedding photographer in the USA (Nikki Wagner) has posted a very well written argument explaining why wedding photographers are “so” expensive. Her post was written in a response to a bride-to-be in the Seattle area complaining about photography charges.

The crux of her argument is that many people, perhaps the majority of people, fail to recognise that professional photographers either work for a company or are operating their own company. You may only appear to turn up at a shoot (or wedding) with “only a camera and some lenses”, but when you operate a business you have inevitable overheads. These have to be paid for, and as with any viable business it’s the clients/customers that pay.

Anyway, both complaint and response are recommended reads, whether you are a wedding or any other professional photographer:

 

Video of a DLSR Mirror and Sensor Curtain In Action

The video above is a high speed capture of a DSLR’s (Canon 60D) mirror and curtain operation. So, if you’ve ever wondered what happens mechanically inside your camera when you press the shutter button check it out.

Going back to previous posts about mirrors in DSLRs (here and here), it’s interesting to see how much the mirror and curtains bounce around!

(via DIY Photography)

Becoming Emotionally Attached To A Photograph

An East Coast Beach With Moon

An East Coast Beach With Moon

Now that I’ve redesigned my website I’ve started to go back through my (digital) photo catalogue to create some new galleries. The image to the right is one of my 300D shots from 2004 (iso 400, f11, 1/320s). This is an image I keep returning to time and again. Each time I try a little change here and a little change there. I try editing in Lightroom, Aperture and Photoshop. I try colour and black and white and, in this version, a blue & sepia split tone.

I think on any objective assessment I’m wasting my time with this image. Let’s face it, it’s not that good. It has some interesting features, such as the groyne leading out to sea, a pretty much full moon and the groyne and moon sort of balancing each other in the frame. But, in reality, there’s too much lost space in the middle, the moon is too far into the corner, the beach & sea too close to the bottom, the foreground is too dark (pushed in this version creating artefacts), the focus isn’t sharp and the overall image is flat and grainy. Oh, and I don’t even know where it was taken. It’s somewhere on England’s east coast, probably between Scarborough and Skegness.

So why do I keep going back to it, when in reality I know I’m not going to be able to turn it into a picture I’m proud of. I think it’s because, despite all it’s short comings, I do have an emotional attachment to it. In this case it has nothing to do with the trip I was on or the circumstances at the time. No, in this case it is because it was the first opportunity I had with my first digital SLR to take more than a snap. I saw the moon, saw the lead ins, tried to compose for the scene’s obvious potential and took a few shots. Could it have been done better? Yes, absolutely, although I suspect this was as good as it got for me at the time. And that’s just it, regardless of where I feel my photography is now, I’m proud of this image, warts and all, and I’m sure I’ll keep going back to it!

Early HDR Photos at Holy Island

This is the first article in a occasional series I’ll be running looking at some of my early attempts at various photographic techniques. In September 2005 Kim & I were at one of our favourite photo locations, England’s north east coast (the bit between north Newcastle and the Scottish border).

The image below (Canon 300D, ISO100, 32mm, 1/6s, f29) is a shot of one of the old fishing boats on Holy Island with Lindisfarne Castle in the background. There are several in this harbour in various states of disrepair. I was quite close to the boat when I took the shot so even at f29 the immediate foreground and background are not in focus. These are aren’t the only technical failings either I’m sure you’ll agree!

Boat on Holy Island - Original

Boat on Holy Island - Original

But, even though it had plenty of technical issues I still quite liked the shot, so I decided to post-process it using an HDR technique, using Photomatix. I’d not set out with this intention so I didn’t have multiple actual exposures to play with so I created -1 and +1 stop virtual images in Lightroom and used these for the HDR image.

Boat on Holy Island - HDR

Boat on Holy Island - HDR

The processing has had a noticeable effect to:

  • deepened the blue (unrealistically) in the sky and bringing out some of the faint cloud structure
  • increase the local contrast to give certain areas more definition, eg on the water and around the flowers
  • increase brightness in the shadow areas of the boat and shaded grass

Looking back now I think I over-processed the image. It suffers from banding and quite serious halo effects. Also, it’s getting to the point of looking quite artificial, almost like painting. At the time though it did leave me impressed with the possibilities that HDR offered and what could be achieved with practise and more attention to detail.