DIY Slideshows on WordPress.com

Sat, 26 Jan 2013

Filed under Blogging
Tags: accessible, alternative, css, diy, html, image, slideshow, wordpress.com

one response

I use a screen reader called JAWS (and sometimes NVDA) to browse the web and for updating my blog. It does a pretty good job of most things. But it can’t cope with WP’s visual editor. One consequence of which is that I can’t create image galleries or slideshows—at least, not by conventional means.

This post is based on lessons learnt from putting together a selection of my favourite viral images and outlines an accessible, do-it-yourself alternative to WP’s proprietary method for creating slideshows.

Difficulty Level: Moderate

The following instructions are not for WP newbies. You’ll need to know your way around your blog’s dashboard, how to upload files to your media library, and how to create a new post in the text editor. A working knowledge of HTML and CSS is assumed.

To start, you should be signed into WP with your blog’s dashboard open in your browser.

Upload Images

First, go to Media > Add New and upload your images. There’s a multi-file uploader, but it wouldn’t work with my screen reader. I had to upload my images one by one which was boring beyond belief. 😦

Anyways, when you’re finished, go to Media > Library and open a duplicate of the current page in a new tab or window of your browser. The reason for this will be explained later.

The Table of Contents

Next, go to Posts > Add New. Give the post a title like “A Simple Slideshow”, or whatever you prefer. Make sure the editor is in text mode.

Let’s say there are five images in your slideshow: first.jpg, second.jpg, etc. The post will be split up using the nextpage tag (<!--nextpage-->) to allow every image to have its own page or “slide”.

The first page in the post will be taken up by a table of contents with links to all the slides in your slideshow. The first image (first.jpg) will be on page 2, the second (second.jpg) on page 3, and so on.

Bearing all this in mind, the HTML for the table of contents should resemble the following:

<h3>Table of Contents</h3>

<ul>
<li><a href="2/">First Image</a></li>
<li><a href="3/">Second Image</a></li>
<li><a href="4/">Third Image</a></li>
<li><a href="5/">Fourth Image</a></li>
<li><a href="6/">Fifth Image</a></li>
</ul>

Feel free to customise the text above to suit your needs, but don’t change the order or values of the href attributes.

Slide Containing Image

Here’s where things start to get interesting (ie, tricky ;-)). You need to know two things at this point:

1. the dimensions of first.jpg
2. the maximum width for your theme

To find out the former, switch back to the browser left open on your blog’s Media Library page, find first.jpg in the table, and shift-click on the link to open a new browser window with an Edit Media page for first.jpg. Under the Save heading (the last heading on the page), you’ll find the image’s URL and dimensions. I noticed that all filenames are converted to lowercase when uploaded, btw.

As for the latter, follow the link provided above and search for your theme in the table generously provided by Panos. Note that the maximum width for your theme can vary depending on whether you’re editing a page, or a post, or how many sidebars you’ve activated, etc. Read the table and footnotes carefully.

Let’s assume that first.jpg has a URL of http://yourblog.files.wordpress.com/2013/01/first.jpg, is 400 × 300 pixels, and doesn’t exceed your theme’s maximum width. In which case, the HTML for the first slide should look something like this:

<!--nextpage-->

<div style="text-align:center;">
<h3>First Image (Slide 1 of 5)</h3>

<p><img src="http://yourblog.files.wordpress.com/2013/01/first.jpg"
title="First Image" alt="Description of First Image"
style="border:0;padding:0;width:400px;height:300px;" /></p>

<p><a href="../6/">&laquo; last</a> |
<a href="../">toc</a> |
<a href="../3/">next &raquo;</a></p>
</div>

Please note the following:

• The <div> ... </div> is used to centre everything. Simply leave it out if that’s not what you want.

• Always include values for the title and alt attributes. They’re used by screen readers to describe the contents of the image.

• There was an invisible cushion of pixels around my images which I wanted to get rid of. I experimented with the values for the border, margin, and padding CSS properties and hit upon the right combination through trial and error. Ymmv depending on your theme selection.

• Because this is the first slide, there is no previous slide to link to. I linked to the last slide instead to create a circle of links. But that’s just me being slightly OCD.

Slide Containing Oversized Image

So far, so good. But let’s say second.jpg is 680 × 410 pixels and the maximum width for your theme is 600 pixels. What to do?

Well, I suppose you could resize the image. Difficult if you use a screen reader. And then there’s the loss of quality in the resized (smaller) image as well as the issue of keeping track of different versions of the same image. Argh! 😡

Imho, the best thing to do is specify a width for the image that doesn’t exceed your theme’s maximum width, and add a link to the full-sized image that will open in a new browser window when clicked. Care should be taken to preserve the aspect ratio when overriding an image’s actual dimensions. I found this handy online aspect ratio calculator that does all the number crunching for you.

Given all this information, the HTML for the second slide would be similar to:

<!--nextpage-->

<div style="text-align:center;">
<h3>Second Image (Slide 2 of 5)</h3>

<p><img src="http://yourblog.files.wordpress.com/2013/01/second.jpg"
title="Second Image" alt="Description of Second Image"
style="border:0;padding:0;width:544px;height:328px;" /></p>

<p>[ <a href="http://yourblog.files.wordpress.com/2013/01/second.jpg"
target="_blank">View Full-Sized Image</a> ]</p>

<p><a href="../2/">&laquo; first</a> |
<a href="../">toc</a> |
<a href="../4/">next &raquo;</a></p>
</div>

And that is more or less it. You should be able to put together the rest yourself. 😀

If you have any questions or suggestions about this post, please leave a comment below and I’ll try to respond asap.

Comments Feed