How to Post Photos on Your Blog

Something that's come up in our class is how to best get Flickr photos onto a blog. We went over it a bit in class, but I'm going to put instructions on here.

The easiest way is if you have a Flickr Pro account and you're working with your own photos or the photos of someone who has given others permission to use their photos through a Creative Commons license.

At the top of every photo, if you have a Flickr Pro account, there is a menu that includes "all sizes."
Click on "all sizes" and choose the size you want to include on your blog (probably small or medium, depending on your blog and the photo).

If the photo belongs to you or has been licensed for sharing, scroll down and you'll see something like this:

Assuming you want to link back to Flickr, copy the HTML from the top window into your blog post window. Note that if you're in "Compose" mode in Blogger, you don't have to go into "Edit HTML." I copied and pasted it in, and voila:



But! What if your situation is not so straightforward? What if you wanted to, er, borrow photos without permission? (Because clearly that person didn't know how to put a Creative Commons license on their photos, right?) Or, what if they are sharing their work, but you don't have a Pro account? Or what if you're using a photo that's not on Flickr?

What you do is find your photo of choice in your size of choice (if applicable), then control-click (Mac) or right-click (PC) and choose "Copy Image Location" (or the equivalent). Then use this HTML code:

<img src="http://imageurl.jpg">

But, what if you want that photo to link back to the page you got it from (or some other web page)? Go copy the URL for your desired page and use this code:

<a href="http://webpage.com"><img src="http://imageurl.jpg"></a>

But but, what if you want it centered? Do this:

<center><a href="http://webpage.com"><img src="http://imageurl.jpg"></a></center>

You can put those <center> </center> tags around your code copied and pasted from Flickr as well.

What if you want to insert your photo via the Blogger add image tool (if you have the image on your hard drive), and you want to add a link (to Flickr or wherever)? Click on this icon:


Browse to find the photo on your computer, choose your preferred size and alignment, and click to upload. It will put the image at the top of your blog post. Super annoying. You can click on the image to select it, then cut (Mac: command-X; PC: ctrl-X) and paste it in your desired location.

To make that photo into a link, find your desired URL, select the photo (still within your Compose window), and click the Link icon:


Paste your URL in there, and it will link-ify your image (you can check in Preview to make sure it worked). You can also go into Edit HTML and work from there, but if you're not familiar with HTML it's a little scary looking.

If you have any questions or problems, please feel free to ask in the comments, and I'll do my best to answer.

Update: I realized that even if another Flickr user is allowing their photos to be used by others, the HTML code to copy and paste isn't there unless they're your own photos. So if you want to use someone else's photos, use the code I provided with the photo URL and page URL.

Blogger, Flickr, and Copyright

I decided while I was at it, I would check out the copyright policies for Blogger and Flickr, since those are the two websites where I post my creative (in the loose sense of the term, heh heh) work.

Flickr, via Yahoo!, says in its Terms of Service:

Yahoo! does not claim ownership of Content you submit or make available for inclusion on the Service. However, with respect to Content you submit or make available for inclusion on publicly accessible areas of the Service, you grant Yahoo! the following worldwide, royalty-free and non-exclusive license(s), as applicable:

With respect to photos, graphics, audio or video you submit or make available for inclusion on publicly accessible areas of the Service other than Yahoo! Groups, the license to use, distribute, reproduce, modify, adapt, publicly perform and publicly display such Content on the Service solely for the purpose for which such Content was submitted or made available. This license exists only for as long as you elect to continue to include such Content on the Service and will terminate at the time you remove or Yahoo! removes such Content from the Service.

(Section 9, incl. Paragraph B)

That "solely for the purpose for which such Content was submitted or made available" part is significantly different from YouTube. It seems like basically they're saying, if you upload your work, it's okay for us to display on the website... which is what happens when you upload your work. I might be wrong though.

The Blogger TOS says:

Your Intellectual Property Rights. Google claims no ownership or control over any Content submitted, posted or displayed by you on or through Google services. You or a third party licensor, as appropriate, retain all patent, trademark and copyright to any Content you submit, post or display on or through Google services and you are responsible for protecting those rights, as appropriate. By submitting, posting or displaying Content on or through Google services which are intended to be available to the members of the public, you grant Google a worldwide, non-exclusive, royalty-free license to reproduce, publish and distribute such Content on Google services for the purpose of displaying and distributing Google services. Google furthermore reserves the right to refuse to accept, post, display or transmit any Content in its sole discretion.

(From Section 6, emphasis in the original)

So they can use my work, but again not to the same extent as YouTube. Interesting.