@davepwsmith/gatsby-source-flickr

    1.2.0 • Public • Published

    gatsby-source-flickr

    This source plugin for Gatsby will make images from Flickr available in GraphQL queries.

    Installation

    # Install the plugin
    npm install @davepwsmith/gatsby-source-flickr

    In gatsby-config.js:

    module.exports = {
      plugins: [
        {
          resolve: "@davepwsmith/gatsby-source-flickr",
          options: {
            api_key: "YOUR_FLICKR_API_KEY",
            username: "YOUR_FLICKR_USERNAME",
          },
        },
      ],
    };

    NOTE: To get a Flickr API key, register for a Flickr account. You will then need to create a Flickr API app.

    Configuration Options

    The plugin uses the people.getPublicPhotos endpoint, and will add sane, restrained defaults.

    The api_key and username options are required.

    If you want to add any other "extras" to this from the API above, you can include them in an array on the extras key (example below).

    Example Configuration

    This would retrieve all photos for a given user id, and include location data.

    module.exports = {
      plugins: [
        {
          resolve: "@davepwsmith/gatsby-source-flickr",
          options: {
            api_key: process.env.FLICKR_API_KEY,
            username: process.env.FLICKR_USER,
            extras: ["geo"],
          },
        },
      ],
    };

    Querying Flickr Images

    Once the plugin is configured, two new queries are available in GraphQL: allFlickrPhoto and flickrPhoto.

    The nodes will have the following fields by default:

    id title description imageUrls - which contains an entry for each available size (e.g. _1024px)

    Here’s an example query to load 10 images in several sizes:

    query PhotoQuery {
      allFlickrPhoto(limit: 10) {
       nodes {
            id
            title
            description
            tags
            imageUrls {
            _1024px {
              url
              height
              width
            }
            _500px {
              url
              height
              width
            }
            sq_150px {
              url
              height
              width
            }
            _320px {
              url
              height
              width
            }
          }
          }
        }
      }
    }

    Install

    npm i @davepwsmith/gatsby-source-flickr

    DownloadsWeekly Downloads

    0

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    23.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • davepwsmith