question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Image in frontmatter

See original GitHub issue

Hi,

Thanks for this wonderful package ☺️

I was wondering if it’s possible to use mdx-bundler to parse relative image file references in frontmatter. It’s working perfectly for images in the mdx content itself but the images referenced in the frontmatter aren’t written to the output directory.

I would like to use the frontmatter to display a preview of the blog post in card format, including the banner.

Any guidance would be much appreciated!

  • mdx-bundler version: 5.1.2
  • node version: 14.15.4
  • npm version: 7.20.0

Relevant code or config

---
title: My first blog post
date: "2021-07-22"
banner: "./images/banner.jpg"
---
const ROOT_PATH = process.cwd();
const PUBLIC_PATH = path.join(ROOT_PATH, "public");

const { code, frontmatter } = await bundleMDX(source, {
    cwd: directory,
    files,
    xdmOptions: (options) => {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        remarkMdxImages,
        gfm,
      ];

      return options;
    },
    esbuildOptions: (options) => {
      options.entryPoints = [getFilePath(directory)];
      options.outdir = path.join(PUBLIC_PATH, "images", type, slug);
      options.loader = {
        ...options.loader,
        ".webp": "file",
        ".png": "file",
        ".jpg": "file",
        ".jpeg": "file",
        ".gif": "file",
      };
      options.publicPath = `/images/${type}/${slug}`;
      options.write = true;

      return options;
    },
  });

What you did:

Ran bundleMDX in NextJS to bundle my MDX files.

What happened:

No error messages; the image file referenced in the frontmatter isn’t written to the outdir like the images in the content of the mdx file.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
deadcoder0904commented, Feb 17, 2022

i went with this solution but would love an official way to do it from the frontmatter 👍

3reactions
jeffreyquancommented, Jan 23, 2022

Thanks for sharing, @CanRau!

@deadcoder0904 and @city17, I haven’t implemented an optimal solution yet since I have not been blogging. I have created an images folder in my public directory and stored each image relevant to a blog post within a folder that has the slug of the blog post as the name of the folder and reference this in the frontmatter of the mdx files e.g.

---
title: My first blog post
date: "2021-07-22"
banner:   /images/blog/my-first-blog-post/banner.png
---

Other images referenced in the body of the mdx are copied to the same folder by mdx-bundler

Read more comments on GitHub >

github_iconTop Results From Across the Web

Add Images to Markdown Frontmatter - Thinkster.io
Let's start learning how to add images to Markdown and MDX files. The first way is to include an image in our Markdown...
Read more >
Working with Images in Markdown & MDX - Gatsby
Featured images with frontmatter metadata ... In sites like a blog, you may want to include a featured image that appears at the...
Read more >
How to use optional images in mdx frontmatter? #18271
I'd like to use optional images in frontmatter of markdown files processed with gatsby-plugin-mdx . I have multiple markdown files which ...
Read more >
Using frontmatter in a markdownfile to query for images in a ...
I'm using GraphQL from within a Gatsby project. I have a set of markdown files for a blog-like section of the site. In...
Read more >
Markdown - Front Matter CMS
Inserting images was never easier with the insert image into article command, which can also be triggered with the image icon in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found