creative commons licensed ( BY-NC-SA ) flickr photo shared by jonmartin ()

Right there is a test of new flavor of my flickr cc attribution helper where it generates copy/paste code to put the image in a wordpress post, but place the attribution text in a WordPress image caption structure.

This is the default output using the regular version of the helper, but in making a new version of the helper tool (see below) I’m intrigued by the potential for a system I am running hosted on github and flexing the flickr API via JavaScript. Somewhere there is a wad of duct tap stuck on a desk edge.

creative commons licensed ( BY-NC-SA ) flickr photo shared by jonmartin ()

Whats the deal? The differences are minor or not even obvious above– actually it looks no different because my current theme does nothing much with formatting captions beyond centering them. You can see a more distinct difference on another blog where the caption formatting is different

cc diffs

In a way this is better as its letting the WordPress theme handle the formatting of the attribution as a caption rather then the default which just uses a <small> tag
This started (and ended up delaying my breakfast because I got caught up in code) because someone emailed with a question wondering how the CC Attribution Tool could work to set up some sort of WordPress slider/gallery to put the attribution in the captions. I tried to explain that that is a rather specialized case, apples vs bananas.

Each slider/gallery plugin has different means of building its content; about the best would be one that used images directly from flickr (e.g. Awesome Flickr Gallery was coded to pull in the license info. Any plugin that is using the flickr API theoretically could access the license info; I am not sure if there are ones out there that do this. And I don’t feel like writing Yet Another Slider Plugin.

I did wonder though if you used the WordPress Add media to add an image via URL and manually copy/paste the attribution if there was a way to build a WordPress Gallery out of that. Nope, because images added via URL are not physically added to the media library.

But I thought at a minimum, it was worth it to see if the attribution helper could write a version of the output that wrapped the HTML in a wordpress ... structure for at least a better formatted single picture insert.

And again I am trying to grope my way to some better github understanding. So the core code of my tool is at https://github.com/cogdog/flickr-cc-helper

flickr-cc-helper

I create a branch of my project called gh-pages and this allows me to host a project page, this is the public facing form for making a bookmarklet

cc helper

So here is how the attributor works (sketched out below). When called from a flickr photo page, the bookmarklet extracts the image ID (in a photo at https://www.flickr.com/photos/cogdog/882126043/ this is “882126043”) and then sends it as a URL parameter to my HTML script hosted on github. This uses the flickr API to request info for the photo, and then generates the info that pops up in the window.

flickr-cc-helper-sketch

And this is where I find I accidentally created something interesting. All of the “grunt” work is done via a script at http://cogdog.github.io/flickr-cc-helper/cc-attributor.html — the bookmarklet passes it something like http://cogdog.github.io/flickr-cc-helper/cc-attributor.html?flickd=882126043 and it goes to work.

To create a different form of the attribution, I made a copy of the script as http://cogdog.github.io/flickr-cc-helper/wp-attributor.html and changed a few things in the output to make the HTML in the form WordPress likes for an image (wrapped inside ... shortcode):

[caption width="500" align="alignnone"]
<a title="My roommate called." 
href="http://flickr.com/photos/cogdog/882126043">
<img src="http://farm2.static.flickr.com/1114/882126043_d95a0245e0.jpg" 
alt="My roommate called." /></a> 
<a href="http://creativecommons.org/licenses/by-sa/2.0/">
creative commons licensed ( BY-SA )</a> 
<a title="My roommate called." 
href="http://flickr.com/photos/cogdog/882126043">flickr photo</a> 
shared by <a href="http://flickr.com/people/cogdog">cogdogblog</a>[/caption]

By making the helper URL an editable field, my thought was it would give others the ability to maybe create their own version of for example, they wanted to format the output in a different way than mine. The Helper URL can exist anywhere, it need not be in github.

So I was able to make a WordPresser CC Attribution Helper merely by changing the URL of the second element to be http://cogdog.github.io/flickr-cc-helper/wp-attributor.html

This was really just an experiment to try a different kind of output, but it has me wondering about this as a potentially useful tool approach to have plug and play pieces one can use. Anad again, I am doing stuff that a few clicks back would have needed all custom code hosted on a server, what I am doing now is mostly browser based, and passing info via a github hosted page that look stuff up in flickr.

I could always change the primary flickr cc attribution helper to add a third copy/paste field for the WP version. Just trying stuff out.

And just because I can do this from one click in a browser….

My roommate called.
creative commons licensed ( BY-SA ) flickr photo shared by cogdogblog

UPDATE Nov 3 8:45PM I heard back from JR, who was very appreciative:

You are a real mensch! When I saw that sketch on your blog, I had an even deeper appreciation for the tool you created- just amazing. I’m glad you received at least a small “good thing” out of this whole exercise re: your intrigue over the “potentially useful tool approach to have plug and play pieces one can use.”

JR provided a solid example of what he was seeking- an attribution with a very specific format; not the IMG tags to include the image. He/she wants to download the flickr image and add to the WordPress media or slideshow media and add a specific formatted caption with attribution with creative commons namespace parameters and such. Because the image string had HTML but would be included in a double quoted string, I had to escape all of the quotes as single quotes.

I was able to code and test a new helper tool in about 30 minutes, there is a new URL that can be used on the bookmarklet creation tool http://cogdog.github.io/flickr-cc-helper/slide-attributor.html

slide maker

I added to the output a link to download the source image, so all the steps can be done from the one page. I learned a new technique– by writing the href tag with a download parameter, the link forces a download in an HTML5 capable browser, e.g.

<a href="http://farm2.static.flickr.com/1114/882126043_d95a0245e0.jpg"
download="">http://farm2.static.flickr.com/1114/882126043_d95a0245e0.jpg</a>

So this is how the same flickr CC helper tool can provide custom attribution code

new cc tool

I tinker with my code again… because I can.

I still have questions —

The post "Flickr CC Attribution Helper for WordPressers (and accidental github ecosystem)" was originally squeezed out of the bottom of an old rusted tube of toothpaste at CogDogBlog (http://cogdogblog.com/2014/11/flickr-cc-attribution-helper-for-wp/) on November 3, 2014.

4 Comments

Leave a Comment

All fields are required. Your email address will not be published.