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:



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.



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 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.



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.



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

Blogging Flickr photos (part 2)

The other day, I explained how to use Flickr's Blog This button. But unless I have a single photo to blog, and I don't want to add any links or formatting, I don't usually use Flickr's otherwise helpful "Blog This" button to blog about my photographs (or include photographs in my blog).

Blogger's Insert Images button, which you can find in the top part of the text box where you write your post is an easy way to add images to your blog.



To get started, click the Insert Images button. Your first task is to choose which image you want to insert. You can choose one from your computer by clicking on the Browse button or you can copy the URL of a photo out on the Web, for example, from Flickr.

Selecting an image from your computer is a simple way to get an image into your Blogger blog, but it has a couple of disadvantages. First, and foremost for me is that once you upload the image, it is somewhere on Blogger's servers. You can't edit, label, or tag the image, you can only replace it with another. And it's not easy to link to it from somewhere else, unless you upload it again following this same process. Still, if you don't have a Flickr account (or similar) to host your images, this is probably the easiest way to get them in your Blogger posts.

I do have a Flickr account though, so I want to enter the URL of my photo. Where do I find that URL?

First, view the image in Flickr. That URL up in the address bar will not do the trick unfortunately. (See how there's no ".jpg" extension at the end?)



Next, click the "All Sizes" button, just above the image.



Which size should you use? The answer depends on how big you want the image to be in your blog post. Blogger will let you choose a display size of Small (200 pixels wide), Medium (320 pixels wide), or Large (400 pixels wide) and then will automatically resize your Flickr image accordingly. But since large images take longer to load than small ones (regardless of the size that you display them at), you want to choose the size that is larger than but as close as possible to the final display size. If you choose a Flickr size that is much smaller than the eventual display size, Blogger will increase its size automatically, and though it will load faster, it will end up pixelated and/or blurry.

Once you've chosen the optimum size (I usually choose Medium), scroll down below the image and copy the URL next to option 2:



Then paste the URL in the Upload Images box back in Blogger:


Choose whether to flow the text around the image and on what side and choose whether the final display size should be Small (200 pixels wide), Medium (320 pixels wide), or Large (400 pixels wide).

Click Upload Image (which is a misnomer here since Blogger does not upload the image, but rather creates a link to the image that is already uploaded at Flickr).

The image is added to your blog post.

The advantage to using Blogger's Insert Images button is that it helps you size the image and flow the text around it without having to mess with the code.

You can, however, mess with the code if you're so inclined :)

Suppose you want more options than just Small, Medium or Large?

Once you've followed the steps above to add your image, click the Edit Html tab above the post box:



You'll see all the code that Blogger created for you in order to display your image at a particular size (and flow text around it). Slog through it until you see the Width information.



You can change that width to any number you like--in pixels.



Remember to choose a display size that matches the Flickr size you chose as closely as possible.

You can find Part 1 of this article, where I talk about Flickr's Blog This button, here. My preferred way to insert Flickr images into Blogger posts is described in part 3 of this article. In part 4, I'll show you how to wrap text around images inserted this way.

Embedding an Already Embedded YouTube Video

What do you do when you see a YouTube video and you want to either send someone a link to it, or embed it in your own page? It's easy if you're viewing the movie right at the YouTube site. You can find the link you need to copy in the address bar:



and the code to embed the video in your blog post or Web site is over in the right-hand column:



But what do you do if you've found an embedded YouTube video on someone else's blog or Web site? Normally, you'd right-click (or Control-click) to copy the URL, but that won't work in this case, you'll get the menu options for the Flash Player, which won't be helpful.



What you have to do is hover over the small upward arrow in the lower-right corner of the embedded Video until the Links icon appears:



Then click the Links icon and the video itself will shrink into the upper-left corner, while the code for Embedding the video and also for linking to it will appear on the right-hand side. Simply copy it to your blog post or Web page and you're all set.