Image in frontmatter
See original GitHub issueHi,
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.2node
version: 14.15.4npm
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:
- Created 2 years ago
- Reactions:1
- Comments:9 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
i went with this solution but would love an official way to do it from the frontmatter 👍
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.
Other images referenced in the body of the mdx are copied to the same folder by
mdx-bundler