Giter Club home page Giter Club logo

flickr-hugo-embed's Introduction

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.

flickr-hugo-embed's People

Contributors

nikhilm avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.