flickr-hugo-embed

A node.js tool that generates shortcodes for all the photos in a Flickr Album to allow easily embedding Flickr images into a static site created using Hugo

An example generated code:

{{% flickr "Title"
           "Caption"
           "link to photo page"
           "link to source image" %}}

The flickr shortcode is provided in this repository and can be copied to layouts/shortcodes/flickr.html in your site's directory.

Only works on public images since it does not perform user authentication.

Setup

Clone this repository, then:

npm install .

You will have to get a API key from Flickr.

Create a file config.ini in the current directory:

api_key = "put the new API key here"
user_id = "put your user ID here"
size = "Medium 640"

The user id can be obtained by visiting this page while you are logged in. It will show the ID in "Useful Values"

Possible values for the size attribute are found here. If a photo does not have the size you select, it will be ignored

The default shortcode always sets the image width and height as 640x480 corresponding to the "Medium 640" size.

Run

node bin.js

prints out all albums (photosets) so you can find the ID of the album (photoset).

node bin.js photosetid

generates flickr shortcode for each photo in the photoset.

You can put each code wherever you want to include the image in your site.

The first run can take a little time as the Flickr API is introspected and cached.

Copy over flickr.html to layouts/shortcodes/ in your Hugo installation and you are ready to go!

The default shortcode is based on the code generated by the figure shortcode in the theme twentyfourteen. You can edit it as you like, but remember to access the write positional parameters.