Oct. 26th, 2010

terriko: (Default)



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;


terriko: (Default)
Another flickr interface hack test:

Pumpkins chez Dan 2010

IMG_1075IMG_1076Glowing vodka skullIMG_1080IMG_1081IMG_1082
IMG_1085IMG_1086IMG_1087IMG_1088IMG_1091IMG_1092
IMG_1093IMG_1094IMG_1095IMG_1096IMG_1097IMG_1098
IMG_1099IMG_1101IMG_1102IMG_1103IMG_1104IMG_1105
IMG_1106IMG_1107IMG_1108IMG_1109IMG_1110IMG_1111
IMG_1112IMG_1113IMG_1114IMG_1117IMG_1119IMG_1123
IMG_1124IMG_1129IMG_1131IMG_1132IMG_1135IMG_1137

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;



Profile

terriko: (Default)
terriko

September 2017

S M T W T F S
     12
3456 78 9
1011 121314 1516
17181920212223
24252627282930

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 23rd, 2017 09:55 pm
Powered by Dreamwidth Studios