What is the proper way to attribute content from Flickr that is available under a CC license? Here’s a summary, based on CC-recommended best practices for attribution. We are going to do it manually, without the aid of plug-ins, bookmarklets, or other fancy tools so that you can see how this works. You may be able to use other tools like photopin to reduce the amount of work required.
Recommended attribution practices from Creativecommons.org
This will take you to the tutorial on best practices for attribution.
Sample ideal attribution
Title, Author, Source, License or “TASL” is the goal. Let’s learn how to do this from scratch without any other helper applications or plug-ins.
Minimal HTML required
You will need to fill in 6 pieces of information and glue it together with a tiny amount of HTML in order to correctly attribute the resource. We’re going to link the source to the title, provide the name of the author, along with a link to his profile page, and provide the name of the license and a link back to the license deed. Let’s get started.
- Open http://www.flickr.com
- Type in a search term: “greyhound”.
- Adjust the license search parameters – I’ve chosen the least restrictive Creative Commons license.
Choose an image and download it
To the right and below the image, click the down arrow to bring up the image download page.
Download, rename, and upload to WordPress
- Choose a size to download.
- Click on the size.
- This will start the download.
- Locate the image on your computer. Rename it something better than the random name that Flickr assigned to it.
- I renamed this one “running-greyhound.jpg.”
- For the next few steps, you’ll need access to both Flickr and to your WordPress site.
- Open a new tab or a new browser window. Login to your WordPress site.
- Upload the image to WordPress using “New>Media” or similar.
- Click on “Edit”.
Edit uploaded image to add attribution information
Now that you’re editing the image, you should see something similar to what is shown below.
We’re going to build the attribution in the image caption box. The caption box lets you use basic HTML.
Locate the share button to get the URL for the photo page
Switch back to the browser tab that has Flickr open. On the right-hand side of the page, below the photo, you should see three icons: the star for favoriting items, the share arrow and the download icon. Click on the middle button, the share arrow.
Clicking on the share arrow reveals the link to the Flickr page.
Copy the link by hitting Ctl-C or Cmd-C.
Now it’s time to begin building a tiny bit of HTML.
Switch back to the tab with WordPress open. In the caption box, type/copy/paste the following:
<a href=”PhotoLink”>Title</a>, by <a href=”AuthorLink”>Author Name</a>, is licensed under <a href=”CCLink”>CC License Name</a>.
Now replace PhotoLink with the link to the photo, which is https://flic.kr/p/DyC5z for the image that I’m using.
Now get author and title information and add that in
On the lefthand side of the page, below the photo, we find the title and photograher.
- Here’s the title: “Moby”.
- Here’s the photographer: “David Merrett”.
- Continue editing the link so that it looks like this now:
<a href=”https://flic.kr/p/DyC5z“>Moby</a>, by <a href=”AuthorLink”>David Merrett</a>, is licensed under <a href=”CCLink”>CC License Name</a>.
We are making progress! Just a few more steps.
Add the link to the photographer’s profile
- Right click on the photographer’s name.
- Copy the link to his profile.
- Replace the “AuthorLink” text with the link that you copied:
Now get the Creative Commons information
Almost there! This is the last step.
- To the right beneath the photo, click on “Some rights reserved”.
- This will take you to the CC license deed page.
Adding the CC license information
Clicking the link above should take you to the Creative Commons license page for the photo.
1. Copy the text in parentheses – this is the short-form name of the license.
Modify the caption so that it looks like this now:
2. Now copy the URL displayed in the address bar and modify the caption one more time to add the link to the license:
<a href=”https://flic.kr/p/DyC5z”>Moby</a>, by <a href=”https://www.flickr.com/photos/davehamster/“>David Merrett</a>, is licensed under <a href=”https://creativecommons.org/licenses/by/2.0/“>CC BY 2.0</a>.
Back in WordPress, make sure to save your work
This will save the caption for the photo and now you have all of the information that you need for a perfect A+ attribution. This is also a good time to put in some “Alt” text for your visually impaired users. For example, you might put “Image of running greyhound” or similar.
Now you can use the image by inserting it into a post as you normally would.
Not every theme will display a caption beneath the photo. In that case, you’ll need to copy the caption information and then paste it directly into the post (or at the bottom of the post if you find the in-line caption distracting). Switch to the “Text” tab from the “Visual” tab if you’re doing any cutting and pasting of HTML.
What if it partially displays but looks “broken” in some fashion? Well, HTML is very picky about quotations and brackets. Make sure that you very carefully stayed inside the quotation marks and that each tag is used correctly. You might wish to start by copying the boilerplate text from above rather than typing it in. That will lead to fewer errors as you fill in the additional information.