Making Your WordPress Images More Than Just Eye Candy

Making Your WordPress Images More Than Just Eye Candy

Why do you include images in your WordPress posts?

Is it just to break up the text, make it look a bit prettier, a bit more inviting? Or are they an integral part of the story you are trying to tell?

Here’s how to elevate your WordPress images from eye candy to storytelling juggernauts with descriptions that overlay on click, automatically appear when the image is visible or form a CSS-inspired image maps.

Featured image
Make your images an integral part of your storytelling

I’ve mentioned The Brief before, the tablet-based digital magazine from the Innovation unit of the Australian public broadcaster, the ABC, when I wrote about horizontal-scrolling content.

What’s fascinating about the product is that every issue seems to incorporate yet another novel way to deliver content. The Brief’s treatment of images is the inspiration for this post and whilst I’m only going to scratch the surface, it does show just how unnecessarily boring and static traditional web content can be.

I’m going to show how to better integrate your images into your content by providing on-image information.

Using a small plugin, jQuery and CSS, we’ll add the capability for your WordPress site to:

  • Overlay a description on an image by clicking on the image
  • Create a CSS image map to allow displaying of multiple items of information by clicking on hotspots in the image
  • Automatically overlay a description on an image when the image is scrolled fully into view in the browser window

How It Works

The solution makes use of the caption shortcode so obviously the images have to have captions.

Extra attributes are added to the img tag to describe how the information is to be styled, the effect to be used to reveal the information and how the reveal is triggered.

A simple WordPress plugin adds the necessary scripts and CSS to the page output using the wp_enqueue_scripts action and also hooks into img_caption_shortcode to rewrite the HTML adding a description if necessary.

For the sake of compatibility I’ve used pretty much the same HTML as the default shortcode but really this solution should use the HTML5 figure and figcaption tags.

That’s all that takes place in WordPress itself; the rest of the solution is client-side, where a small script sets up event listening and handling. The inview trigger is provided by the Inview jQuery plugin, so a big thank you to author Christopher Blum.

The CSS is all fairly straight-forward but it’s probably worth pointing out that the image wrapper, div.wp-caption has its position set to relative whilst the description wrapper, div.wp-image-description is set to absolute. This makes it possible to keep the description within boundaries of the image.

Walking Through The Examples

Let’s walk through an example of each of the 3 techniques. Before doing anything else, though, install the plugin.

A Simple Overlay

Screengrab of an image with the description overlayed
Click on the image to reveal the description; click again to hide

This is the simplest technique and so is a good introduction.

First, jump into the WordPress Admin interface, go to Media, select an image to edit and some content to the Description. Make it of a reasonable length so that you’ve got something to work with.

Now go and create a post, click on Add Media, select that image you just edited and select none for the link. Insert the image.

Swap to Text view and on the <img> tag add the following attributes:

  • data-desc-style=”box-overlay”
  • data-desc-reveal=”fadein”
  • data-desc-trigger=”click”

Publish the post and view it. Clicking on the image should display your description in a 75% opaque box that’s probably the full-width of the image.

Go back to the post edit screen and add another attribute:

  • data-points=”10px,10px,60%”

Your caption shortcode should look something like this:

Click Update, refresh the post view and click on the image. This time you should find that the box only goes two-thirds of the way across the image and is slightly indented.

If you supply the data-points attribute, then the client-side script uses it to create a style attribute (top, left, width, height) which it then adds to description <div> thus overriding the box-overlay styling.

Not bad. Let’s get a little more complicated and build an image map.

Building A CSS Image Map

Screengrab showing the hotspot and the information displayed
Hotspots on the image control the information displayed

Remember the old HTML image maps? You could define hotspots on an image that could be hyperlinked. Well, this is providing the same sort of functionality but with CSS and jQuery and we are just going to use it to display different information depending on where the visitor clicked on the image.

Go to Media and pick a different image and edit it. Add some content to the Description but this time wrap it in a <div> as follows:

<div data-points="1%,1%,100px,100px">Your content....</div>

The data-points attribute defines the hotspot: in this case you’ll find it near the top left corner of the image. It’s very much trial and error to get the hotspot in the right place but doesn’t take long to get the hang of. I would recommend using % for top and left, otherwise you’ll find that any scaling of the image will throw out your hotspots.

Add as many hotspots as you like, coded exactly as above.

OK, back to the post, add the image via Add Media (making sure there’s a caption and the image is not linked) and then in text view add the following attribute to the img tag:

  • data-desc-style=”map”

Here’s the caption:

Update the post, refresh the view and scroll to the image. Now as you move your mouse over the image, the hotspots will show up as you mouseover. Click on a hotspot and the description will appear in the box-overlay at the bottom of the image.

This is a simple but really engaging technique. it works best for images where you’ve got a lot of points of interest. For example, The Brief used it to provide short bios on 7 new politicians by hotspotting their faces.

Those two examples were both based on the reader taking action but what about an automatic reveal?

Revealing A Description When The Image is In View

Screengrab showing the description on a fully viewable image
Description is only displayed when image is fully in view

So the idea here is to use the same box-overlay as the first example but for it to automatically appear when the image has fully scrolled into view (i.e. both top and bottom are visible).

It’s really like a lazy load but instead of loading the image, we are displaying a description, thanks to the Inview jQuery plugin.

If the image you used on the first example is a reasonable size then let’s reuse it; if not set up a new image. Remember, the image should be of a size where the whole image can fit in the viewport.

Once you’ve got the caption shortcode in your post, go to the Text view and ensure the <img> tag has the following attributes:

  • data-desc-style=”box-overlay”
  • data-desc-reveal=”fadein”
  • data-desc-trigger=”inview”
  • data-points=”10px,10px,60%”

The caption looks like this:

As you can see, it’s very similar to our first example, the only difference is that the trigger is now inview rather than click.

Update the post, refresh the post view and start scrolling. When the image first comes into view, the description should not be visible but as the bottom of the image comes into the viewport, the description will fade in.

If you keep scrolling (so that the top moves outside the viewport) then the description will disappear.

Extending The Solution

This solution is just begging to be extended, especially the reveals. The value of the data-desc-reveal gets added as a class to the div.wp-image-description when the trigger takes place, so adding new transitions is just a matter of adding the appropriate class.

There’s no rocket science here just some simple but effective techniques for elevating your images from eye candy to an integral component of your storytelling.