Optimize all blog post images with gatsby-image plugin

151 Views Asked by At

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:

  1. A featured image, which is a part of frontmatter (and I am able to manage through a GraphiQl query)
  2. 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"
---
0

There are 0 best solutions below