Creative Commons Image Basics

Kiddo wanted to know how to add an image to her blog and it was a question that came up over and over at WordCamp, too so I decided to pull together a basic tutorial. It’s a bit long-winded but I hope you find it helpful!

While it isn’t completely intuitive, Flickr offers a powerful search tool for finding Creative Commons images.

One option is to browse CC images: http://www.flickr.com/creativecommons/

The other is to search for something specific:

1. Go to the Advanced Search page: http://www.flickr.com/search/advanced/?
   (bookmark the link or click Search then Advanced Search which is in small print next to the big search button:)
2. Type in your keyword(s) as usual; generally most of the other settings are going to be unchanged.
3. Scroll down to the creative commons options. Check “only search within Creative Commons-licensed content”; you may also want to select “find content to use commercially” if you make any profit from your blog and/or “find content to modify, adapt or build upon” if you intend to edit or modify the image in any way — even cropping it.

4.  Search to find the image you want.

Once you have found the image you want, there are two ways to insert it into your blog.

The easiest way is to use Flickr’s HTML code option:

1. In the image page go to Share this then Grab the HTML/BBCode and select the size you want. Select and copy the code.
2. In your blog, go to the HTML or Source area and paste the code.  If you paste it at the start of a paragraph, the text will appear to the right and at the bottom of the image by default (see below):
   default text placement
3. To change the location of the text, you need to specify the alignment. To do this, go to almost the end of the code in the HTML, usually after alt=”image title” and before /> and add one of the following: align=”left” or align=”right”.

Here’s an example of the image aligned left. Basically, the text will start just to the left of the image and at the top. It will then continue wrapping until you run out of the vertical edge.

This can add to some strangeness if you don’t have enough text, so wherever possible, preview your blog post to avoid any weird paragraph behaviour.

Here’s an example of the image aligned right. As you can see, it acts in a similar way except that the text appears to the left of the image and will merrily wrap until you run out of vertical edge of the image.

Again, it may be beneficial to preview your post.

Keep in mind that some templates may strip out the align tag and your image may not end up where you want it.

No matter where you put the photo, don’t forget to properly attribute it (see below), even though the image will link back to the original on Flickr.

The other option is to download a copy of the image and upload it to your blog.

1. In the image page, go to Actions then select View All Sizes. Select and download the appropriate size.
2. Open the downloaded image in your image editor of choice. When you save the image, change the name to the image title underscore Flickr username so that you can track the attribution more easily (especially if you download multiple images).
3. Upload the image to your blog — in WordPress you can either add the image to your gallery first, or just insert it in your post by clicking the add image icon
4. From there you will be able to set the image size and location in your post.
5. Don’t forget, when you’re uploading a photo this way, you still need to provide attribution (see below)

PHEW!

A note about attribution:

There are many variations on attribution but a good faith use of Creative Commons includes 5 things:

• any copyright notices are kept intact
• the author/creator is credited
• the title of the work is provided
• the URL to the original is provided
• the appropriate license is noted and a link provided

Example, for the photo used in the examples above:

“balloon more colours,” © 2008 Patrick Dinnen, used under a Creative Commons Attribution-ShareAlike license: http://creativecommons.org/licenses/by-sa/2.0/deed.en_CA

For more information about attribution please see:  http://wiki.creativecommons.org/Marking/Users