ange fitzpatrick: librarian gone rogue

An extra bite of the extra thing- CC images

  by  Taekwonweirdo 

I’m responding to my recent Cam23 2.0 post on using ImageCodr to smarten up your CC attributions for flickr images. It’s a neat tool, but not neat enough it seems. Some of you folk want to move things around and fiddle with the settings- more power to you!

We use ImageCodr to attribute our images on the Judge Business School Information Services website, but sometimes having the CC license and the flickr link right below the picture gets in the way of bullet points, or forces a big gap between image and content- not a great look, and a real problem when you use thumbnails.

To get round this at Judge we split the HTML that ImageCodr produces, and we do it like this.

Ok, so we’ve got our image and ImageCodr has generated the code:

If you don’t want the attribution to appear directly under the picture you can split the code into image and attribution. In the example above the image section is between the first two <a> </a> tags:

<a href=’http://www.flickr.com/photos/topatoco/3350262608/’ target=’_blank’><img src=’http://farm4.static.flickr.com/3552/3350262608_2cb64f6a63_m.jpg’ alt=’Librarian Love! by TopatoCo, on Flickr’ title=’Librarian Love! by TopatoCo, on Flickr’ border=’0’/></a>

Paste this in at the top of your post (in the HTML tab), you then get just the image. Notice how it still links back to the original source.

The accreditation is the rest of the code- one set of <a> </a> tags for the license image, and one for the flickr link:

<a href=’http://creativecommons.org/licenses/by-nc-sa/2.0/’ target=’_blank’><img src=’http://i.creativecommons.org/l/by-nc-sa/2.0/80x15.png’ alt=’Creative Commons Attribution-Noncommercial-Share Alike 2.0 Generic License’ title=’Creative Commons Attribution-Noncommercial-Share Alike 2.0 Generic License’ border=’0’ align=’left’></a>&nbsp;&nbsp;by&nbsp;<a href=’http://www.flickr.com/people/topatoco/’ target=’_blank’>&nbsp;TopatoCo</a><a href=’http://www.imagecodr.org/’ target=’_blank’>&nbsp;</a>

You can paste this at the end of your text (see the very bottom of the post). I like to add ‘Image credit’ to make it clear what’s going on.

This is also an opportunity to change the title and mouseover text associated with the image, simply alter the content within the quotation marks in the alt= and title= tags. Voila:

  Image credit   by  TopatoCo 

P.S. That’s a Tim Horton’s chocolate dip donut in the top picture. This is one of the very many things that makes Canada great.