Fluid image gatsby full#

Recently I have been building a new site similar to a blog-style site (more of a news site), and am of course using Gatsby and then switching my CMS to the more popular Contentful.

Fluid image gatsby full#

There are other ways of getting Drupal and Gatsby working together - jmolivas has been looking at attacking these problems from the Drupal perspective too via the TUI editor and related gatsby plugin - it's well worth looking at that approach too.įinally, here's the full jsx file that produces this type of article page that you're looking at right now.Why gatsby-image is so good and why you should be using it. Using the transform approach any script tags are identified, and their type determined by matching a domain name in the src attribute (eg or gist.github), then replacing with an appropriate React component (either a SpeakerDeck or Gist). The problem here is that in regular html you'd embed these as script tags, but this doesn't quite work for React as the component lifecycle differs from that of the traditional DOM (html) lifecycle, and so scripts need to be triggered in the appropriate location (eg in the componentDidMount method of the component). I've used a similar rewriting approach to embedding Github gists (seen in this article), and Speakerdeck presentations. So, back in our ReactHTMLParser transform function we can simply get the uuid of the image, helpfully Drupal renders this in the data-entity-uuid attribute of the tag, and we just iterate over all of our images until we find the one with the matching uuid and build our component out with that. As a graphql query can have multiple 'roots' we can add the following query to our article's query template - this will return all the images with their associated Drupal uuid. Because files, including inline images, are entities in Drupal 8, Gatsby helpfully downloads them for us and we're able to query them. It turns out that the answer is quite simple. But the component requires that you pass in the result of a graphql image query fragment. Whenever we come across an html tag we can replace it with an JSX component.

One way of attacking this problem is by rewriting the body field within Gatsby, using Gatsby's inbuilt knowledge of React components to transform the html that comes out of Drupal.īecause Gatsby is built on React we can use the ReactHTMLParser component to pass in html and a callback function that is called for every node in the DOM, giving you the chance to transform it. These images will most often reference a URL that's handled by Drupal, whereas we want the the image to be handled by Gatsby so that we can make use of all of the functionality that comes with Gatsby's Image components such as late-loading, fluid styles, low-bandwidth previews etc. One common problem is with inline images, that is images that are included in an html field, typically the body field of an article. I'll blog more about the pros and cons about this approach another time, but here I'm just writing up my approach to managing inline content (images, embedded presentations etc). I recently moved this blog site from one running Drupal on a traditional LAMP stack, to a decoupled architecture with Drupal as the CMS backend and GatsbyJS providing static site publication in a serverless S3+Cloudflare frontend.