I am wondering if there is a possibility to enable the gatsby-image plugin for all images by default for a blog post, where I may have more than 1 image.
This is how my blog post uses images:
- A featured image, which is a part of frontmatter (and I am able to manage through a GraphiQl query)
- And all other images of a blog post are inlined using transformer-remark-plugin
I need help with #2 to enable gatsby-image plugin for all images of a blog post.
Blogpost Template
import React from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/Layout"
import SEO from "../components/SEO"
const Template = ({ data, pageContext }) => {
const { next, prev } = pageContext
const { markdownRemark } = data
const title = markdownRemark.frontmatter.title
const desc = markdownRemark.frontmatter.description || markdownRemark.frontmatter.excerpt
const image = markdownRemark.frontmatter.image
const html = markdownRemark.html
console.log('image::: ',image)
return (
<Layout>
<SEO
title={title}
description={desc}
image={image}
/>
<h1 className="post-title">{title}</h1>
<Img fluid={data.markdownRemark.frontmatter.image.childImageSharp.fluid} />
<div className="post" dangerouslySetInnerHTML={{ __html: html }} />
{next && <Link to={next.frontmatter.path}>Next</Link>}
{prev && <Link to={prev.frontmatter.path}>Prev</Link>}
</Layout>
)
}
export const query = graphql`
query($pathSlug: String!) {
markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
html
frontmatter {
title
excerpt
description
image
}
}
}
`
export default Template
Frontmatter
---
title: "Celebrity Trends Which Inspired High Street Fashion"
date: "2020-31-05"
path: "fashion/celebrity-trends-which-inspired-high-street-fashion"
image: "/img/posts/1024x768.png"
categories:
- "Fashion"
description: "Description for Celebrity Trends Which Inspired High Street Fashion"
tags:
- "celebrity"
- "hollywood"
---