forked from cogdog/flickr-cc-helper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcustom-attributor.html
193 lines (149 loc) · 7.83 KB
/
custom-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
181
182
183
184
185
186
187
188
189
190
191
192
193
<!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">
<!--
a CogDog Production because I love to give attribution for flickr photos and they
suck at making it easy.
https://cogdog.github.io/flickr-cc-helper/
This HTML page provides all of the functionality to generate a pop up cut and paste
atribution page from a bookmarklet tool. Each version of this can generate a different
format for the attribution.
To create a new format for attribution, fork and create a new version of this via
https://github.com/cogdog/flickr-cc-helper
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Flickr CC Attribution Helper for Custom Markup</title>
<link rel="stylesheet" type="text/css" href="assets/css/cc-attributor.css" />
<script type="text/javascript" src="https://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, '_z'=640 '_c'=800px, '_b' = 1024px
var ps_dims = {
_m: '240', _z: '640', _c: '800', _b: '1024'
};
// flickr api key. This one is mine. Be nice to it
// Get yer own at https://www.flickr.com/services/apps/create/apply
// Smoke will rise from your browser w/o this
var fpai = 'bc5da65ee5e7f823282800672064eae0';
// license object, received via flickr.photos.licenses.getInfo
var licenses = {};
// labels for flickr licenses; first element is license = 0 all rights reserved (BOOOO)
// we receive the license information from flickr to stay up to date on changes.
// get licenses from flickr
// build flickr api url for license call
var apiurl = 'https://api.flickr.com/services/rest/?format=json&jsoncallback=?&method=flickr.photos.licenses.getInfo&api_key=' + fpai;
// first, get license data from flickr
$.getJSON(apiurl, function(data) {
data.licenses.license.forEach(function(el, index){
licenses[el.id] = {
'id': el.id,
'name': el.name,
'url': el.url
};
});
});
// This function returns only the name of the license
// Use this function, if you need the plain name of the license.
function get_license_text( thelicense ) {
return licenses[thelicense].name;
}
// This function returns the name and the markup needed for linking to the license.
// Feel free to edit this one to your needs, e.g. html, markdown, twig and so on.
function get_license_markup( thelicense ) {
return '(' + licenses[thelicense].name + ')|' + licenses[thelicense].url;
}
// 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('&'));
// set up a time to change the status message
var waiting_msg = setInterval(function () { ChangeStatusMessage() }, 500);
// display a random mesage to let 'em know wheels are spinning
function ChangeStatusMessage() {
var funnymessages = ['Greasing the tubes for transmission', 'Feeding the squirrels who spin the turbines', 'Checking the weather for stormy clouds', 'Spreading smooth peanut butter', 'Wondering about the meaning of life', 'Knocking on the doors of Yahoo saying please give us some API data', 'Crosswiring the figwitz circuit', 'Gazing up at the sky', 'Getting the lovely stuff', 'Sautéing onions and garlic in butter', 'Waving at Ken', 'Checking my mentions on twitter', 'Leaning back and relaxing', 'Doing some yoga stretches', 'Ordering a fish taco' ];
$('#attribution').text( funnymessages[Math.floor(Math.random()*funnymessages.length)] + '...');
}
// placeholder for attribution string
var attrib_str = '';
// Create an alert if we have not generated a result
setTimeout("if (attrib_str == '') alert('Ouch, we seem to not be making contact with the flickr API, it might be taking a nap. It may need more time, or perhaps try later.')", 10000);
$(document).ready(function(){
ChangeStatusMessage();
// give the status messages a whirl, then do the work
setTimeout(function() {
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){
// 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 = "https://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
$('#wrapper').css("background", "#000 url(" + photosrc + "_z.jpg) no-repeat");
// title of photo goes atop
$('#title').html( p.title._content);
// 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 = "https://flickr.com/photos/" + uid + "/" + p.id;
// trap for stingy non creative commons licensed stuff, stingy bums
if ( p.license == 0 ) {
attrib_str ='<p>Sadly, <a href="' + photolink + '">this lovely image</a> is not licensed for reuse... Maybe ask the owner to learn about <a href="https://www.flickr.com/creativecommons/">creative commons licensed available on flickr</a>, or ask them for permission to reuse.</p>';
} else {
// we got license!
// check for size parameter
if ( typeof qs['s'] == 'undefined' ) {
// use default size
ps = '';
imgwidth = 500;
} else {
// get specified size
ps = qs['s'];
imgwidth = ps_dims[ps];
}
// create attribution strings
attrib_str = '<h2>Attribution (Plain)</h2><textarea rows="5" onClick="this.select()">' + p.owner.username + ': "' + p.title._content + '"|' + photolink + '\r\n' + get_license_markup(p.license) + '</textarea><h2>Download Image</h2><a href="' + photosrc + ps + '.jpg" download>' + photosrc + ps + '.jpg</a>';
}
// stop the random status messages!
clearInterval(waiting_msg);
// make it shine up, BOOM we got attribution for ya here
$('#attribution').html(attrib_str);
});
} else {
// no query string variable found, SADFACE
attrib_str = '<p>No flickr ID found. Maybe you are just checking the URL? You can <a href="https://cogdog.github.io/flickr-cc-helper/">create your bookmarklet tool over yonder</a>.</p>';
$('#attribution').html(attrib_str);
}
}, 2000);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1 id="title">Flickr CC Attribution Helper for Custom Markup</h1>
<div id="attribution"></div>
<div id="credits"><a href="https://cogdog.github.io/flickr-cc-helper/" target="_blank">flickr cc attribution helper</a> by @cogdog • <a href="http://cog.dog/" target="_blank">cog.dog</a></div>
</div>
</div>
</body>
</html>