I added a photo stream to my site. That’s how serious I am about my new hobby. For now, there aren’t many photos there, but I’m going to be adding more.

There are several ways to do this, but in my approach I’m not hosting the photos myself - I’m just fetching all my public photos from Flickr. The API is nice, and there’s a recommended wrapper for Node. The API returns up to 500 photo IDs in one request, which I’m then adding to Eleventy’s global data.

Another approach would be to use RSS with rss-parser and the RSS photo feed instead of an API to fetch images. That would be an option for other services that don’t offer an API, like Glass or 500px. It is also possible with Flickr but the RSS feed returns only the last 20 photos.

1. Adding the images to global data

The snippet below assumes that there are two environmental variables in the .env config: FLICKR_API_KEY with the API key and FLICKR_USER_ID with the user ID. The photo image URL is constructed according to the documentation.

eleventyConfig.addGlobalData(
  "photostream",
  async () => {
    // the function addGlobalData runs with every re-build,
    // so it might be a good idea to add a check 
    // that doesn't make it run in development builds
    if (process.env.MODE === 'development') {
      return [];
    }

    const size = "c";
    const key = process.env.FLICKR_API_KEY;
    const { flickr } = createFlickr(key);
    const response = await flickr("flickr.people.getPublicPhotos", {
      user_id: process.env.FLICKR_USER_ID,
      per_page: '500',
    });

    return response.photos.photo.map(
      ({ id, title, secret, server }) => ({
        title,
        url: `https://live.staticflickr.com/${server}/${id}_${secret}_${size}.jpg`
      })
    );
  },
)

2. Creating a photo stream page

This uses Eleventy’s pagination, with the size parameter controlling the number of photos displayed per page.

---
title: Photostream
pagination:
  data: photostream
  size: 10
---

{%- for photo in pagination.items %}
  <figure>
    <img alt="{{ photo.title }}" src="{{ photo.url }}" />
    <figcaption>{{ photo.title }}</figcaption>
  </figure>
{% endfor -%}

<nav class="pagination">
  {% if pagination.href.previous %}
    <a class="previous-page" href="{{ pagination.href.previous }}">
      Previous page
    </a>
  {% endif %}
  {% if pagination.href.next %}
    <a class="pagination next-page" href="{{ pagination.href.next }}">
      Next page
    </a>
  {% endif %}
</nav>

I also added a layout for this page and some styling.