Monday, September 22, 2008

Blogging Flickr photos (part 3)

It seems crazy that I have now spent huge amounts of time explaining how to blog Flickr photos using two methods that I practicallly never use. The first method, using Flickr's Blog This button is great for blogging about a single photo when you don't need to add a lot of extra formatting. The second method, using Blogger's Insert Images button is best if you haven't already uploaded your photos or if you're not interested in linking them back to your Flickr site.

But the truth is, I want people who read my blog to go browse my Flickr images (and I want people who browse my Flickr images to read my blog :). While the first method described above will create a link to my photo's Flickr page, I can't deal with the limited formatting and only being able to include a single photo. So, I'll explain my favorite method of blogging Flickr photos.

First, go to the Flickr page of the first photo that you want to write about. Click the All Sizes button above the photo:

All Sizes button

On the Available Sizes page, choose the size with the width that is closest to the final size that you want to display the photo at. I'm going to display my photos 400 pixels wide, so I choose the Medium size which is 500 pixels wide.

Choose best size

A 500-pixel wide version of your photo will be displayed. Below the image itself, you'll find a chunk of HTML code that displays the image and creates a link to the image's Flickr page.

Copy Flickr code for Blogger

Copy that chunk of code.

Now, switch to Blogger and paste the HTML code into your post. Notice the width and height attributes near the end of the code.

Size of Flickr photo in Blogger

You can now adjust the width to the desired number of pixels (400 in our example). Get rid of the height attribute altogether; the height will be calculated by the browser automatically, depending on what you put in for width.

Change size of Flickr photo in Blogger

Why is there so much code there? The a tag is the link part that will bring visitors to your Flickr page when they click the image. The title attribute within the a tag displays descriptive text when your visitor hovers over the image. The text is generated automatically from the title of your Flickr photo, and then your Flickr name is added. I generally remove "by Liz Castro on Flickr", mostly because it takes up too much room. You can edit it as desired.

The img tag is what displays the image itself. The alt attribute will also display when visitors hover over the image but is overridden by the a tag's title attribute described in the previous paragraph. Why use both? The alt attribute is required for validation and also for Internet Explorer 5.

It seems like rather a lot to get photos into your Blogger post, but I'm pretty sure it's the easiest and best way. Add a comment if you've got a better method.

(Earlier, I described how to use Flickr's Blog This button to add Flickr photos to your Blogger posts. In part 2 of this series, I showed how you could use Blogger's Insert Images button to add Flickr photos to your Blogger posts. The method that I prefer is the one described in the post you're reading now.)

12 comments:

  1. Great tutorial, using your preferred method though how do I get the image to be left alligned with the text wrapping on the right side?

    Kind regards
    DWBell

    ReplyDelete
  2. Ooh, good question. Give me a day or so and I'll see if I can give you a good answer.

    ReplyDelete
  3. Hi,
    Well, I'm going to go into this in more detail in a future blog post, but I think the basic answer is to add style="float:left; margin:0 10px 10px 0;border:0" within the img tag, which is what Blogger would have added, had you used its automatic insert image feature.

    Does that help?

    best,
    Liz

    ReplyDelete
  4. Liz, thanks for your response.

    My work around at present is a little long winded. I work in the html pane and then hit the add picture icon. I paste the second line from flickr in the from the web section, I then choose if it should be left right or centre then upload and done. Now back in the html pane I edit the code it created and add the link to the actual flickr page into the generated code as replacement for the first link. Now I have wrappable image and it links to my flickr site when clicked. All trial and error and I hate the clumsyness of it all so look forward to your future post!

    Appreciate you taking the time to look into for me.

    Kind regards,
    DWBell

    ReplyDelete
  5. Hi. Yes! That's how I started it... but then I just copied out the interesting bit and added that to code from Flickr.

    Full details here. Hope you find it useful.

    best,
    Liz

    ReplyDelete
  6. Thank you so much! This is exactly the information I was looking for.

    ReplyDelete
  7. Hallelujah! My prayers have been answered! I've been struggling with the problem of pictures being to large when uploaded from flickr for awhile now.... thank you so much :)

    ReplyDelete
  8. this was perfect! i just joined flickr, and now, with your help, i can post pictures so easily. very good tutorial. thank you!

    ReplyDelete
  9. Thanks so much for this. The quality of photos on Typepad when they come from Flickr is so much better than uploading them directly. This was very useful.

    ReplyDelete
  10. This is exactly the answer I was looking for. Thank you!!

    ReplyDelete
  11. thanks for this, I could not find this info on blogger or flickr anywhere!!

    ReplyDelete

More of my books