Tuesday, February 8, 2011

Using Flickr photos in blog posts - tutorial

Maybe you remember way back in November when I compared 2 different ways of adding photos to blog posts? Uploading directly in Blogger (etc) compared to using Flickr code. Since then I've been meaning to do a tutorial for using Flickr, because that definitely gives the better result.

So here it is! You'll need a Flickr account of course. You can blog other people's photos this way too, but it's best to ask for permission first. :-) I'll be using this photo of wrapping paper.

By the way, last year I wrote a tutorial for blogging photos directly from Flickr, but you can only blog one photo at a time that way. Using the method below you can add as many photos as you fancy.

Flickr-blog screenshot 1
Go over to Flickr and find the photo you want to use. Click on the "Share this" button above the photo. You'll get a few options, but we're only interested in the "Grab the HTML/BBCode" bit, so click on that and you'll get a few more options.

Make sure the "HTML" button is ticked for use in your blog posts. "BBCode" is used on forums and stuff.

Flickr-blog screenshot 2
Like this: you can pick the size you want the photo to be on your blog. My content column is fairly wide, so I use a fairly large photo size as well, the 'Medium 640' option in Flickr. Pick the size you want and then click inside the box with the code, highlight the code and copy it (Ctrl+c).

The number in the name refers to the width of the image in pixels. You can see the width and hight for each size in the brackets next to each size. It doesn't mean that if you pick the 'Small' size your image will show up as exactly 240 x 159 pixels. The Flickr image code will always reduce or enlarge keeping the same ratio relationship between width and height. So if for example your image is 240 x 400 pixels, it will not suddenly be squashed down to 159 pixels! 


Unless you really want it to, but then you have to do it manually! ;-)

Flickr-blog screenshot 3
Head over to your blog post and make sure you are in "Edit HTML" mode, using the tabs at the top right.

Then paste the code from Flickr into the post. If none of the size options from Flickr fit the width of your content column, don't worry, you can set the width of the photo manually.

In the code you pasted find the width="500" (or whatever number it is) and change it to a larger or smaller number as required. When you change the width manually, the height will not be reset automatically. But don't worry, you won't need to get out the calculator to find out what size to set it to. Simply delete the height="whatevernumber" and it will be fine. As long as the width is set it's all good.

And that is about it - there is one more thing you can do with the photo-

First, though, I just thought I should mention that it is always best to use the whole HTML code that Flickr generates for our pictures and not just the img bit with the actual photo link. It is a free hosting service, basically (unless you go pro of course, but it's still quite cheap, yo) and it also makes it easy for people who see your photos, to visit your Flickr stream and see more of your creations.


From the Flickr Community Guidelines: "Do link back to Flickr when you post your Flickr content elsewhere.
Flickr makes it possible to post content hosted on Flickr to other web sites. However, pages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr. This provides a way to get more information about the content and the photographer."


Flickr-blog screenshot 4
Once you have added your photo, go back to the "Compose" mode and click once on the photo so it becomes highlighted, then click on the 'Alignment' tool in the toolbar and pick the 'align center' option. Ok, you don't have to do this - but in my humble opinion it looks nicer when photos are aligned this way. :-)

Pretty
Pretty wrapping paper, right? I loves me some wrapping paper! We've got more than we need, really, but don't tell Tony because then he's just going to say I shouldn't buy any more! ;-)

. . . . . . . . . . . . . . . . . . . . . . . . .

2 comments:

Rachel M said...

Gosh I feel like giving you a kiss on the cheek! I've been trying to work out how to do this for ages, but failed miserably. Thank you so much for this tutorial! :)

CraftCrave said...

Just a quick note to let you know that a link to this post will be placed on CraftCrave today [09 Feb 12:00am GMT]. Thanks, Maria