danielmahon/gatsby-remark-relative-images

Mixed types of paths in frontmatter and body of markdown

johnpcutler opened this issue · 1 comments

Apologies, I am very new to this. This may be related to some prior issues (#15), (#5), and (#18), but I'm not sure...

I recently did a big migration from Medium, and then retroactively populated an image path in my frontmatter. It feels like what I'm doing is pretty hacky, so any thoughts would be appreciated.

In my markdown, my images look like this:
![](/images/0*XRVALKugCEUqoy4O.jpg)

In my frontmatter, my image path look like this:

path:	"/blog/dr-obvious-startup-validation-and-failure"
date:	"2015-12-09"
title:	"Dr. Obvious, Startup Validation, and Failure"
image:	"0*XRVALKugCEUqoy4O.jpg"
---

To complicate things, the paths used in the markdown body (not frontmatter) are "right", whereas the FM image path is relative to the image folder (they are in src/images).

The hack I have to use now is to pass the path to my blogPostTemplate:
image

....and then find it using the relative path:
image

Here is my

  siteMetadata: {
    title: `@johncutlefish's blog`,
    description: `Writing on all things product by John Cutler (@johncutlefish).`,
	  author: `John Cutler`,
		twitterHandle: '@johncutlefish',
		siteURL: 'https://cutle.fish' //this is a bit of a hack
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
	{
	  resolve: `gatsby-source-filesystem`,
	  options: {
	    name: `markdown-pages`,
	    path: `${__dirname}/src/markdown-pages`,
	  },
	},
	`gatsby-transformer-remark`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
	{
	  resolve: `gatsby-transformer-remark`,
	  options: {
	    plugins: [
		  {
		    resolve: `gatsby-remark-relative-images`,
	      },
	      {
	        resolve: `gatsby-remark-images`,
	        options: {
	            // It's important to specify the maxWidth (in pixels) of
	            // the content container as this plugin uses this as the
	            // base for generating different widths of each image.
	            maxWidth: 1200,
	        },
	      },
	    ],
	  },
	},```

Solved this by just rewriting the paths.