Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

@sekmet/gatsby-transformer-wpcontent

About this plugin

A Gatsby transformer plugin for authoring content in HTML into WP GraphQL Node Types It search and creates links between entry types and asset so they can be queried in Gatsby using GraphQL and creates ImageSharp nodes from images found in html content image files that are supported by the Sharp image processing library and provides fields in their GraphQL types for processing your images in a variety of ways including resizing, cropping, and creating responsive images.

Install:

npm install --save @sekmet/gatsby-transformer-wpcontent

OR

yarn add @sekmet/gatsby-transformer-wpcontent

One functional area of the plugin is enriching raw HTML content by:

  • rewriting local links to point to the generated Gatsby pages,
  • adding section anchor links,
  • processing linked images into multi-resolution responsive img tags,
  • applying Prism.js highlighting to code blocks,
  • embedding code examples from external files,
  • adding synthetic identifiers to paragraph to make it possible to link to them from content search results.

Another functional area of the plugin is extracting paragraph-sized text snippets from the page, so that they can be indexed in the client-side text search implemented by the gatsby-plugin-content-search plugin.

The enriched HTML and lists of extracted text snippets are available in Gatsby’s GraphQL model for use by other plugins.