A couple of days ago I read an article on Site Sketch 101 about automatically adding image attribution, when using images from for example the Flickr Creative Commons licensed images, to these images using PHP. This made me think, it should not be to difficult to create the same functionality using jQuery and the rel attribute. With that, I set out to create a small and simple jQuery plugin that will do just that. The end result is, no surprise here, the jQuery Attribute plugin.
Below is a how to on using jQuery Attribute. Before we go further, I would see this version of the plugin as beta, I have not tested this in varied layouts and as such, I can not with 100% surety say that using the plugin will not effect your layout. With that said, I really hope people will try out the plugin and let me know if they encounter any bugs where the plugin does effect their layout and prevents them from using it.
I chose to use the rel attribute on the image tag as it makes the most semantic sense to me. So first let’s look at the HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Attribute</title> </head> <body> <p>The two images below does contain a rel attribute as well as the required 'attribute' keyword.</p> <p><img src="images/oldtruck.jpg" width="500" height="333" rel="attribute|aussiegall|http://www.flickr.com/photos/aussiegall/4670590096/" alt="Photo of an old truck" /></p> <p><img src="images/vuvuzela.jpg" width="500" height="357" rel="attribute|Dundas Football Club|http://www.flickr.com/photos/dundasfc/4687820798/" alt="Photo of a group off vuvuzela players" /></p> <p>The below image does contain a rel attribute but not the keyword attribution</p> <p><img src="images/vuvuzela.jpg" width="500" height="357" rel="Dundas Football Club http://www.flickr.com/photos/dundasfc/4687820798/" alt="Photo of a group of vuvuzela players" /></p> </body> </html>
Nothing strange about the above except the rel attribute on the image tag. The prerequisite for the plugin to work is that the following appears as the value of the rel attribute on the image tag in the following order:
- attribute The keyword the script will look for
- author
- source The original location of the image as an absolute URL
Important to note is that this is | (pipe (shift+\)) delimited without any spaces. So a sample rel tag will be:
rel="attribute|aussiegall|http://www.flickr.com/photos/aussiegall/4670590096/"
A standard way then of marking up your images to which you want to add attribution would be:
<p><img src="images/vuvuzela.jpg" width="500" height="357" rel="attribute|Dundas Football Club|http://www.flickr.com/photos/dundasfc/4687820798/" alt="Photo of a group of vuvuzela players" /></p>
With your HTML ready we need to add the relevant scripts and libraries to the head of the document. First, let’s add jQuery. I generally just use the Google ajax library location to include jQuery on the page as this takes some load of your server and generally improves the load time but, you can also go ahead and download jQuery in various formats from their website. After this we add the jQuery Attribute plugin and our script that will make use of the plugin. In the head section of your HTML add the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="scripts/jquery.attribute.min.js"></script> <script src="scripts/default.js"></script>
One last item is needed and that is the stylesheet. Just before the 3 script imports add the following:
<link rel="stylesheet" href="css/attribute.css" />
The stylesheet is then also where you can customize the look and feel of the plugin. Below is the contents of the stylesheet:
.attribution
{
position:absolute;
background-color:#333;
color:#fff;
padding:5px 0 5px 0;
left:0;
bottom:4px;
height:20px;
font-weight:bold;
text-indent:10px;
}
.attribution a:link, .attribution a:visited
{
color:#fff;
text-decoration:none;
font-weight:normal;
}
With this you are all set but, before I end this post, let’s take a look at the source of default.js
$(document).ready(function() {
$("body").attribute();
});
That is all that is needed. By default the text added to the overlay will read “Image Courtesy authorname : View Original Context”. You can also specify your own text instead of “Image Courtesy” as follows:
$(document).ready(function() {
$("body").attribute({message: "Your Custom Text "});
});
If there are any other aspects of the script you would find useful to customize, like the above, let me know and I will extend it to add additional options. Once the DOM has been loaded, the script will traverse through the body of your document and hook onto all images it finds with a rel attribute. It will then loop through this Object array and add the attribution overlay to all images that has the keyword ‘attribute’ in the value of the rel. I hope you find this plugin useful and as mentioned before, if you find any bugs please let me know. Also, if you use the plugin on your site, I would love to know.
Pingback: Tweets that mention Attribute : An Easy Image Attribution Plugin for jQuery | Expansive Derivation -- Topsy.com