A Blocky Gutenburger Addition For Flickr CC Attribution Helper

There’s something to be said for making your own tech tools; you certainly know quickly if something goes awry (though you cannot complain much about the tool provider).

Something I made first almost 10 years ago is the flickr cc attribution helper. If you take on the task some think too arduous to give credit for photos you re-use, that inking 10 years ago come from how many round trip copy/paste steps it took from flickr to blog to write a good attribution. Not to say what it took to write them consistently.

The first generation tool relied on Greasemonkey to modify a flickr page with a cut and paste attribution.

This worked great as one enabled in your browser, the attribution fields would show on any flickr image page that had a CC license.

The problem was it relied on knowing the document structure of a flickr display page, so every time they changed their format (it happened maybe 5 times in 5 years) I had to update the script. Thus a major step was moving it to GitHub hosted HTML/JS that was triggered via a web browser bookmarklet tool.

The way I set up turned out to be nifty (accidently so) in that other forms of output could be added, so tools were added for WordPress with captions, Markdown, an image stamping tool by John Johnston, even for medium.com.

And even with the move in WordPress 5 to the new, oft-hated Gutenberg editor (I’ve made my peace with it), the HTML generated with it’s [caption]....[/caption] codes still worked in the block editor.

Until version 5.3.

Thud.

I saw that a week ago, that the pasted in attribution strings no longer worked, the image was gone.

Time to go into the tool shed.

I spent more than a few [insert chuks of time] trying out different ways of construction the block code. The old way uses the flickr JavaScript API to sent the id of an image (pulled from the URL) — e.g. for a photo at <a href="https://flickr.com/photos/cogdog/49254195911">https://flickr.com/photos/cogdog/49254195911</a> the id was 49254195911.

That info gets all you need to find out a static URL link to the image, it’s license, the userid for the creator.

The previous iterations of the tool made it set to an image size you used most often. I fiddled with that, getting an HTML string that would pass the Block Test and render in the editor without the dreaded “Cannot Render as Block” error.

I saw, though, that the forward looks better if we use WordPress ability to render the image via automatic embedding of it via the flickr URL. I could see from testing how it rendered it inside of <figure>...</figure> tags with some special class names.

It looks like:

That worked great for the image. When I tested in the editor, I saw I could paste in the attribution to the editor, which ends up wrapped in <figcaption>...</figcaption> tags. It previews nice, but…

When I set up the attribution to return this chunk for copy/paste:

I lost the embedded image, it just produced a plain text URL.

Lot’s of various testing got me nowhere. What I could see is that pasting in the first code had WordPress do what it does to convert it to a normal img tag. Adding in the caption just gunked things up.

So for now, I have left it as putting the image in one block, and the attribution string in a paragraph block following it. This means on editing, you might have to format the caption, or what I plan to do, once in the post, cut it and past into the image’s caption field.

The copy/paste code for the featured image on this post ends up:

Giving this in my editor… (this is how it comes in as a screenshot)

I might leave it like that, good enough for one pasted, but I more likely will cut the attribution block text and put in the “Write caption…” field

What I like is that the image comes in a more fluid size for my blog column width, and it’s still linked to original.

I have to say it’s pretty neat that the Block Editor can accept pasted in HTML and render it. It also does well with pasted Markdown code too.

To give it a try, generate a new bookmarklet tool maker from https://cogdog.github.io/flickr-cc-helper/ and use the option for WordPress 5+ Block Attributor (aka Gutenberg). Then, navigate to any flickr open licensed image, and give it a rip.

Nothing done affects any existing bookmarklet tools- well I made one update across them all that new attributions created will use the more current static URLs for images (http://live.flickrstatic.com...) rather than the old ones that had the mysterious farmXX in the URL (these still all work and should work into the future).

This is still in testing states, but I’m using it!

I have some dreams of a complete revamp that might include;

• Complete redesign so all options in the toolmaker (image, attribution type) are options from the tool window so multiple tools would not be needed
• Deployment as Chrome/Firefox Extensions (because bookmarklet tools are from the 1990s and mostly still work but the clock might be ticking)
• Add support for other image services, e.g. Pixabay, Unsplash, MediaWiki Commons (any service that provides information about images via a Javascript open web api
• Experiment with creating a WordPress Block tool that could just take the flickr URL and do it all without leaving the editor.

One can dream… if only I could devote more time to tool tinkering but the paying work comes first.

Since this is something I use all the time, it will get my attention when it goes south!

---

Image Credits: (already inserted in post as example)… Blocky flickr photo by cogdogblog shared into the public domain using Creative Commons Public Domain Dedication (CC0)