forked from cogdog/flickr-cc-helper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cc-attributor.html
157 lines (120 loc) · 6.3 KB
/
cc-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
<!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.
This HTML page provides all of the functionality to generate a pop up cut and past atribution page from a bookmarklet tool.
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; opacity: 0.7; filter: alpha(opacity=70);}
h1 {margin:0; font-size:120;}
h2 {margin-bottom:0; font-size:100%}
#credits {font-size:80%; color:#666;margin-top:30px;}
textarea {width:500px; background-color:#fff;}
</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, '_z'=640 '_c'=800px, '_b' = 1024px
var ps_dims = {
_m: '240', _z: '640', _c: '800', _b: '1024'
};
// 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){
// 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
$('#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;
// check for size parameter
if ( typeof qs['s'] == 'undefined' ) {
// use default size
ps = '';
} else {
// get specified size
ps = qs['s'];
}
// create attribution string
str = '<h2>Attribution (HTML)</h2><textarea rows="5" onClick="this.select()"><a title="' + p.title._content + '" href="' + photolink + '"><img src="' + photosrc + ps + '.jpg" /></a><br /><small><a href="http://creativecommons.org/licenses/' + cc_lic.toLowerCase() + '/2.0/">' + cc_lic +'</a> <a title="' + p.title._content + '" href="' + photolink + '">flickr photo</a> shared by <a href="http://flickr.com/people/' + uid + '">' + p.owner.username + '</a></small></textarea><h2>Attribution (text)</h2><textarea rows="2" onClick="this.select()">' + p.title._content + ' by ' + p.owner.realname + ' ' + cc_lic + ' on Flickr ' + photolink + '</textarea><h2>Download Image</h2><a href="' + photosrc + ps + '.jpg" download>' + photosrc + ps + '.jpg</a>';
}
// make it shine up, BOOM
$('#attribution').html(str);
});
} 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);
}
}
});
</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>
<div id="credits">flickr cc attribution helper by cogdog • cogdog.info</div>
</div>
</div>
</body>
</html>