The Problem

In this blog, I would like to include photos. The easiest way would be to embed them from Flickr. Flickr allows embedding photos, not only your own, but also those of other Flickr users, as long as you respect the license of those pictures. But Flickr’s terms also require that every embedded image is linked back to the original page on Flickr. This is not a problem for a single image, but it becomes tedious when you have many images to embed. I have written about this problem in more detail in a previous post. Here I will discuss the different solutions I have found to this problem, and the one I have implemented in my blog.

Direct Linking

Of course, it is easily possible to get the sharing URL for the photo, such as: Mountain from Furkapass road | All rights reserved | andrew_maier | Flickr, but that does not allow you to show the image online.

Another possibility would be to download the images and then serve them from the local server, but I would lose all the advantages of already having them stored on Flickr.

Embedding with Flickr

Finally, Flickr allows you to select an embed code which looks like this:

<a data-flickr-embed="true" 
href="https://www.flickr.com/photos/andrew_maier/53904783477/" 
title="Mountain from Furkapass road">
<img src="https://live.staticflickr.com/65535/53904783477_f8e7d5c929_m.jpg" 
width="240" height="160" 
alt="Mountain from Furkapass road"/>
</a><script async src="//embedr.flickr.com/assets/client-code.js"
charset="utf-8"></script>

and renders the picture like this:

Now we are getting close to what I want to achieve, and it might be a reasonable compromise.

Manual Linking

One advantage of the embed code is that you can retrieve the static page of the image to do your own linking:

[![](https://live.staticflickr.com/65535/53904783477_f8e7d5c929_m.jpg)]
(https://www.flickr.com/photos/andrew_maier/53904783477)
Mountain from the Furkapass road

Manually linking to images in Flickr is tedious and error-prone, which can hinder consistent image attribution and distract from content creation.

Another disadvantage is that I still have to go to Flickr to find the embed code, rather than simply checking the image page and copying the URL.

Using a Filter

I wanted a simpler way to use my Flickr photos without going through hoops.

Creating a Pandoc filter streamlines image embedding by automating URL retrieval and captioning, saving time and reducing errors in your workflow.

A Pandoc filter not only lets me do this in any document I want to convert using Pandoc, but also allows me to integrate this into this blog, as the Hakyll, the blog engine, uses Pandoc as a library to convert all the original posts from Markdown to HTML. After checking the web, I couldn’t find such a filter, so I had to write one myself. I have uploaded it to github called pandoc-flickr-filter. It is written in Haskell to facilitate integration with Hakyll. So now I can use a standard Markdown image markup, using the link text as my caption and let the filter do the rest.

To use the filter, you can apply it using the -F switch in Pandoc, as any other Pandoc filter:

pandoc -F pandoc-flickr-filter myinput.md 

Or to demonstrate a simple example, use it in a pipe:

echo '![My Caption](https://www.flickr.com/photos/andrew_maier/53904783477)' | pandoc -F pandoc-flickr-filter -t markdown

This will result in:

<figure>
<a href="https://www.flickr.com/photos/andrew_maier/53904783477"><img
src="https://live.staticflickr.com/65535/53904783477_f8e7d5c929_b.jpg"
style="width:80.0%" /></a>
<figcaption>my caption</figcaption>
</figure>

While this might not look better than the embedded code from Flickr, as it is pure HTML, it has the advantage that the original markdown file can keep the simple image link. The final transformation into the consumed format is not affected. So if I ask the same to be translated into $\mathrm \LaTeX$,Simply by replacing the -t markdown with a -t latex

I would get:

\begin{figure}
\centering
\href{https://www.flickr.com/photos/andrew_maier/53904783477}{\includegraphics[width=0.8\linewidth,height=\textheight,keepaspectratio]{https://live.staticflickr.com/65535/53904783477_f8e7d5c929_b.jpg}}
\caption{my caption}
\end{figure}

And I can go on to produce a PDF from that.

So the pandoc-flickr-filter is not useful for cleaning up the markdown. Still, it helps simplify the processing chain from the initial human-readable markdown file to the final product, a more structured document such as a web page or a PDF.

The filter is also intelligent enough to avoid rerunning an already-converted link. So, even if you run this filter twice, the link will only be converted once.

Limitations

Of course, this plugin has its limitations. The obvious one is that it requires a working internet connection. In offline mode, this will not work, as the plugin needs to contact Flickr to retrieve the image’s static link page. The filter should degrade gracefully, meaning it will not fail but instead do nothing and leave the link untouched.

One More Thing.

Eagle-eyed readers might have noticed that the image is scaled at 80% of the width. This is the default, but can be overridden using the flickr-width parameter in the YAML preamble. Therefore setting

flickr-width: 100

In the preamble of the markdown file, we will scale the image to 100% of its width.