Shutter Reloaded Printing
I’ve been using the Shutter Reloaded plugin for WordPress on a client site recently and it works great. However, the client wanted users to be able to print the enlarged images by simply clicking a button. Not being a javascript expert this took me some time, but I’ve managed to do it and I’d like to share it with anyone else who is interested and perhaps this could be integrated within the actual plugin if the author so chooses - though I’m sure he may wish to rewrite it better. To print, an icon shows beside the close icon and if clicked opens a new window containing the image, resized to fit letter format and the print dialog opens automatically for easy printing.
Anyway, once you have the plugin downloaded you will need to make 2 modifications to the shutter-reloaded.js file, so go ahead and open that up in your favourite editor.
Find the following line around line 113:
closebtn = this.textBtns ? this.L10n[2] : '<img src="'+this.shImgDir+'close.gif" title="'+this.L10n[2]+'" />';
And add the following below so it looks like so:
closebtn = this.textBtns ? this.L10n[2] : '<img src="'+this.shImgDir+'close.gif" title="'+this.L10n[2]+'" />';
closebtn += '<a href="javascript:Printimg(\''+shutterLinks[ln].link+'\', \''+stripquote(shutterLinks[ln].title)+'\')"><img src="'+this.shImgDir+'print.png" title="Print Image" /></a>';
Then at the very bottom of the file add the following:
function stripquote(str) {
return str.replace('"', "").replace("'", "");
}
function Printimg(img,title){
var oImg = new Image();
oImg.src = img;
var max_width = '680';
var max_height = '790';
var img_width = oImg.width;
var img_height = oImg.height;
if( (img_width / max_width) >= (img_height / max_height) ){
var width = max_width;
var height = ( max_width / img_width ) * img_height;
} else if ( (img_height / max_height) > (img_width / max_width) ){
var height = max_height;
var width = ( max_height / img_height ) * img_width;
} else {
var height = img_height;
var width = img_width;
}
var win_width = parseFloat(width)+30;
var win_height = parseFloat(height)+30;
var disp_setting="toolbar=no,location=no,directories=no,menubar=yes,";
disp_setting+="scrollbars=yes,width="+win_width+", height="+win_height+", left=100, top=25";
var content_vlue = '<img src="'+img+'" width="'+width+'" height="'+height+'" />';
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>'+stripquote(title)+'</title>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
The only think left is to upload this file and the print icon (which you’ll need to put in the menu folder for the plugin) and you should have print capabilites!
