Pumpkin photo and my flickr interface hack

[terriko]

IMG_1082
by Terriko.

I'm testing out my greasemonkey script which generates boxes with the HTML for posting a flickr photo with title/caption, so you all get a picture of a pumpkin. It is the end of October, after all!

The script is still brittle if the interface changes, but it is just a little interface hack so I'm not too concerned about it. I'll just rehack if necessary, after all! What it does is makes a set of 3 boxes down the right hand side of the page containing HTML for cutting and pasting the photo with the title as a caption (the default code Flickr gives you doesn't include a caption, and I find the menus kind of irritating if I'm posting a lot of photos in one day).

Here's the script. You should be able to cut and paste it into greasemonkey if you want to use it yourself. (And here's to hoping that all these font colour, size and layout tricks won't break everyone's feed readers/friends pages/layouts!)

// ==UserScript==
// @name           Flickr Blog HTML
// @author         Terri Oda -- http://terri.zone12.com
// @namespace      tko-flickr
// @description    Adds a box with cut-and-paste code for blogging images
// @include        http://flickr.com/*
// @include        http://www.flickr.com/*
// ==/UserScript==


// Get all that necessary photo info
var img = document.getElementsByClassName('photo-div')[0].getElementsByTagName('img')[0];

var title = document.getElementsByClassName('photo-title')[0].innerHTML;

var url = location.href;
var imgsrc = img.src.replace(/_z\.jpg/, '.jpg'); 
	// we want the smaller of the medium photos for most blogging purposes


// find the username for credit
var userHTML = document.getElementsByClassName('username')[0].getElementsByTagName('a')[0];

var user = userHTML.innerHTML;
var userUrl = userHTML.href;


// Make that cut and paste-able code
var code = '<div style="float: right; margin-left: 10px; margin-bottom: 10px;">' +
	'<a href="' + url + '" title="' + title + '">' +

	'<img src="' + imgsrc + '" alt="' + title + 
	'" style="border: solid 2px #000000;" /></a>' +

	'<br /> <span style="font-size: 0.9em; margin-top: 0px;">' + 
	'\n<a href="' + url + '">' + title + '</a> <br />' + 
	'by <a href="' + userUrl + '">'+ user + 
	'</a>.</span></div><br clear="all" />';

var codeSmall = code.replace(/\.jpg/, '_m.jpg'); 
	// I'm amused how small is _m, but whatever works!

var noExtras ='<a href="' + url + '" title="' + title + '">' +

	'<img src="' + imgsrc + '" alt="' + title + '" /></a>';

// figure out where to put it
// this puts it right after the "this photo belongs to..." so I don't have to scroll much.
var insert = document.getElementsByClassName('secondary-contexts-label')[0];

// Make the actual box
var newBox = '<h4>Embed Code</h4><h5>Medium</h5>' +

	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' + 
	'style="width: 250px;" wrap="virtual">' + code + '</textarea>' + 
	'<h5>Small</h5>' + 
	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' +

   'style="width: 250px;" wrap="virtual">' + codeSmall + '</textarea>';
var noExtrasBox = '<h5>No Extras</h5>' +

	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' +
   'style="width: 250px;" wrap="virtual">' + noExtras + '</textarea>';

// Add it to the page
insert.innerHTML = newBox + noExtrasBox + insert.innerHTML;