forked from cogdog/flickr-cc-helper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
stamp-attributor.html
180 lines (138 loc) · 6.72 KB
/
stamp-attributor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Built on:
a CogDog Production because I love to give attribution for flickr photos and they
suck at making it easy.
Added Stamping variation by @johnjohnston
This HTML page provides all of the functionality to generate a stamped image attribution page from a bookmarklet tool. JJ
To make this work on your own site, you will need to:
* get a flickr API key (anyone with a flickr account can do this) https://www.flickr.com/services/apps/create/apply
* edit the line below where dat goes (under SETUP)
* put this file somewherez on a web server where you can get its URL
* create a javascript bookmark that references said URL- you can use [need to insert maker tool URL]
* BOOM! Go attribute
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Flickr CC Attribution Helper</title>
<style>
body {margin:0; padding:0; font-family:Helvetica,Arial,san-serif;}
#wrapper {margin:0; padding:0; width:100%; height:400px}
#content {margin:0; padding:8px;width:100%; height:400px; background-color: white;}
h1 {margin:0; font-size:120;}
h2 {margin-bottom:0; font-size:100%}
#credits {font-size:80%; color:#666;margin-top:30px;}
#change_size{display:block;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// SETUP
// size for image used in HTML '_m'=240px, ''=500px, '_c'=800px, '_b' = 1024px
var ps = '';
// flickr api key. Get yer own at https://www.flickr.com/services/apps/create/apply
// Smoke will rise from your browser w/o this
var fpai = '167f0c7320560d3477565bf648fa7c30'; // did you put your key in quotes? this is efc's key
// labels for flickr licenses; first element is license = 0 all rights reserved (BOOOO)
// if you like long flowing names, edit away
var licenses = new Array( "", "CC-BY-NC-SA", "CC-BY-NC", "CC-BY-NC-ND", "CC-BY", "CC-BY-SA", "CC-BY-ND");
// CHECK QUERY PARAMS
// get the query parameters for this page, we are looking for one called "flicked"
// via http://stackoverflow.com/a/3855394/2418186
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
$(document).ready(function(){
if (fpai == 'YOUR-OWN-APIKEY') {
str = '<p>Hey, did you read the instructions? Check the source, dude/dudetter... you need to insert your own flickr API key in the code.</p>';
$('#attribution').html(str);
} else {
if ( typeof qs['flickd'] != 'undefined' ) {
// set up a flickr api call to get info for a single foto, it's should have been passed in via query parameter 'flickd'
// need to add a check for bad data returned
var apiurl = 'https://api.flickr.com/services/rest/?format=json&jsoncallback=?&method=flickr.photos.getInfo&api_key=' + fpai + '&photo_id=' + qs['flickd'];
// get me some data!
$.getJSON(apiurl, function(data){
console.log(data);
// short hand for photo object
p = data.photo;
// build the base string for image URLs, everything bu the size code and the ".jpg" at end
var photosrc = "http://farm"+ p.farm +".static.flickr.com/"+ p.server +"/"+ p.id +"_"+ p.secret;
// lets get fancy and put the image as a background; add black for portrait orientation images
//JJ Since we are showing the image forget about background
//$('#wrapper').css("background", "#000 url(" + photosrc + "_z.jpg) no-repeat");
// title of photo goes atop
$('#title').html( p.title._content);
// trap for stingy non creative commons licensed stuff, stingy bums
if ( p.license == 0 ) {
str ='<p>Sadly, this lovely image is not licensed under Creative Commons.</p>';
} else {
// we got CC, get the string
var cc_lic = licenses[p.license];
// for URLs, see if user has real name on flickr
if (p.owner.path_alias === null) {
// rookie user! Use NSID
uid = p.owner.nsid;
} else {
// we got an alias, use that
uid = p.owner.path_alias;
}
// build the link for the image page on ye old flickr site
var photolink = "http://flickr.com/photos/" + uid + "/" + p.id;
// load stamped image
str = '<h2>Stamped image: right/control click & Save As...</h2>';
// add a stamper
stampsrc=photosrc + ps + '.jpg';
stampuser=encodeURIComponent(p.owner.username);
stampattrib=encodeURIComponent('creative commons licensed ( ' + cc_lic +' )');
var stampurl='http://johnjohnston.info/stamp/stampdl.php?i='+stampsrc+'&s='+stampuser+'%20-%20'+stampattrib;
str += '<p class="stamped"><img src="'+stampurl+'"> </p>';
}
// make it shine up, BOOM
$('#attribution').html(str);
$('#change_size').show();
});
} else {
// no query string variable found, SADFACE
str = '<p>No flickr ID found. Maybe you are just checking the URL? You can <a href="http://cogdog.github.io/flickr-cc-helper/">create your bookmarklet tool over yonder</a>.</p>';
$('#attribution').html(str);
}
}
});
var otherSizes =function(){
//quite a bit of repeated stuff here, should put in stampImage Function
ps = document.getElementById('change_size').value;
var photosrc = "http://farm"+ p.farm +".static.flickr.com/"+ p.server +"/"+ p.id +"_"+ p.secret;
stampsrc=photosrc + ps + '.jpg';
var stampurl='http://johnjohnston.info/stamp/stampdl.php?i='+stampsrc+'&s='+stampuser+'%20-%20'+stampattrib;
str = '<h2>Stamped image: right/control click & Save As...</h2>';
str += '<p class="stamped"><img src="'+stampurl+'"> </p>';
$('#attribution').html(str);
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1 id="title">Flickr CC Attribution Helper</h1>
<div id="attribution">Getting the lovely stuff... squirrels spinning the turbines... if this spinning does not stop, something has gone awry</div>
<select name="change_size" id="change_size" onchange="otherSizes();" >
<option disabled selected >Swap Sizes</option>
<option value="_m">240px</option>
<option value="">500px</option>
<option value="_c">800</option>
<option value="_b">1024</option>
</select>
<div id="credits">flickr cc attribution helper by cogdog • cogdog.info Stamping by johnjohnston</div>
</div>
</div>
</body>
</html>