gatsby-plugin-thumbor

A plugin for integrating gatsby-plugin-image with thumbor, an open-source smart on-demand image cropping, resizing and filters, so you can make your own smart image handling service.

Install

yarn add @vtex/gatsby-plugin-thumbor gatsby-plugin-image

How to use

For using this plugin, you will need to add both gatsby-plugin-image and gatsby-plugin-thumbor to your gatsby-config.js.

1// In your gatsby-config.js
2module.exports = {
3  plugins: [
4    // other plugins ...
5    {
6      resolve: 'gatsby-plugin-image'
7    },
8    {
9      resolve: `@vtex/gatsby-plugin-thumbor`
10      options: {
11        // Your thumbor server url
12        server: 'https://mythumborserver.com',
13      }
14    }
15  ],
16}

Then, in your react component you can simply use the hooks exported by gatsby-plugin-thumbor with the components exported by gatsby-plugin-image

1// In your React component
2import React, { FC } from 'react'
3import { useThumborImageData } from '@vtex/gatsby-plugin-thumbor'
4import { GatsbyImage } from 'gatsby-plugin-image'
5
6const MyComponent: FC = () => {
7  const image = useThumborImageData({
8    baseUrl: 'http://example.org/image.jpg',
9    options: {
10      // ...other thumbor options
11      fitIn: true,
12    }
13  })
14
15  return <GatsbyImage alt="example image" image={image} />
16}

How it works

Thumbor is an image processing service that enables you to process any image on the web. According to gatsby-plugin-image documentation, thumbor is a URL-based image optimization service. This means that, for processing an image, we only need to generate an URL with the right parameters, and thumbor will do the heavy lifting for us.

A thumbor compatible URL can be split into two sections. The first one is a thumbor specific URL with parameters for image resizing, postprocessing, etc, and a second section containing a data source where thumbor must fetch the original image from. To illustrate. Let's suppose your thumbor service is located at mythumborserver.com domain and that you need to resize to 250px/250px an image located at example.com/image.png. To resize image.png you can do the following request:

GET https://mythumborserver.com/unsafe/250x250/http://example.com/image.png

The aforementioned request returns the processed image. gatsby-plugin-image uses this URL in HTML's img tag elements to add images to the final HTML.

As mentioned before, Thumbor has lots of different parameters that tell it how to process and convert images. gatsby-plugin-thumbor tightly integrates with gatsby-plugin-image to give you control over these parameters in a simple interface, while generating a thumbor compatible URLs. The interface chosen is the extra options parameters in gatsby-plugin-image functions.

Securing your thumbor service

You may now be wondering why there is an /unsafe segment in thumbor's generated URL. This is because thumbor accepts requests from anyone on the internet to process and resize images. This makes the thumbor service prone to DDoS attacks.

Thumbor has a solution for this on their docs. They say you should sign the URLs so the thumbor service knows when an image is from a reliable source or if it's someone messing with your server. This is the best way for protecting your thumbor server.

However, this plugin offers an alternative to this solution. Usually, when serving gatsby, you are using a CDN (gatsby-plugin-netlify) or Nginx (@vtex/gatsby-plugin-nginx). These services can be used as a reverse proxy server. Adding a reverse proxy to your thumbor service may protect it from malicious users because then we can only allow a small subset of all possible transformations to your images, decreasing the attack space on your thumbor service. This protection is achieved with two parameters accepted by the plugin, sizes and basePath. A config using these parameters looks like this:

1// In your gatsby-config.js
2module.exports = {
3  plugins: [
4    // other plugins ...
5    {
6      resolve: 'gatsby-plugin-image'
7    },
8    {
9      resolve: `@vtex/gatsby-plugin-thumbor`
10      options: {
11        // Your thumbor server url
12        server: 'https://mythumborserver.com',
13        basePath: '/images',
14        sizes: [
15          '1080x1080',
16          '720x720',
17        ]
18      }
19    }
20  ],
21}

Now, instead of creating URLs like https://mythumborserver.com/unsafe/1080x1080/http://example.com/image.png, the plugin will create URLs for {basePath}/1080x1080/http://example.com/image.png, serve thumbor images on the same domain as your site, and will only allow resizing to 1080x1080 and 720x720 images.

Behind the scenes, what this plugin is doing is calling a createRedirect function between /{basePath}/{size} => https://mythumborserver.com/unsafe/{size}

Examples

Aside from useThumborImageData, this plugin exports useUrlBuilder, useGetThumborImageData, getThumborImageData and urlBuilder. These functions are thin wrappers to their counterparts on gatsby-plugin-image only adding the plugin's options, like the thumbor server URL. You can use them normally in your react code. For instance, if you need the getImageData function you can:

1// In your React component
2import React, { FC } from 'react'
3import { useGetThumborImageData } from '@vtex/gatsby-plugin-thumbor'
4import { GatsbyImage, withArtDirection } from 'gatsby-plugin-image'
5
6const MyComponent: FC = () => {
7  // gatsby-plugin-image's getImageData function
8  const getImageData = useGetThumborImageData()
9  const img1 = getImageData({baseUrl: 'http://example.org/img1.jpg'})
10  const img2 = getImageData({baseUrl: 'http://example.org/img2.jpg'})
11
12  // The images are totally compatible with gatsby-plugin-image
13  const image = withArtDirection(img1, {
14    media: '(max-width: 40em)',
15    image: img2
16  })
17
18  return <GatsbyImage alt="example image" image={image} />
19}

How to contribute

Feel free to open issues in our repo. Also, there is a general contributing guideline in there