10 Must-Have Gatsby Plugins for Contentful

Gatsby lets you move from idea to production smoothly thanks to its ever-growing community that has built around 2,500 plugins to help you connect nearly any CMS.

If you're looking to build a well-functional Contentful-powered website, Gatsby works like a charm. It lets you connect your project to various APIs and data sources, including Contentful’s content infrastructure.

In this post, we'll dive into the top 10 plugins that are a must-have for your Contentful application.

10 Gatsby Plugins for Contentful You Should Know About

1. Gatsby-source-contentful 

Apart from business logic, security, and performance, a website requires actual content to be presented to a user. Changing content types, such as images or blog posts, in the code editor is a very tedious task.

This is where gatsby-source-contentful comes into play. It makes full use of the headless CMS by allowing you to pull any content type, entries, and assets into Gatsby from Contentful spaces. 

How to Install

To install this plugin, run the script: npm install --save gatsby-source-contentful

2. Gatsby-remark-images-contentful

It is easy to create well-optimized title images with Gatsby using Contentful since they are not part of the content. However, it's a whole other challenge inside the blog.

Gatsby-remark-images-contentful solves this by letting you add captions to images inside Markdown files. It processes images in markdown so they can be used in the production build using Contentful’s Image API.

The plugin creates several images under the hood depending on the user's browser and device setting. Furthermore, it wraps them in an elastic container to avoid layout jumps while the image is loading.

How to Install

To install this plugin, run the script: npm install gatsby-remark-images-contentful

3. Gatsby-transformer-inline-svg

This plugin lets you load SVGs as inline components when given a URL from GraphQL. It reads the content of your SVG files from Contentful and further provides it for manipulation and rendering in GraphQL.

The plugin optimizes the output, since SVG files that are exported usually contain a lot of redundant information. It provides a compact data URI that converts SVGs into compressible data (that SVG-supporting browsers tolerate).

Another cool feature of this plugin is that it makes it easy for you to download the SVG and add it to your site's GraphQL schema.

How to Install

To install this plugin, run the script: npm i gatsby-transformer-inline-svg

4. Gatsby-source-contentful-locales

Sometimes you might be required to work with content that needs to be available in multiple languages. In that case, locales let you define the localization of content by selecting a specific locale when querying.

Gatsby-source-contentful-locales then pulls locales from contentful spaces. It creates a list with all the locales available and displays information, such as default locale and fallback locale.

How to Install

To install this plugin, run the script: npm install --save gatsby-source-contentful-locales

5. Gatsby-plugin-readingtime-contentful

This plugin comes in handy when you wish to give your readers an estimate of the reading time of any blog post or article. It can calculate a reading time estimate for any content from any source in your Gatsby project’s GraphQL schema. 

How to Install

To install this plugin, run the script: yarn add gatsby-plugin-readingtime-contentful

6. Gatsby-transformer-remote-filesystem

When working with a local filesystem, you can use various plugins for sourcing data into your Gatsby application. But what if all of your content needs to be sourced remotely (such as through Contentful)?

The gatsby-transformer-remote-filesystem plugin comes in handy here. It copies the remote File node content to the /static/folder. Hence, all of your content is directly sourced through the remote source, without needing to install additional plugins.

The plugin also allows you to fingerprint the parent directory instead of the file name.

How to Install

To install this plugin, run the script: npm install --save gatsby-transformer-remote-filesystem

7. Gatsby-plugin-performance-metrics

The gatsby-plugin-performance-metrics is a handy plugin that measures the First Contentful Paint (FP/FCP) and First Input Delay (FID) of a webpage.

These metrics are useful if you wish to improve a website’s Google’s PageSpeed Insights score and the overall UI/UX. FCP measures the time it takes for a browser to render the first piece of DOM content, once a user navigates to a page.

Similarly, FID measures the delay between a user's first interaction on the webpage (for example, with a button) and the browser's response to that action.

How to Install

To install this plugin, run the script: npm install --save gatsby-plugin-performance-metrics

8. Gatsby-theme-profile-builder

If you wish to create a portfolio site, gatsby-theme-profile-builder is the perfect solution. It allows you to showcase your work, skills, and even blog posts without the need of writing any code!

It works like a charm with Contentful, and the setup requires just a few configurations. Another cool feature of this theme is a light/dark mode switch. 

How to Install

To install this plugin, run the script: npm install --save @ashr81/gatsby-theme-profile-builder

9. Gatsby-theme-contentful-gallery

This plugin lets you showcase your images in a well-defined gallery. It’s a convenient way for blogs or portfolio sites to professionally display images in a grid.

You start by simply creating a workspace inside Contentful and populating this space with images. After that, you are all set to go. 

How to Install

To install this plugin, first, run the setup scripts: yarn global add contentful-management

contentful space import --space-id SPACE_ID --mt MANAGEMENT_TOKEN --content-file scripts/contentful-export.json

And then run this script:

yarn add gatsby-theme-contentful-gallery

10. Gatsby-source-contentful/rich-text

We talked earlier about the power plugin gatsby-source-contentful, which lets you pull any content type, entries, and assets into Gatsby from Contentful spaces.

This plugin extends support for rich text features. A common issue when using the Contentful Rich Text field is that it returns the response as pure JSON, rather than HTML. By using the rich text feature in this source plugin, you can serialize the field content to HTML. 

How to Install

To make use of this feature, first, install the plugin: npm install --save gatsby-source-contentful

And use the following query to get the HTML output:

{ allContentfulBlogPost {     bodyRichText {       childContentfulRichText {         html       }     }   } }

Wrapping Up

These 10 plugins are super handy when working with Contentful. However, there are thousands of other plugins for Contentful that you can explore on Gatsby’s website. Gatsby’s rich library of plugins and themes is essentially what makes this duo so powerful.

Interested in learning more about Gatsby? Check out how we built a website personalization experience using Gatsby cloud functions.