Saturday, July 01, 2006

Image Test

My apologies for the name of the post. "Image Test" is a good example of post title drift. This started out as an attempt to see if I could upload a picture, then I added examples and more points.

Now, it's a tutorial, for one of the easiest, yet sometimes least obvious, way to make your blog user friendly. Using images in your blog is easy, but using them effectively takes a bit of thinking. Maybe this article will make you think.

What I'll include here is several examples of simple but effective uses of images in a blog. After each example, I'll include the code, character for character (with exception to the note, below) used to create that example.
Now, since I have your attention, be advised that all example code below has been liberally seeded with gratuitous line breaks and spaces, to break up long lines of text, and thus prevent the usual post / sidebar alignment problems. The gratuitous line breaks make the code easier to read - human eyes can only absorb so much information in one stream, which is why we break text into lines, and paragraphs.

When you embed the code in your blog, those extra line breaks will break the code. Be sure to remove all gratuitous line breaks from your code, before publishing. And if you're in any way curious about how I setup this page, and showed the HTML so neatly, with links from section to section, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox.

>> Top

A URL

Here is a URL. See how simple it is? http://blogging.nitecruzr.net/2006/07/image-test.html
http://blogging.nitecruzr.net/ 2006/07/image-test.html
A URL is simply the address of a file, somewhere on the web. In this example, it's the address of this web page.

>> Top

A Hyperlink, With A Hidden URL

Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is hidden, unlike a hyperlink with a visible URL. The hyperlink points to another example in this post. Click on the link, and see for yourself. Check This Out
<a href="#Picture"> Check This Out</a>
A hyperlink is simply any object (here, a caption, "Check This Out"), surrounded by a clickable URL.

A hyperlink with a hidden URL is cleaner, and easier to read, than a hyperlink with a visible URL. Plain text is easier on the eyes. Replace the caption with a picture, and you have a button. Note that I used an internal anchor ("#Picture") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.

>> Top

A Hyperlink, With A Visible URL

Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is visible, unlike a hyperlink with a hidden URL. The hyperlink points to another example in this post. Click on the link, and see for yourself. http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture
<a href="#Picture">a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture</a>
A hyperlink is simply any object (here, a visible URL), surrounded by a clickable URL. A visible URL might be used in articles that you would plan to copy into a text document.

When you copy text containing a visible URL, the copy target will contain useful information, unlike a hyperlink with a hidden URL. Note that I used an internal anchor ("http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture") in this example, rather than a simple URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.

>> Top

A Hyperlink, With The Target Opening In A New Window

Here is a hyperlink, with the target opening in a new window. The hyperlink points to another example in this post. Click on the link, and see for yourself.
<a href="#Picture" target="_blank"><img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>
A hyperlink is simply any object (here, a visible URL), surrounded by a clickable URL. Adding ' target="_blank"' (note the preceding extra space!) makes the target contents open in a new window (or tab, depending upon your browser).

>> Top

An Embedded Picture

Here is a picture, embedded in the post. See how simple it is? You can't click on this picture. Try it and see. See the difference between this, and an external picture?
<img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif">
An embedded picture is simply a URL of a file containing an image, specified as an image. Surround it with a hidden URL, and you have a button. If you like, you can add text beside and / or below, the picture.

>> Top

An External Picture Here is a link to a picture, displayed externally. See the difference between this, and an embedded picture? Check This Out
<a href="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif">Check This Out</a>
An external picture is simply a URL of a file containing an image, specified as a hyperlink. Or it's a caption ("Check This Out"), surrounded by a clickable URL.

>> Top

An External Picture, Opening In A New Window

Here is a link to a picture, displayed externally. This will open a new window, to save the reader from having to use the Back button, or allow to compare the original display with the resulting display. Check This Out
<a href="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" target="_blank">Check This Out</a>
An external picture is simply a URL of a file containing an image, specified as a hyperlink. Or it's a caption ("Check This Out"), surrounded by a clickable URL. Adding " target="_blank"" to the anchor tag makes the picture open in a new window. You can add " target="_blank"" to any anchor tag, with this result.

>> Top

A Button

Here is a button, that is, a picture with a URL attached, as a link. The button, as with the hyperlink above, links to another example in this post. Click on the picture, and see for yourself.
<a href="#PictureText"> <img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>
A button is simply an embedded picture, surrounded by a hidden URL. If you like, you can add text beside and / or below, the picture. Making the button image isn't complicated. You can use any graphics or word processing program, that produces image files. Or, the right CSS / HTML code can be used to make a simple button image.

Note that I used an internal anchor ("#PictureText") to another section in this tutorial, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html#PictureText). You can read about Anchors, which let you jump to a specific section of a post rather than to the top of the post, in Putting Anchors, and HTML, In Your Posts

>> Top

A Button, With The Target Opening In A New Window

Here is a button, that is, a picture with a URL attached, as a link. The button, as with the hyperlink above, links to another example in this post, and the target opens in a new window (or tab). Click on the picture, and see for yourself.
<a href="#PictureText" target="_blank"> <img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>
A button is simply an embedded picture, surrounded by a hidden URL. If you like, you can add text beside and / or below, the picture. Adding " target="_blank"" to the anchor tag makes the picture open in a new window. You can add " target="_blank"" to any anchor tag, with this result.

Note that I used an internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).

>> Top

A Picture, With Text

Here is a picture, following text, with text beside it, and text below it. You can't click on this picture. Try it and see. Here is a first picture, with textHere is text, beside the first picture.
Here is text, below the first picture. Here is a second picture, with textHere is text, beside the second picture.
Here is text, below the second picture.
<img alt="Here is a first picture" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;">Here is text, beside the first picture. <br clear="left" /> Here is text, below the first picture. <br /> <img alt="Here is a second picture" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;">Here is text, beside the second picture. <br clear="left" /> Here is text, below the second picture.
The break record ("<br clear="left" />") is a key element here. You need the break, clearing on the left after that, to force text below the picture. As noted, this is a nonclickable picture. You could do the same, though, with a clickable Blogger hosted photo. You may find additional ideas for positioning images and text together, in this W3Schools Tutorial Exercise.

>> Top

A Button, With Text

Here is a button, following text, with text beside it, and text below it. A button is a clickable picture, that links to a post somewhere. This button, as with the hyperlink above, links to another example in this post. Click on the button, and see for yourself. Here is a button, with text Here is text, beside the button.
Here is text, below the button.
<a href="#PictureText"><img alt="Here is a button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;"></a> Here is text, beside the button. <br clear="left" /> Here is text, below the button.
The break record ("<br clear="left" />") is a key element here. Since the picture floats on the left, you need the break, clearing on the left after that, to force text below the picture. Here is a second button, with text Here is text, beside a second button.
Here is text, below the button.
<a href="#PictureText"><img alt="Here is a second button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:right;"></a> Here is text, beside a second button. <br clear="right" /> Here is text, below the button.
The break record ("<br clear="right" />") is a key element here. Since the picture floats on the right, you need the break, clearing on the right after that, to force text below the picture. Here is a third button, with text Here is text, beside a third button.
Here is text, below the button.
<a href="#PictureText"><img alt="Here is a third button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:right;"></a> <span style="float:right; text-align:right;">Here is text, beside a third button.</span> <br clear="right" /> <span style="float:right; text-align:right;">Here is text, below the button.</span>
The break record ("<br clear="right" />") is a key element here. Since the picture floats on the right, you need the break, clearing on the right after that, to force text below the picture. Click on the buttons, and you'll see that they take you to another portion of this article.

You could, just as easily, have them take you to another picture. Note that I used an internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).

>> Top

A Picture, With No Border

Here are two pictures, the first has default style, with a border surrounding it. The second has no border. Here is a picture, with a border Here is a picture, with a border.
Here is a picture, with no border Here is a picture, with no border.
<img alt="Here is a picture, with a border" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;"> Here is a picture, with a border. <br clear="left" /><img alt="Here is a picture, with no border" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px; float:left;"> Here is a picture, with no border.


>> Top

An Enlargeable Picture

Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files.
  • A thumbnail copy of the picture.
  • A full size copy of the picture.
The thumbnail copy is displayed in the post, with the full size copy linked to the thumbnail (instead of a jump to another post, you jump to the full size copy). If you upload your picture, but don't want it clickable, you simply edit the code, and you end up with an embedded picture. Or you could link to another post, and use the picture as a button. Here are a couple recipe pictures, so I can demonstrate this. Click on the pictures, and see the full size photos. Then, check out the recipes. Chuck's Cabbage / Shrimp Salad
And the best thing is, this is totally healthy (if you use low carb Cannola oil). Chuck's Potato / Leek Soup
This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0048%201280.1.jpg"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0018.jpg"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>
See the "<br clear="left" />" following the caption for each picture? As indicated in A Picture, With Text, it forces all subsequent pictures and text to start below the picture.

>> Top

An Enlargeable Picture, With A MouseOver Popup

Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files.
  • A thumbnail copy of the picture.
  • A full size copy of the picture.
The thumbnail copy is displayed in the post, with the full size copy linked to the thumbnail (instead of a jump to another post, you jump to the full size copy). And to that, we can add a popup, with the title of the picture. Here are a couple recipe pictures, so I can demonstrate this. Click on the pictures, and see the full size photos. Then, check out the recipes. Chuck's Cabbage / Shrimp Salad
And the best thing is, this is totally healthy (if you use low carb Cannola oil). Chuck's Potato / Leek Soup
This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0048%201280.1.jpg" title="Chuck's Cabbage / Shrimp Salad"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0018.jpg" title="Chuck's Potato / Leek Soup"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>
See the "<br clear="left" />" following the caption for each picture? As indicated in A Picture, With Text, it forces all subsequent pictures and text to start below the picture.

>> Top

An Enlargeable Picture, Opening In A New Window

The immediately above example, An Enlargeable Picture, gives you two images to look at:
  • A thumbnail copy, which you can see in the post, with the text.
  • A full sized copy, which you can see by clicking on the thumbnail.
Maybe you would like the reader to examine the full sized picture, while reading the text. Most browsers have a context menu, generally accessed by right clicking the mouse on the object of interest - in this case the thumbnail picture. In the context menu, they'll probably have, among other selections
  • Open Link In New Tab
  • Open Link In New Window
Any time the reader wishes to see the linked picture in a new window or tab, he / she simply selects the appropriate context menu entry. If you wish to make it easier for the reader, you can add
target="_blank"
to the anchor link, and automatically open the full sized picture in a new tab or window. This is similar to the above example A Picture, Displayed Externally, Opening In A New Window. Here are a couple recipe pictures, so I can demonstrate this. Click on the pictures, and see the full size photos. Then, check out the recipes. Note that the final result, whether the picture opens in a new tab or window, will be according to the Tabbed Browsing settings in each readers browser. If the user elects to open new windows in a new tab, that's where the new picture will open.
Chuck's Cabbage / Shrimp Salad
And the best thing is, this is totally healthy (if you use low carb Cannola oil).

Chuck's Potato / Leek Soup
This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/5304/92/1600/DSCF0048%201280.1.jpg" target="_blank"> <img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/5304/92/1600/DSCF0018.jpg" target="_blank"> <img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>


See the "<br clear="left" />" following the caption for each picture? As indicated in A Picture, With Text, it forces all subsequent pictures and text to start below the picture.

>> Top

For additional advice about using pictures in your posts, see Arranging Pictures In Your Posts, and Arranging Pictures In Your Posts, Side By Side. If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.

>> Top

20 comments:

Anonymous said...

Hi Chuck, thanks for the tutorial. Have you tried these things in new blogger yet? I tried the tip at
http://bloggerstatusforreal.blogspot.com/2006/07/image-test.html#PictureText
for forcing text to start below an image with the "float=left" style property (using <br clear="left">) and it seemed to be ignored.

Chuck said...

See if you can spot the test.

maggienikole said...

thank you for the tips on removing the border on photos. still having trouble though, not sure why i can't seem to get it to work. grrr. it looks so simple any more advice?

Chuck said...

Maggie,

Do you have an open thread in How Do I??? If not, we would all maybe benefit if you start one.

Mrs Guru said...

What a great site! I'm so glad I found you as I'm trying to do some updates to my sites. You are marked as an important FAVORITE!

Thanks,
Mrs Guru

A Bisht said...

Recently when i uploaded an image in my blogger post, i found the following code in my image upload code.

onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"

Although there are no problems, and the image showed successfully, I curious what does the abov line mean and is it safe to have the line in the code.
Thanks

MaryMartha said...

Hi, Chuck. How do I link from a specific text term in one post of my blog to the same term in another post, same blog. If you've addressed this somewhere already, let me know where. Thanks. MM

Chuck said...

MaryMartha,

What you want, I think, is called an Internal Anchor. I show you an Internal Anchor in my section on Buttons.

If you need more detail on this, why not post in GBH: How Do I?? The online forums are much easier to use, then Blogger Blog Commenting, for interactive problem solving.

MaryMartha said...

WooHoo! It's working! I went to some forums and because your response suggested to me some different search terms to use, I found what I needed. Thanks for your great service to new bloggers. MM

Summer said...

Thanks Chuck! This really helps! ^^
Your tutorial is nice and great too!
~Sara-Jane (Malaysian)

CC. said...

Is it possible to have links open in new windows from the link list gadget??

Chuck said...

CC,

Nope. And we've asked for this, a few times.

theotherbed said...

Whoah, I came here to figure out how to put a caption on an image in a post, but I'm taking away the leek and potato soup recipe!

Who knew? A techie and a foodie!

TOB

admin said...

sir please help me, i create a blog on blogspot.com which is based on scraps and comments for facebook,Hi5,myspce,tagged like these social site.so i want that every image in my post has a link below the images so people can just automatically sleect the link and paste in social site.how to do that.i see many blog in that the images has a embeding code bleow the image like in image hosting site.please help me

Chuck said...

Tammy,

I'm going to strongly suggest that you post your questions in Blogger Help Group, where you can enjoy the benefits of peer support.

chu onuhgu said...

s you are simply a genius and your food is simply
tantalising.

JAWhite said...

Hi: I have just sent my father, a retired Missionary, a copy and the url for your sign "Other answers are needed too". He and I will be hoping to build a page for his collected works soon.

Thanks so much for your continued help in Blog support.

Dawn Farias said...

Thanks for this post. Originally, I followed your directions for all links to open in a new window, but realized that I have so many internal links, I thought that that general solution wouldn't be user friendly.

Not wanting my readers to lose their place at my site, though, I went in and added the target code for individual outgoing links. Thanks so much!!

Michael Bass said...

This is a great posting of many of the needed examples needed for posting images and links; thanks!

The one example that seems to be missing is to have a text link with mouse rollover to display an image, and then have the image disappear when the mouse rolls off the text link.

ONCE UPON A TIME said...

this finally helped me, thank's!