Tufan How It Works Features Pricing Blog

Gatsby-image on the landing page

July 11, 2020

An introduction to using Gatsby image by codebushi is a very good resource to incorporate the power of Gatsby’s fast loading of images.

The plugins gatsby-image, gatsby-transformer-sharp, gatsby-plugin-sharp and gatsby-source-filesystem are already a part of gatsby-starter-blog-mdx; I upgraded all these plugins to their latest versions.

A snippet of the final graphql query looks like this:

export const fluidImage = graphql `
    fragment fluidImage on File {
        childImageSharp {
            fluid {
                ...GatsbyImageSharpFluid
            }
        }
    }
`;
export const pageQuery = graphql`
    query {
        tufanHeroImg: file (relativePath: {eq: "tufan-io-hero.jpg"}){
            ...fluidImage
        }
        tufanDrawImg: file (relativePath: {eq: "tufan-draw.png"}){
            ...fluidImage
        }
    }
`;

The Tufan “hero” image on the landing page is of a different size from the other three images, and I chose not to use fluid(maxWidth: 1000) in the query above. I will let gatsby-image do its size magic.

On my Gatsby build, if I go to public/static/ea6fd68dda67b2ac04650895c3c61c44 I can see the Tufan hero image in different sizes, and the fluid part of the query above will use the appropriate size depending on the screen size.

The code is on github. Here is the website so far. You can see the blur effect on the images.

The main Tufan “hero” image is also rendered by gatsby-image, though it is not a background image as yet with text on top. The next blog post will talk about that.

Advanced Tip:

The articles below on medium.com by Alexa Steinbruck go in-depth into how gatsby-image works. You will need access to medium. It is a 3 part series:

I will need to explore this when I modify the CSS on my landing page to make it responsive to different screen sizes.