Pumpkin photo and my flickr interface hack

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;

More pumpkins! More interface hacks!

Another flickr interface hack test:

Pumpkins chez Dan 2010

This gives me a box with code for entire set of photos as thumbnails in an Nx6 grid. Again, no clue if it's going to break RSS/layouts/feed readers, so please let me know if it does.

Here's the code:

// ==UserScript==
// @name           Blog flickr set
// @namespace      tko-flickr-set
// @description    Make cut and paste code for blogging entire sets of flickr photos as thumbnails
// @include        http://www.flickr.com/photos/*/sets/*
// ==/UserScript==

var thumbsHTML = document.getElementById('setThumbs');

var allImages = thumbsHTML.getElementsByTagName('a');
var title = document.title.replace(/ - a set on Flickr/, '');

var code = '<h2><a href="' + location.href + '">' + title + '</a></h2>';

for (i = 0; i < allImages.length; ++i) {

	code += '<a href="' + allImages[i].href + 
	'" title="' + allImages[i].title + '">' +
	allImages[i].innerHTML + '</a>';

	if (i > 0 && (i+1) % 6 == 0) {

		code += '\n';
	}
}

// Insert after the date
var insertPlace = document.getElementsByClassName('vsDetails')[0];

var newBox = '<h4>Embed Code</h4>' +
	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' +

	'style="width: 250px;" wrap="virtual">' + code + '</textarea>';

insertPlace.innerHTML = insertPlace.innerHTML + newBox;