m5r / gatsby-transformer-blurhash

Compact representations of placeholders for images based on https://blurha.sh/

Gatsby Blurhash plugin

Installation

npm install @m5r/gatsby-transformer-blurhash

or

yarn add @m5r/gatsby-transformer-blurhash

Usage

You will need https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp to use this plugin.

Configuration

Add @m5r/gatsby-transformer-blurhash to your gatsby-config.js

module.exports = {
    siteMetadata: {
        title: `Gatsby Blurhash Example`,
    },
    plugins: [
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`,
            },
        },
        `gatsby-image`,
        `gatsby-plugin-sharp`,
        `gatsby-transformer-sharp`,
        `@m5r/gatsby-transformer-blurhash`,
    ],
}

Getting the previews

import { graphql } from "gatsby";
import Image from "gatsby-image";
import PropTypes from "prop-types";

const IndexPage = ({ data }) => (
    <>
        {data.images.edges.map(image => (
            <Image
                fluid={{
                    ...image.node.childImageSharp.fluid,
                    base64: image.node.childImageSharp.blurHash.base64Image,
                }}
            />
        ))}
    </>
);

export default IndexPage;

IndexPage.propTypes = {
    data: PropTypes.object,
};

export const query = graphql`
    query {
        images: allFile(
            filter: { sourceInstanceName: { eq: "images" }, ext: { eq: ".jpg" } }
        ) {
            edges {
                node {
                    publicURL
                    name
                    childImageSharp {
                        fluid(maxWidth: 400, maxHeight: 400) {
                            ...GatsbyImageSharpFluid_noBase64
                        }
                        blurHash(width: 400) {
                            base64Image
                        }
                    }
                }
            }
        }
    }
`;

Options

componentX: Integer, default: 4

See: https://github.com/woltapp/blurhash#how-do-i-pick-the-number-of-x-and-y-components

componentY: Integer, default: 3

See: https://github.com/woltapp/blurhash#how-do-i-pick-the-number-of-x-and-y-components

width: Integer, default: 400

Width of the input image, which is used to generate the preview.

height: Integer, default: auto

The height of the input image, which is used to generate the preview. By default this value is calculated automatically to keep the aspect ratio of the input image. Make sure to adjust the value to reflect the desired aspect ratio of your generated thumbnails.

Sharp

grayscale: GraphQLBoolean, default: false

See: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#grayscale

duotone: DuotoneGradientType, default: false

See: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#duotone

cropFocus: ImageCropFocusType, default: sharp.strategy.attention

See: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#cropfocus

rotate: GraphQLInt, default: 0

See: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#rotate