Skip to main content

Improving Drupal and Gatsby Integration - The Gatsby Plugin

On the first post of this series “Improving Drupal and Gatsby Integration - The Drupal Modules”. I introduced two contributed modules we wrote to simplify the Drupal usage while working with Gatsby. One of the modules mentioned was `tui_editor` a WYSIWYG markdown editor integration with the Toast UI Editor project. This module allows content editors to enter content as markdown, making easy to implement JSON-API endpoints that return markdown.

In this post, I will mention you how to take advantage of that markdown using `gatsby-remark-drupal` the Gatsby plugin we wrote. This plugin provides support for markdown preprocessing to Drupal body fields. In order to take advantage of Gatsby `gatsby-transformer-remark` to parse markdown as HTML, `gatsby-remark-images` to processes images in markdown so they can be used in the production build, and `gatsby-remark-external-links` among others.

What does this plugin do?

  • Creates a new `text/markdown` field for drupal body fields of the selected content types.
  • Replaces Drupal relative image paths to previously downloaded and cached images by the `gatsby-source-drupal` plugin.

Where can you find the plugin? 

How can you install this plugin?

By executing npm, from the root of your project:

npm install --save @weknow/gatsby-remark-drupal

How can you configure this plugin?

As any other Gatsby plugin by registering in your gatsby-config.js file.

By default this plugin process page and article content types.

resolve: `gatsby-transformer-remark`,
options: {
  plugins: [

But you can customize which content types to process.

resolve: `gatsby-transformer-remark`,
options: {
  plugins: [
      resolve: `@weknow/gatsby-remark-drupal`,
      options: {
        nodes: [`article`,`page`, `landing`, `cta`]

NOTE: In order to keep this series of publications clear and simple. We will be extended with a one or a couple of extra posts instead of the original planned three, for your ease of reading and comprehension of each topic.

Are you excited as we are with GatsbyJS and this new API Driven approach?

We invite you to check back as this series continues, exploring more tools we are building to contribute back to Drupal and Gatsby ecosystems that will allow you to implement a Drupal and Gatsby integration without needing to DIY.

Related Posts

Want to learn how to take advantage of these modules?

We can show you how these modules can improve your Drupal and Gatsby integration.