Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gatsby-source-s3-image

Package Overview
Dependencies
Maintainers
1
Versions
444
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-source-s3-image

GatsbyJS plugin to source images from S3-compliant APIs, with EXIF-extracting superpowers.

  • 0.2.16
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

gatsby-source-s3-image

CircleCI npm Maintainability

GatsbyJS Source plugin for converting images from an S3-compliant API[1] into GatsbyJS nodes (with full support for hooking into all of the powerful features the GatsbyImage API has to offer).

Additionally, gatsby-source-s3-image will automatically detect and extract image EXIF metadata from your photos, and expose this data at the GraphQL layer as node fields. Currently supported EXIF fields include:

  • DateCreatedISO (String)
  • DateTimeOriginal (Number)
  • ExposureTime (Number)
  • FNumber (Number)
  • FocalLength (Number)
  • ISO (Number)
  • LensModel (String)
  • Model (String)
  • ShutterSpeedValue (Number)

These fields are properties of the "wrapper" node, S3ImageAsset. This type composes the ImageSharp node, the File node representing the cached image on disk (fetched via the RemoteFileNode API), and lastly the extracted EXIF data. As a result, you can easily retrieve both a set of images as well as any subset of their associated metadata in a single request. For example:

export const pageQuery = graphql`
  query PhotographyPostsQuery {
    allS3ImageAsset {
      edges {
        node {
          id
          EXIF {
            DateCreatedISO
            ExposureTime
            FNumber
            ShutterSpeedValue
          }
          childImageSharp {
            original {
              height
              width
            }
            thumbnailSizes: sizes(maxWidth: 512) {
              aspectRatio
              src
              srcSet
              sizes
            }
            largeSizes: sizes(maxWidth: 1536) {
              aspectRatio
              src
              srcSet
              sizes
            }
          }
        }
      }
    }
  }
`

[1]: This includes AWS S3, of course, as well as third-party solutions like Digital Ocean Spaces, or open source / self-hosted products like Minio.

Setup

  1. Add the dependency to your package.json:
$ yarn add gatsby-source-s3-image
$ # Or:
$ npm install --save gatsby-source-s3-image
  1. Next, register the plugin with the GatsbyJS runtime in the plugins exported from your gatsby-config.js file, filling in the values to point to wherever your bucket is hosted:
const sourceS3 = {
  resolve: 'gatsby-source-s3-image',
  options: {
    bucketName: 'jesse.pics',
    domain: null, // Not necessary to define here for AWS S3; defaults to `s3.amazonaws.com`
    protocol: 'https',
  },
}

const plugins = [
  sourceS3,
  // ...
]

module.exports = { plugins }

Querying

  1. As mentioned above, gatsby-source-s3-image exposes nodes of type S3ImageAsset:
type S3ImageAssetNode = {
  id: String,
  absolutePath: String,
  ETag: String,
  Key: String,
  EXIF: ?ExifData, // ExifData is defined below -->
  internal: {
    content: String,
    contentDigest: String,
    mediaType: String,
    type: String,
  },
}

type ExifData = {
  DateCreatedISO: String,
  DateTimeOriginal: Number,
  ExposureTime: Number,
  FNumber: Number,
  FocalLength: Number,
  ISO: Number,
  LensModel: String,
  Model: String,
  ShutterSpeedValue: Number,
}

Not only can this be used to populate page data, I've found it useful in bootstrapping the pages themselves, e.g., to dynamically create dynamic photo gallery pages at build time depending on the contents of a bucket, something like:

// In `gatsby-node.js` -- using a query like this:
const photographyQuery = `{
  allS3ImageAsset {
    edges {
      node {
        ETag
        EXIF {
          DateCreatedISO
        }
      }
    }
  }
}`

// We can then dynamically generate pages based on EXIF data, like this:
const createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  const photographyTemplate = path.resolve('./src/templates/photography-post.js')

  const createPhotographyPosts = edges => {
    // Create the photography "album" pages -- these are a collection of photos
    // grouped by ISO date.
    const imagesGroupedByDate = _.groupBy(edges, 'node.EXIF.DateCreatedISO')
    _.each(imagesGroupedByDate, (images, date) => {
      createPage({
        path: `/photography/${date}`,
        component: photographyTemplate,
        context: {
          name: date,
          datetime: DateTime.fromISO(date),
          type: PageType.Photography,
        },
      })
    })
  }
}

Keywords

FAQs

Package last updated on 13 Oct 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc