Leap of Faith, too . . . Implementing Thickbox

I am about to use one of David McMahon's original high-res photographs that he sent me some time ago, but which he hasn't actually posted on his blog one that he published on authorblog titled Jose, Can You See . . .. This should demonstrate how a 'medium-sized' picture on a Blogger page (as displayed on David's blog and reproduced in a similar size here) can be viewed at its best by using the 'Thickbox' technique. I like the effect very much; you have to decide whether it is something you'd like to use, too!

OK, let us make a start!

---------------------------------------------------------------------------------

1. Choose to make a new post (I don't think I need to add screencaps for the obvious steps - but correct me if I am wrong).

---------------------------------------------------------------------------------

2. Choose your method, 'Compose' or 'Edit HTML'. I prefer the latter because I have more control, but your mileage will vary. Be warned, you will HAVE to use 'Edit HTML' at a later stage.

I also compose my posts in a text editor outside the post window, and when I am satisfied that everything is as I want it, I copy/paste into the editing window and save it (but, of course, Blogger has introduced an 'Auto-save' feature which is an excellent idea!). You can see from the 'screencap' that I have already started to format my paragaraphs and, where required, to italicise or bold the text.

---------------------------------------------------------------------------------

3. Before I upload the image I need to take a look at its size in 'high-res' format. This one happens to be 3008-pixels-wide and 2000-pixels-high (size: 827,906 Bytes).

• Far too large to display as a standalone image in a new window; the viewer would be forced to use scroll bars to view the whole image.
• Far too large to save many images of this size to your (limited) Blogger disk space allocation.
• Far too large for a user with a dial-up connection (DUN) who would have to wait an interminable age for the picture to download and appear on his or her screen.

'Thickbox' will automatically adjust it to a viewable size that will display centred in the available space in the viewing window, whatever the screen resolution the viewer is using, but the other two factors mentioned above are still important, because Thickbox will NOT resize your raw picture for you.

I will now upload the image after having reduced it to 800px by 532px (size: 22,382 Bytes). I simply used Irfanview (discussed elsewhere) to reduce the width to 800 pixels and it did the rest for me:

The first thing to notice is how Blogger 'codes' the HTML for the image. In the 'screencap' I have deliberately NOT posted any text so that you get an idea of what sort of thing you need to look for when you start to fiddle with the HTML. In any event Blogger ALWAYS places the uploaded image at the beginning of your post, regardless of where you last placed your cursor. This is an annoying quirk but, we can use it to our advantage if we know that the last image uploaded will always be the first bit of text you come across when you're editing in HTML.

I have highlighted and arrowed the characters "-h" that appear immediately after "s1600". REMOVE THEM. Do it the first time you see your code so that you don't forget later when you're adding other bits as explained in step 4 below!

---------------------------------------------------------------------------------

4. Here is the same code again, but note the highlighted additions (errmmm... the deletion is obvious by no longer appearing there!).

1. Added the code for centering the paragraph and 'closed' the tag.
2. Added the 'class' telling the script to call up Thickbox.
3. Added the 'title' text.
4. Added the 'alt' text.

---------------------------------------------------------------------------------

Whew! That was a toughie - FOR ME. I began to get confused as to whether I was adding screen captures or the actual picture. Had to delete and re-upload a couple of times. But, if you've come this far, then here is the original David McMahon photograph (slaps head! - must remember to add the copyright):

 

Photograph: © David McMahon

 

That's ALL, folks