← Journal Luke Korth 2014 · 12 · 08
Making posted  2014·12·08 read    2 min

500px Embedding for Jekyll

A small Liquid tag to add 500px photos into a Jekyll post using the official embedding.

Update

On June 15th, 2018 500px shut off their API. This plugin used the 500px API to retrieve information about a photo in order to render the embedded html and no longer functions without the API.

Original Post

From time to time I like to read through 500px ISO to look at the amazing photos and gather some inspiration. One of my favorite parts of 500px ISO is the overlay on the photos that allow you to vote and also link directly to the photo and photographer on 500px.

I recently realized 500px ISO was just using the embedded snippets built right into 500px. On 500px, right next to the sharing buttons, there is an embed button that provides a chunk of html and some javascript to embed a photo. Since I’d rather not copy the chunk of html for every photo I want to embed, I wrote jekyll-500px-embed to use on my website. jekyll-500px-embed is a Jekyll plugin that adds a 500px Liquid tag for use on your Jekyll powered website. The README details the setup required for the plugin, but once it’s setup you can simply pass the photo’s id to the 500px tag

{% 500px 89255597 %}

and when your site is built, it will produce the following

Trail Through the Redwoods by Luke Korth on 500px.com

jekyll-500px-embed is available on GitHub. New features and pull requests are welcome.

Next →

Note

Getting an SSL Certificate

A reference for generating CSRs and creating certificate chains.