It’s important to use attribution online. When you pull a picture, make sure you tell other people where it’s from. Some sites make it easy for you to do that, others…not so much. Flickr used to be great at making attribution easy, but their latest redesigns have made it harder to accomplish. Alan Levine has a great CC attribution gizmo which makes it super easy to both give credit to and share a photo from Flickr. I use it all. the. time.
WordPress is great – I use it for this blog and my class websites. I even ran my own multi-site for my students one year using WordPress because my administrators at the time didn’t want blogs out in the wild. So, I did it for them. Anyways, WordPress doesn’t have the best method for featured images. You can’t use an image source URL to share it…you need to download the image and then reupload it to your site. It’s really easy to “forget” to post attribution.
I’ve been playing with another open source CMS called Anchor. It’s very bare bones right now, but it’s super flexible in terms of what you can do. Because I didn’t have enough going on (read sarcasm there…) I decided I wanted to create my own custom theme for an Anchor blog. I’ve got a demo site up right now (which will be changing soon…updates are coming!) and one thing I had to include was featured images from a URL.
The next step was to get attribution in there…not just a link back, but an actual box of text with the post title at the very least. Flickr has a powerful set of APIs which can be used to get all sorts of data which you can then bend to your will.
For those too wary for code, here’s the tl;dr – this new blog theme in Anchor will automagically attribute featured images you include. All Flickr images are coming soon.
The problem – In order to use the Flickr API, you need – at the very least – a photo ID. Because I’m attaching the photo using CSS, I have the source URL of the image. Here’s an example:
I needed a way to get that snippet of the URL into the API call. Unfortunately, there is no one step that can do this. So, I went and gave myself a crash course in regular expression to get that information into a usable form.
Of course, there’s another issue in my way. The CSS holding the URL for the image has characters in the syntax which I can’t use:
The solution: use another regular expression snippet to pull it out.
If you’re following along, if you put console.log(bg) into your editor, it’ll return a clean URL.
Now that we have the URL, it’s time to extract the photo ID only because that can be used in the Flickr API to build the attribution URL.
Like I said earlier, I gave myself a very crash course in regular expression, so this very…very ugly expression1 strips everything except for the photo ID and stores it in a variable for later.
OK, we got the URL, then we got the photo ID. Now, it’s time to build the URL to request information from Flickr about this picture.
This is the URL that we use in the final step of the process to get information from Flickr and then build one more URL, which becomes the attribution link.
This last asks for JSON information from Flickr and then we use jQuery to apply it to a div created in the HTML to hold the information. Flickr URLs all have the same structure, so building a link back to the owner’s page is easy. I just pulled out their user ID number and reattached the photo ID we grabbed earlier.
If you want to play with it yourself – changing the photo and everything – you can do that in this CodePen demo I set up during testing.
This is a lot of work to automate the link backwards, but hopefully, it’ll make it easier to add attribution back with every picture, not just ones you remember to grab information for. Again, this only work with Flickr at the moment, and only for featured images at that. I’m planning on expanding this to any image in a post pulled from Flickr as soon as I have time. Or, you could do it. Just share it back when you do.
- no one said code had to be pretty to work