Thursday 24 May 2007

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 prefer to compose the post in a text editor - (click on the thumbnail for a larger image)

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 code returned for an uploaded image

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!

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

Code changes highlighted and arrowed

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):

 

Sunrise in the City! - (click on the thumbnail for a larger image) Photograph: © David McMahon

 

That's ALL, folks

back to the top

 

13 comments:

david mcmahon said...

Hi El Tel,

Great tute. I would love to see this becoming a popular resource.

I think I did use the pic some months ago - under the headline (scratches head) ``Jose, Can You See, By Dawn's yearly Light''.

Then again, I may be wrong. Sorta rings a bell though ....

Cheers

David

Fletch said...

You're absolutely right! I've amended the text of the 'tute' to point to the original Jose, Can You See . . .

Now to wait and see if others find it easy enough to follow the instructions. Always room for change, especially if the 'instuctions' are confusing!

phaseoutgirl said...

Hey Terry,

Man, you have been working hard! By the way, I love the snapshot thing you have, especially for the links. It is nice to be able to see how the blogs layout looks like, in a snapshot.

How did you do this?

And by the way, I have been trying hard to figure out how to put a YouTube video onto my blog post, but have been unable to figure out why. I thiought it was just a simple thing of adding a page element, but nope...

uh-oh... more questions, right?

Thanks!!!
Cecilia

thanks!

Fletch said...

Hi Cecilia,

Good to see you're 'at it' again. Questions I can handle; answers are something else!

The 'SnapShots' thingy is an idea I stole from B.T.Bear's website (I think). Just click on the link at the bottom of the popup window and it takes you to their site where you need to enter some limited information. They will then give you the code and instructions about where to insert it. If you have a problem with it, let me know and I will walk you through the process!

I think the YouTube insertion is fairly simple, but I need to investigate first.

I'll get on to it right away.

Fletch said...

Cecilia,

The YouTube 'tute' is up. Email me if you're still experiencing problems.

I enjoyed doing this one, not least of all because of the video clip I've posted!

Gerry said...

Thank you very much for an amazing feature that greatly enhances the viewing of blog images. Your efforts are much appreciated. Also the instructions you give to implement are very simple to follow.

Small query. When I view a post that has an image with 'class-thickbox' using Google Reader the browser (IE or Firefox) present me with a dialogue box asking me if I want to open or save the jpeg file. Have you encountered this yourself, or is it likely to be something I've done wrong? It only seems to occur with images that I've uploaded using Blogger (new), not with images that I've hosted on another server.
Images that do show appear in a separate window/tab and haven't been through your code, but that's not really important.

Hope this makes sense! Don't worry too much about it, the code otherwise works fine in normal circumstances and I'm very grateful for that.

Regards,
gerry

Fletch said...

Hi Gerry,

Thanks for the kind comment.

I think the problem with your 'Blogger' uploaded images is that you may have overlooked removing the '-h' switch that Blogger gives you in the URL link of the image.

I think the 'switch' means 'hide', but don't quote me on that. Nobody has been able to confirm that for me, or offer an alternative explanation.

If I'm on the wrong track get back to me ASAP. I couldn't take a look at your page code because I couldn't track back to your Blog, but if you email me direct we can work on it together.

Gerry said...

hello, thanks for the quick response.

My blog (it's for testing so please ignore all the daft posts!) is pingyao48.blogspot.com. The latest post is for testing Thickbox and the html is quite simply

[a class="thickbox"
href="http://bp0.blogger.com/_OlWgO4jwhak/RncDu7AIaSI/AAAAAAAAAHo/JnCtLznA_oU/s1600/Tess+Garden+2.jpg"]
[img
src="http://bp0.blogger.com/_OlWgO4jwhak/RncDu7AIaSI/AAAAAAAAAHo/JnCtLznA_oU/s200/Tess+Garden+2.jpg" /] [/a]
test 1

i.e. I stripped out everything that might be extraneous.

As this is likely to be a Google Reader issue (not tested other readers, but your code works fine in normal circumstances) please don't waste too much of your time on this, but I was just wondering if you knew of anything I could add to the post to get round the problem. As I said before pics hosted elsewhere seem ok (I think!) and how many readers of the blog will be affected anyway. many thanks for your time.
Gerry

Fletch said...

Gerry,

Wandered across to your 'test' blog and, yup, the Thickbox test works fine. Don't forget (when stripping out stuff) that the "title" tag gives you a caption on the enlarged pic.

I left a comment about how Thickbox can be used to display a 'slideshow', something you might want to use to display a series of landscapes, etc.

There is an example on my old 'Sandbox' blog titled, Picture displays - 3 in case somebody else is following this thread . . .

Gerry said...

Hi Fletch, yes it works fine when viewing the pics via the blog, the problem only occurs, it seems, if you view a post (and the pics) via Google reader. Maybe like many other people I subscribe to many blogs and view the new posts from my reader (Google Reader in my case) and therein lies the problem! If the pics use 'thickbox' (or 'lightbox' for that matter) and the pics are hosted by Blogger then the box to download the pic will appear. Not good for the casual user! Maybe if you have an idle moment you could subscribe to your own blog and try to view the sunrise picture in the 'leap of faith too' post to see what I mean.
But no matter, as you say the 'thickbox' itself does what it is supposed to do, given the right conditions. I just have to decide whether a minor problem like this means I have to forgo using such a nice feature as 'thickbox'.
Thanks for the reminder about the slideshow idea, and yes, it was very pleasing on the eye! Sorry for such a long post.

Fletch said...

Gerry.

HAH!

I will sign up with 'Google Reader' just to experience this phenomenom.

I will also 'hassle' the Thickbox community (Cody in particular) to see if somebody can come up with a 'Blogger-Plugin', like they've done for Wordpress!

That way we (Bloggers) won't have to 'hack' away at the code, and they may well make the Reader compatible, too.

Standby for further updates!

Gerry said...

Thanks for sticking with it, but please bail out at any time!!
Just one final comment before I stop hassling you, just one more small detail that may/may not be relevant.

To use 'thickbox' we have to remove the '-h' in the pic title.

If you enter the original pic url (e.g. http://bp0.blogger.com/_fV9I2C_dAUY/RlYGj785bCI/
AAAAAAAAAEk/kEwBkFtkaXA/s1600-h/sunrise.jpg) )into the address field of your browser then the pic will load.
Enter the same url without the '-h' and you get the 'download/open' dialogue.

Strange?

Fletch said...

Hi Gerry,

Yes, it is 'strange' indeed. It was one of the stumbling blocks I came across whilst trying to research and make 'Thickbox' work on a Blogger post.

You're obviously more hands-on and intrigued than the 'average bear', so here is a brief history:

1. Ran the Thickbox integration on my 'Sandbox' successfully, but soon realised that I was hosting the blog on my own server and feeding the images to the post from the server. The users who were relying on uploading images to a Blogger-hosted blog were not having the same success.

2. Started up this blog using the 'bog-standard' blogging engine, and sure enough, I started to experience the same problem.

3. Contacted Cody Lindley (the author) who couldn't see what the problem is/was. Still hasn't come up with a solution, despite plug-ins being built for Wordpress, etc.

4. Started my own trials - more like trials & errors - and eventually whittled down the problem to what I considered to be the 'switch' ( -h ) that is used in the image URL. Removed it and, voilá, everything worked.

5. Not smart enough to build a plug-in for Blogger, so I've posted the 'extra' steps that need to be taken when somebody wishes to use the 'Thickbox' functionality.

I would be happy to continue further discussions/discoveries. It continues to intrigue me. And if you find solutions, feel free to post them here.

It can only be a 'win-win' for everybody!