Tuesday, 8 May 2007

TIP - Picture displays 101(a)

Let us step back to the original request about how to insert a picture within a post so that, when clicked, it will take the viewer to a larger version of the same picture, hence allowing more detailed examination.

The only caveat I would add here is that you should try and keep your original pic to a reasonable size, say 800 pixels wide, so that people with slower dial-up connections don't have to wait an age for them to be downloaded to their screen. The real down-side to making the pictures 'huge' is that people might stop visiting if they feel that they have to wait an unnecessarily long time for something to display!

My Cyprus Garden - View 1

These are views of my garden when I was lucky enough to live in Cyprus for a short time. The house and garden were perched on top of a cliff that overlooked the blue Mediterranean. Glorious!

My Cyprus Garden - View 2

I just uploaded the originals to Blogger, chose to have them display as 'centred' and in a 'medium' format (size) on the page, and Blogger did the rest.

Now that Blogger had done the hard work I then clicked on the 'edit' icon below the post and chose to edit the HTML version, but only to add a couple of little 'extras'.

image edit screencap

You should make it a rule for any picture you display on your site to 'identify' it by giving it some 'alt' text. This helps the visually impaired who may be using a screen reader to access your blog. I did this in the code that Blogger generated. The second thing I did was to insert target="_blank" at the end of the code line so that when a viewer clicks on the picture it is opened in a new window. Frowned on by the W3C standards validation people, but I will explain my reasons at a later date!

Nothing difficult about that, huh?

back to the top


Let's take another tilt at this windmill . . .

I started the 'Sandbox' on the 29th April in response to questions on David McMahon's authorblog, about how to achieve simple picture displays.

In my haste I completely overlooked the fact that I was hosting my blog on my own server, and that editing it to achieve the results I was after was a bit 'geeky' and that it concentrated on editing HTML code. Not something everybody is familiar or comfortable with!

A comment on the Sandbox by 'papoosue', who has a blog called Random Blethers, gently reminded me that not everything I assumed was a simple task, was actually that 'simple'. I gulped, and decided that, to meet the needs of the visitors to David's superb blog, who come to him with many questions and varying degrees of ability, that any explanation needed to concentrate on how things are done using Blogger's excellent built-in system of 'editing'.

The ability to edit most of your display, especially by manipulating the template you've chosen, already exists within the Dashboard elements of Blogger, so why not give your site that 'unique' look?

You could even register another blog, not publish it, but use that as the 'testbed' for any changes you wish to introduce. That way you won't break your original, and when you're satisfied that you have achieved the design of your choice, then copy it across!

So, what are you waiting for?

back to the top