Jiffy_debian: How to overlay images by using Greasemonkey

Sent to you by l5g via Google Reader:

How to overlay images by using Greasemonkey

via Hack a Day by Mike Szczys on 10/26/09

HaD_frame

Today we're going to take a look at writing scripts for the Greasemonkey add-on for Firefox. This add-on allows us to use JavaScript to make changes to the way webpages are displayed on our browser. These changes can only be seen by a copy of Firefox that is running a particular script. As an example, we're going to write a script that adds a border to the banner image of each article on Hack a Day by overlaying the image you see above. Find out how it's done after the break.

Our Goal:

We want to make the top image for each article look like it has been printed with a white border and then taped on each corner to the page. This is an effect that we used to use on our posts and a Greasemonkey script is a good way to re-implement the effect if you miss that image style.

What You Need:

Install Firefox
Install the Greasemonkey add-on.
Download and install our script: hackaday_nostalgia.user.js

How It Works:

Greasemonkey runs JavaScript on top of the pages that have been loaded by Firefox. The first part of the file is a set of comments that tell Greasemonkey what it's dealing with:

// ==UserScript==
// @name           Hackaday Nostalgia
// @namespace      http://hackaday.com
// @description    Overlay photograph border and taped corners for article images at Hack a Day.
// @include        http://hackaday.com/*
// ==/UserScript==

The name, namespace, and include lines are all required for the script to work. Name is what you want to call your script. Namespace is a URL that identifies the script uniquely in case there are two scripts with the same name. Include tells Greasemonkey what pages this script should be applied to. In our case we only want to monkey with the images on hackaday.com so we've included all addresses from that domain.

Now that we've identified what pages we want to alter, we can parse the document and pull out the elements we want ot change. The first thing to do is examine the page source of our target:

<div class='snap_preview'><p><img class="alignnone size-full wp-image-17747" title="plotter-with-300w-laser" src="http://hackadaycom.files.wordpress.com/2009/10/plotter-with-300w-laser.jpg?w=470&h=313" alt="plotter-with-300w-laser" width="470" height="313" /></p>

With a little digging we can find the line you see above that includes the IMG element for the title of a post. We're in luck, the page builds each post wrapped in a DIV of the Class 'snap-preview'. We can use Greasemonkey to parse the page looking for these DIVs and then alter the first IMG element in each one:

//get all DIVs of the snap_preview class var allDivs, thisDiv; allDivs = document.evaluate(  "//div[@class='snap_preview']",  document,  null,  XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,  null);

In the code above we are using the evaluate function to pick out DIVs that are in the 'snap-preview' class. We load them into an array called allDivs which we can then step through:

//step through each DIV for (var i=0; i<allDivs.snapshotLength; i++) {  thisDiv = allDivs.snapshotItem(i);   //Alter the first img of each DIV  var image = thisDiv.getElementsByTagName('img');   //Make sure we've got an IMG in this DIV  if (image[0]) {   //Save original source URL  var orig_src = image[0].src;  //Concatenate for CSS use  orig_src = 'url(' + orig_src + ')';  //Set original as background  image[0].style.background = orig_src;   //Set Hack a Day overlay as image  image[0].src = 'http://hackadaycom.files.wordpress.com/2009/10/had_frame.png';  } }

This block of code is where the magic happens. A loop is used to step through each DIV we grabbed in the previous code snippet. We grab the IMG element by using the getElementsByTagName function. All IMG elements are put into an array called 'image', but we only want to alter the first image in each post so we'll always reference image[0].

For the image border and tape effect, we used the GIMP to create a PNG file that has transparency where we want the original picture to show through. We need the original picture to be behind the overlay so we're making it a background image using the CSS property 'background'. The PNG overlay is then set as the new SRC for the IMG element.

That's all it takes, now images will be overlayed with the border image you see at the top of this post.

Benefits and Drawbacks:

There are some drawbacks to using this system; the overlay covers up the borders of the original image, older posts that already have this image effect will have it applied again, the overlay will be stretched to match each original image which can look weird depending on image height, and the overlay image we've provide is of rather low quality (you can probably do better yourself).

Our method uses a very small amount of code and doesn't require the original image size to be recalculated.

The Next Step:

Now that we've showed you how to do this much, you may want to take it one step further. The original picture style also made the images black and white. Can you make the script do this as well? To get started in the right direction, you might want to look at the Pixastic JavaScript image manipulation library and its desaturate function.

Overwhelmed?

If you need some help deciphering what we did here just use your online resources: