Asset handling via Frontmatter

[MartinMuzatko]

Hey there!

I would love to specify an image path via frontmatter for e.g. a header image for a specific page. How would I do that?

1. I can't use webpack aliases as they are only interpreted for markdown images
2. I can't resolve the path, there is nothing exported by utils to resolve assets

[ulivz]

Do you mean to add a picture to the top of a specific page?

Another question, why do you need to specify an image path via frontmatter? Since frontmatter is always for this page's metadata. if you just want to show an image, you can directly use ![]() where you want to.

[MartinMuzatko]

Another question, why do you need to specify an image path via frontmatter?

I want to use custom layouts @ulivz . I want to build something similar to a blog ( #36 ). Most of the functionality I need is already done via frontmatter properties. E.g. teaserText etc. But I would also like to define images that I can access via the custom layout and use for e.g. background image for the header.

To create something similar like this: https://happy-css.com/talks/

Vuepress or a static site generator is a perfect fit for this kind of website :) I just need to define a few properties I can re-use. If Vuepress homepage "features" would also include preview images, they would have to include that in frontmatter as well. https://raw.githubusercontent.com/vuejs/vuepress/master/docs/README.md

[yyx990803]

For now you can put it in .vuepress/public and reference it using absolute paths.

[MartinMuzatko]

It works but it feels a little bit clunky. had some trouble figuring out how all the paths behave.

[rafalolszewski94]

Also, when using base: '/repo-name/' config option, the paths provided in docs seems to not work.

[yyx990803]

@rafalolszewski94 please open a separate issue with more details. It doesn't help to just mention it here.

[imfing]

It would also be useful under such cases (blog post):

the yaml front matter of the README.md would expected to be:

# README.md
---
avatar: ./path1/image.png  # relative to README.md
background: ./path2/image.png
layout: Post
---

And the Post.vue would be like:

<template>
  <div>
    <img :src="data.avatar">
    <Content/>
  <div>
</template>

[shopali]

Hello there! how to make the css property - "background-img" can be set from the " front matter"??

[psi-4ward]

Hi mates, I've a workaround for SFC as Pages. I could not find a valid require URI for SFC inside .vuepress/theme

created() {
  this.allProjects = this.$site.pages
    .filter(page => page.frontmatter.isProject)
    .map(page => {
      let thumb = null;
      if (page.frontmatter.Thumb) {
        let base = page.path.replace('/Projekte', '.');
        if (base.endsWith('.html')) {
          base = base.split('/').slice(0, -1).join('/') + '/';
        }
        // Works only with '' + ... dont know why
        page.frontmatter.Thumb = require('' + base + page.frontmatter.Thumb);
      }
    });
}

I also stumbled about https://github.com/vuejs/vuepress/issues/1110

[lorisleiva]

This would also allow us to add a particular image as meta data for SEO purposes.

# In an article/page
---
image: ./cover.jpg
---

// In a plugin
const image = $page.frontmatter.image

$page.frontmatter.meta.push({ name: 'og:image', content: image })
$page.frontmatter.meta.push({ name: 'twitter:image', content: image })

[shigma]

Hello there! how to make the css property - "background-img" can be set from the " front matter"??

<div :style="{ backgroundImg: $frontmatter.avatar }">

[guidetheorient]

has any update?

[hrobertson]

I just started migrating from Hugo to Vuepress as I'm turning my previously 100% static site into a Vue SPA and have hit this stumbling block.

My layouts include images in certain locations such as a hero banner and others which are outside the scope of the <Content/> so I can't put them in the markdown body of the page. I expected to be able to specify the images in the frontmatter.

I only want images that are actually referenced by a page (or style) to be included in the output and I want my images processed by webpack (resizing etc), so putting them in .vuepress/public isn't an option.

[NarvaezTames]

Im having the same problem with the frontmatter.

[realityfilter]

We hit the same problem. We want to use urls in the frontmatter for use in custom components like image sliders. Is there any workaround for this except putting assets in the public folder?

The use of the public folder is problematic for us for the following reasons

• the typical maintainer should have no access to the hidden public folder
• most images are localized and should be near their corresponding markdown pages

[iashraful]

For now you can put it in .vuepress/public and reference it using absolute paths.

This is a good hack. But not a good solution I guess. 😞

[MartinMuzatko]

For now you can put it in .vuepress/public and reference it using absolute paths.

This is a good hack. But not a good solution I guess. 😞

Most headless CMS do it that way actually nowadays. ForestryCMS is putting everything in the public path.

[victornpb]

I think we should have a way of using loaders in the frontmatter, like:

---
title: Lorem Ipsum
thumbnail: require('./thumb.jpg')
asset: require('./asset.ext')
---
# content

That way we can keep all the assets inside the post directory, and not have it scattered around, and we can have the benefits of loaders like image optimization, etc...

Those assets would become available to pages like, rendering a list with a thumbnail, like:

<li v-for="post in posts">
  <img :src="post.thumbnail"> {{post.title}}

[victornpb]

I spent the weekend trying to get this functionality...

After MANY atempts, and a lot of time reading source code, I couldn't find a way to do this externally via plugin.

I had to write a webpack loader which parses the frontmatter and emits the file to the dist folder, and rewrites the frontmatter to the path of the asset.

The issue is that at the time of webpack bundling the frontmatter data is already loaded and it is being used by the client code. So the only way I found was to hackly duplicate the code there, I used the extendPageData hook, (I'm not sure if this is available without @vuepress/blog).

fm-loader.js

const fs = require('fs');
const path = require('path');
const loaderUtils = require('loader-utils');

module.exports = function (source, map) {
    const callback = this.async();
    (async () => {

        const {
            resourcePath,
            resourceQuery
        } = this;

        const options = loaderUtils.getOptions(this);

        const requireRE = /require\((.+)\)/g;
        source = source.replace(requireRE, (m, req) => {
            req = req.replace(/["']/g, '');
            let filePath = path.resolve(path.dirname(this.resourcePath), req);

            const file = fs.readFileSync(filePath);
            const filename = loaderUtils.interpolateName(this, `assets/img/${path.parse(filePath).name}.[hash:8]${path.extname(filePath)}`, {content: file});
            this.emitFile(filename, file);

            return filename;
        });

        source = source.replace(/Table/g, 'HAAAAAA');

        return source;
    })().then((res) => callback(undefined, res), (err) => callback(err));
};

add the loader like

  config.module
    .rule('foo-bar')
    .test(/\.md$/)
    // .before('images')
    .use('custom-loader')
    .loader(require.resolve('./myloader/loader'))

This module is used to modify pageCtx inside the extendPage(pageCtx) hook

const fs = require('fs')
const path = require('path')
const loaderUtils = require('loader-utils')

module.exports = function(pageCtx, ctx) {
  const requireRE = /require\(["'](.+)["']\)/g
  if (pageCtx.frontmatter.image) {
    const r = requireRE.exec(pageCtx.frontmatter.image)
    if (r) {
      let requirePath = r[1]
      let filePath = path.resolve(path.dirname(pageCtx._filePath), requirePath)
      const file = fs.readFileSync(filePath)
      const filename = loaderUtils.interpolateName(
        this,
        `assets/img/${path.parse(filePath).name}.[hash:8]${path.extname(filePath)}`,
        { content: file }
      )
      // this.emitFile(filename, file);
      fs.writeFileSync(path.join(pageCtx._context.outDir, filename), file)
      pageCtx.frontmatter.image = filename
    }
  }
}

[victornpb]

Is there any way I could add a rule that I can postProcess all the *.html files being emited? I tried creating many rules, but it seems that the html files are not being emitted by webpack and are being copied using fs or something similar.