Sunday, February 04, 2007

Blogging flickr hosted pictures

I guess I'm the last person to notice the following phrase on flickr:

Remember! Flickr Terms of Service specify that if you post a Flickr photo on an external website, the photo must link back to its photo page. (So, use Option 1.)

So far, I always used the second option providing the URL instead of the first option providing the HTML code. As soon as I include the HTML code, the photo doesn't fit into the column and goes all over the place destroying the entire layout of my blog. So my question for flickr-user is: How do you post your pics on blogger? If using the second option, is there a certain trick to it that I haven't noticed?

This Post was written by Eva from Sweet Sins


ilva said...

You can choose different sizes, I do that (I find that the medium fits perfectly into my Blogger template)and I have had to adapt the way I shoot the pics, I shoot them vertically instead of horizontally if you get what I mean. Is that of any help?

maki said...

You can alway specify a different width value for the img. So what you can do is to select the size (from 'all sizes') that is the closest to the width you want, say the Medium which is 500 pixels wide, and if 400 pixels wide fits your layout change the width value to 400, and delete the height value statment (the part that says height="somenumber". (if you leave in the height value the img will scale in a funny way.) That way the img will scale itself automatically.

Not exactly correct if you are strict about correct HTML markup, but it's the easiest way to make an img 'scale' on your page to fit. Remember not to choose a huge size though since your site visitors will still have to download the original big image file to view it even if you artificially scale it down on your page.

Haalo said...

You can also just resize your photos to your blog columns maximum width, say 400px before loading them onto flickr - then you don't need to make any adjustments. Free programs like Infranview will do that if you don't have already have some kind of imaging software.

Kalyn said...

Another great program which is free and good for resizing photos as well as editing is Adobe Light Room. I love this program. I think it will soon be released and then it will no longer be free, so get it now!

ParisBreakfasts said...

I recently noticed that warning too.
But I post my pictures 1st to my blog from my desktop.
Then I add them to Flickr, so I hope that doesn't apply to me.

They make it sound like they own usage of your pictures..?

kiplog said...

Your pictures will always look better if they appear on your page at their 'native' size'. So editing their size first or choosing both the column size and the Flickr size perfect for your layout and photo is ideal.

For advanced CSS tinkerers, and ignoring my own advice above - a little known trick is to make your images a bit elastic with some CSS -

Make sure the images in the main section of your HTML have no height or width dimensions in the img tag.

Add a CSS rule to your styles that selects only the images in that main area (a div with an ID of 'main' for example). Add percentage width and max-width declarations to it. -

#main img {
width: 80%;
max-width: 500px;

You can add padding in percentages too, for some room around it.

So in English, the rule says, all the images ONLY inside the main content, should be sized at 80% of the column width. The max-width isn't understand by Internet Explorer and only is needed if your columns were 'stretchy' beyond a certain point, since you don't want your pictures getting pixelated if someone stretches their browser window really wide.

maki said...

ParisBreakfasts (love your paintings btw!), I think that the flickr rule applies in general to images you put there, since you are using their bandwidth if you link to images on their servers. I do what you do to a lot of the time - upload to both my site and flickr - since what I like about flickr is not that it's a place to dump images since storage space etc. are not an issue for me, but the community aspects and other things (like integration with etc.

Danahli said...

I usually link the photo directly to its parent picture. As for size, I just resize the height to what I want (and what fits in my column). I make my image height=225. And I agree with Kalyn, Adobe Lightroom is an awesome program. I highly recommend the beta version, before they start selling it.

Haalo said...

Lightroom beta expires Feb 28th, after that you'll need to buy a copy.

Eva said...

Looks like there are some real pros out there - thanks for all the advice! Having only little CSS and HTML knowledge, I'll slowly work my way through... Luckily, I have a beta version of Light Room but so far haven't found the time to really get to know all the features. BTW, I had the same feeling as parisbreakfast but I see that there are a lot of ways to work around those rules. Many thanks again!