Easy Blogging Tips, part II: Photos & other slightly advanced topics

This is my second in a series to help new bloggers add bits of fanciness to their blogs. (Here is the first.) If you ever wondered, "How did they do that?" feel free to ask in the comments, and I'll try and answer, either here in this entry, or in a future article.

In this article, I cover how to add pictures to your blog, as well as create links to specific spots on your pages, make bulleted or numbered lists, and links that open in a new window.

To skip to a particular topic, click on the links below:

• Pictures


• Pictures with Flickr


• Clickable Pictures


• Named Anchors


• Bulleted or Numbered Lists


• Links that open in a new window

---

• Pictures
  
  The first thing you need is a place where your pictures will be stored. For the purpose of example, I will use Flickr. There are many other sites which allow you to upload photos, many of them free.
  
  It is NOT NICE to link directly to someone's picture without their permission; doing so is referred to as being a "bandwidth hog". It puts a load on a server anytime someone views your page. If you put someone else's photo on your page, you are using their bandwidth to send that photo to your viewer, with no other indication that the photo is not yours. Don't be a bandwidth hog. If you want to use a photo, ask permission, then download it, and upload it to where you store your photos. Or link to the web page and not to the photo.
  
  Once you have uploaded photos to a place like that, you need to know the URL (web address) for the picture, and it should end in jpg or gif. (There are other extensions possible, but these are the most common.) You can test this by loading the URL in your web browser - all you should see is the image, without any text surrounding it. If you want to be sure, you can right-click over the image and select View Image. (This works in Firefox; I'm not 100% sure this is right for Internet Explorer, but it will be something similar.)
  
  Once you have the URL for the picture, it is easy to get it into your blog entry. You need to use the img tag, and a src attribute.
  
  So if I want to link to my TSF button in my Flickr account, I do the following.
  
  
  
  1. Go to the Flickr page for my button, which I've uploaded to Flickr.
  
  
  2. Right-click on the image and select "View Image".
  
  
  3. Copy the url that shows:
     

     http://farm1.static.flickr.com/167/422212214_4ac4545cd3.jpg?v=0

  
  
  4. Use that as the src attribute in an img tag.
  
  Here is the code that I use:
  

  <img src="http://farm1.static.flickr.com/167/422212214_4ac4545cd3.jpg?v=0">

  
  Looks like:
  
  
  
  
  You can modify the width or height of it by specifying the attributes width or height. You can specify both, but it will distort the picture exactly as you tell it, so it's best to specify at most one of width or height. If you use Flickr, you can see your photo in multiple sizes and it will give you the URL to use (see below).
  


• Pictures with Flickr
  If you use Flickr, there is an easier way to get code to include your pictures. It is technically in the Flickr user policy that Flickr photos should be links back to the photo's page in Flickr. This way does it for you.
  
  
  1. Go to the photo's page.
  
  
  2. Click on "ALL SIZES" - it's just above the photo, under the name of the photo, between "BLOG THIS" and "ORDER PRINTS". This brings you to a page where the photo is shown in the original size (the size you uploaded).
  
  
  3. At the top is "Available sizes" and a list: square, thumbnail, small, medium, and Original. Click on them to see the various sizes.
  
  
  4. When you see the size you want, scroll down to the bottom of the page. Where it says "1. Copy and paste this HTML into your webpage", click in the text box and it should highlight the whole shebang. Copy (Control-C), and paste the code into your blog post.
  
  
  5. Note also that if you just want to get the url (say, for an img tag, as described above), this page also gives the url at "2. Grab the photo's URL".
  
  
  
  



• Clickable Pictures
  
  

  Sometimes you want to have a photo be clickable - that is, the reader can click on your photo and go to another page. This is useful for buttons for KALs and such.
  
  

  A clickable picture is nothing more than an img tag inside an anchor tag. So to make my TSF button click away to The Harlot's page on TSF, I use this code:
  

  <a href="http://www.yarnharlot.ca/blog/tsffaq.html">
    <img src="http://farm1.static.flickr.com/167/422212214_4ac4545cd3.jpg?v=0">
  </a>

  
  Which looks like:
  
  


• Named Anchors.
  These are cool - I use them inside my Knitblog Lingo page. This is two parts - you know you want to be able to click to somewhere not at the top of a page. At that point, you put an anchor tag but instead of href, you use name="some_name_you_made_up". It is best if this name only has letters and _ in it. Then, where you want to be clickable, you use a regular anchor tag, but at the end of the url you tack on #some_name_you_made_up.
  
  Example of an anchor tag; it is what is on KAL on the Knitblog Lingo page:
  

  <a name="KAL">KAL</a>

  
  Example of a link to the anchor tag; the anchor is on the URL: http://knitswithasilentk.blogspot.com/2007/03/knitblog_lingo.html:
  

  <a href="http://knitswithasilentk.blogspot.com/2007/03/knitblog_lingo.html#KAL">KAL</a>

  
  Looks like:
  KAL
  


• Bulleted or Numbered Lists
  These are created with the ol tag (for ordered lists, i.e., numbered) or with the ul tag for bullets. Inside the ol or ul tag, use the li tag for each element. The numbering will be automatic. Closing li elements is usually forgiven (that is, nothing bad will happen), but you should try and remember to do it anyway.
  
  Example: Here is my list:
  
  <ul>
  <li>This is the first element</li>
  <li>Close tags are optional with li.
  <li>But you still need the open tag for each element.
  It doesn't matter whether you start a new line or not.
  </ul>
  
  <ol>
  <li>This is a numbered list.</li>
  <li>I prefer to close tags whenever possible. I'm anal like that.</li>
  </ol>
  
  

  Looks like:
  

  
  
  • This is the first element
  
  
  • Close tags are optional with li.
    
  • But you still need the open tag for each element.
    It doesn't matter whether you start a new line or not.
    
  
  
  
  
  
  1. This is a numbered list.
  
  
  2. I prefer to close tags whenever possible. I'm anal like that.
  
  
  
  


• Links that open in a new window
  

  If you want to give your readers a link, but want it to open in a new window, then all you do is add a target="_blank" attribute to the anchor tag.
  
  Example:
  

  <a href="http://knitswithasilentk.blogspot.com/2007/03/knitblog_lingo.html#KAL" 
    target="_blank">KAL</a>

  
  It looks the same:
  KAL, but click it and see what happens.
  
  What if you don't want a link to open in a new window? If you are using a browser that supports tabbed browsing, right click on the link and you can open it in a new tab.