Gatsby-Image Sometimes. Sanity Image Others.

Sanity is a pretty quick CMS for setting up client needs. I recently had a site that was setup to funnel all images from Sanity to Gatsby-Image. This ensured everything would be compressed/optimized. Thing is, it did it to .Gif files too. What happens then? Lotta nothin. It compresses the file out of .GIF-mode. Here is my animated .GIF:

Add in a Toggle in Sanity to Nuke Gatsby-Image on occasion and you are set. You can have your .GIF and compressed images too.

Sanity uses your secondary solution for images. In my case it loads the image/gif that was uploaded without any additional compression settings.

gastbyjs sanity code

Here's how it's put it together.

1: Configure the figure.js schema in Sanity:

Add a boolean to the figure schema you typically use. (Lines 30-34)

2: Setup a conditional in Gatsby:
** getFluidGatsbyImage, buildImageObj, and imageUrlFor, are outlined thoroughly through the attached links.

  • Lines 10-15: if gatsby-image is NOT disabled Use Gatsby-Image
  • Lines 16-18: if gatsby-image is disabled use standard <img/> with sanity image setup

That's it! Now you can pick Gatsby-Image as needed.

...

Test

© 2020 3200.Pro | Site Design: 3200.pro