adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-03 17:12:21 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Issue: Image preview on dashboard cards works only sporadically #707

New Issue
Closed
opened 2026-10-05 03:01:22 +02:00 by adam · 6 comments
adam commented 2026-10-05 03:01:22 +02:00
Owner
Copy link
Copy source

Happy New Year ;)

Describe the bug

The image preview works only in some of my recent posts. I wonder if it has to do with my schema or some other frontmatter quirks. The images linked are available and (to my eyes) are identical configured in the frontmatter.

image

To Reproduce
Steps to reproduce the behavior:

  1. Check out my repository and have a look at the dashboard and the last three posts for instance
  2. I think after checkout you will need to run npm install

Expected behavior
I would expect all three posts to have image previews

Device:

  • OS: Ubuntu 24.10
  • Front Matter CMS Version 10.7.0
  • Browser Chrome ;)
Happy New Year ;) **Describe the bug** The image preview works only in some of my recent posts. I wonder if it has to do with my schema or some other frontmatter quirks. The images linked are available and (to my eyes) are identical configured in the frontmatter. ![image](https://github.com/user-attachments/assets/863fb98f-0dbb-4aa7-92d6-14b6bd7b9d47) **To Reproduce** Steps to reproduce the behavior: 1. Check out my repository and have a look at the dashboard and [the last three posts for instance](https://github.com/davidsneighbour/kollitsch.dev/tree/main/content/blog/2025) 2. I think after checkout you will need to run `npm install` **Expected behavior** I would expect all three posts to have image previews **Device:** - OS: Ubuntu 24.10 - Front Matter CMS Version 10.7.0 - Browser Chrome ;) <!-- github-sync-id:2781722096 -->
adam closed this issue 2026-10-05 03:01:22 +02:00
adam commented 2026-10-05 03:01:22 +02:00
Author
Owner
Copy link
Copy source

Thanks @davidsneighbour, happy new year for you too.

I'll have a look at it.

Thanks @davidsneighbour, happy new year for you too. I'll have a look at it. <!-- github-comment-id:2599682056 -->
adam commented 2026-10-05 03:01:23 +02:00
Author
Owner
Copy link
Copy source

@davidsneighbour, the type or fmContentType field is missing in the front matter section. For the files are working, the type was set to blog.

As there are multiple content types defined for your blog in the frontMatter.content.pageFolders setting, it won't do it automatically.

Here is the view of your articles when I added fmContentType: blog (type is the old property, but will still work).

Image

@davidsneighbour, the `type` or `fmContentType` field is missing in the front matter section. For the files are working, the `type` was set to `blog`. As there are multiple content types defined for your blog in the `frontMatter.content.pageFolders` setting, it won't do it automatically. Here is the view of your articles when I added `fmContentType: blog` (type is the old property, but will still work). ![Image](https://github.com/user-attachments/assets/cc5523d4-de3d-4a26-bfe3-b98b3bc7b2df) <!-- github-comment-id:2639512297 -->
adam commented 2026-10-05 03:01:24 +02:00
Author
Owner
Copy link
Copy source

Ok, that makes sense, ... "but" ;)
If I understand that right, then I have to add fmContentType: blog to all frontmatter sections in the blog section. Is there a way to have it "cascading" from somewhere? The blog is a Hugo website, so I am very spoiled with that. The content type is automatically blog because the "section" (first folder name relative to the content root) is named blog. It would be nice if that could somewhere be added once for a folder or in some form of config file for a folder and all files below that root have the same type if not defined explicitly.

It also messes up the last modified stamps on all content (if I add it now) ;) Not complaining, just asking.

Ok, that makes sense, ... "but" ;) If I understand that right, then I have to add `fmContentType: blog` to all frontmatter sections in the blog section. Is there a way to have it "cascading" from somewhere? The blog is a Hugo website, so I am very spoiled with that. The content type is automatically `blog` because the "section" (first folder name relative to the content root) is named blog. It would be nice if that could somewhere be added once for a folder or in some form of config file for a folder and all files below that root have the same type if not defined explicitly. It also messes up the last modified stamps on all content (if I add it now) ;) Not complaining, just asking. <!-- github-comment-id:2642198517 -->
adam commented 2026-10-05 03:01:24 +02:00
Author
Owner
Copy link
Copy source

If I understand that right, then I have to add fmContentType: blog to all frontmatter sections in the blog section.

At this moment, yes, that is indeed the case. Or have a frontMatter.content.pageFolders setting which has only one content type defined.

The blog is a Hugo website, so I am very spoiled with that.

Each SSG has its own implementation. That is why FM uses the frontMatter.content.pageFolders setting and content-types to support as many SSGs.

It also messes up the last modified stamps on all content (if I add it now)

To temporarily turn this off, you can set the frontMatter.content.autoUpdateDate to false.

> If I understand that right, then I have to add fmContentType: blog to all frontmatter sections in the blog section. At this moment, yes, that is indeed the case. Or have a `frontMatter.content.pageFolders` setting which has only one content type defined. > The blog is a Hugo website, so I am very spoiled with that. Each SSG has its own implementation. That is why FM uses the `frontMatter.content.pageFolders` setting and content-types to support as many SSGs. > It also messes up the last modified stamps on all content (if I add it now) To temporarily turn this off, you can set the `frontMatter.content.autoUpdateDate` to false. <!-- github-comment-id:2642391672 -->
adam commented 2026-10-05 03:01:25 +02:00
Author
Owner
Copy link
Copy source

Got it.

For convenience sake, here is a little NodeJS script for anyone who got to change many markdown files in a folder. This one does what I did not want to do by hand (traverse through a directory and add/change one front matter value in every markdown file) ;)

#!/usr/bin/env node

import fs from 'fs';
import path from 'path';
import { execSync } from 'child_process';

// Function to show help message
const showHelp = () => {
  console.log(`
Usage:
  node manage-frontmatter.mjs --folder=content --key=PARAM --value=NEWVALUE

Options:
  --folder=<path>   Directory to scan for Markdown files (default: 'content')
  --key=<param>     Frontmatter key to add/update
  --value=<value>   New value for the frontmatter key
  --help            Show this help message

Examples:
  node manage-frontmatter.mjs --folder=content/blog --key=fmContentType --value=blog
  node manage-frontmatter.mjs --key=author --value="John Doe"
    `);
  process.exit(0);
};

// Parse CLI arguments
const args = process.argv.slice(2).reduce((acc, arg) => {
  const [key, value] = arg.split('=');
  acc[key.replace('--', '')] = value;
  return acc;
}, {});

// Show help if `--help` is passed or if no required parameters are given
if (args.help || !args.key || !args.value) {
  showHelp();
}

const baseFolder = args.folder || 'content';
const keyToUpdate = args.key;
const newValue = args.value;

// Function to check if a package is installed
const isPackageInstalled = async (packageName) => {
  try {
    await import(packageName);
    return true;
  } catch (e) {
    return false;
  }
};

// Ensure gray-matter is installed
const packageName = 'gray-matter';

isPackageInstalled(packageName).then(async (installed) => {
  if (!installed) {
    console.error(`\n⚠️  The package '${packageName}' is not installed.\n`);
    process.stdout.write("Would you like to install it now? (y/n) ");

    process.stdin.setEncoding('utf8');
    process.stdin.once('data', (answer) => {
      answer = answer.trim().toLowerCase();
      if (answer === 'y') {
        console.log(`\nInstalling ${packageName}...\n`);
        try {
          execSync(`npm install ${packageName}`, { stdio: 'inherit' });
          console.log(`\n✅ ${packageName} installed. Please run the script again.\n`);
        } catch (err) {
          console.error(`\n❌ Failed to install ${packageName}. Exiting.\n`);
        }
      } else {
        console.log(`\n❌ ${packageName} is required to run this script. Exiting.\n`);
      }
      process.exit();
    });

    process.stdin.resume();
  } else {
    const { default: matter } = await import(packageName);

    /**
     * Recursively traverses directories and updates Markdown frontmatter
     * @param {string} dir - Directory to start traversal
     */
    const processDirectory = (dir) => {
      fs.readdirSync(dir).forEach(file => {
        const fullPath = path.join(dir, file);
        if (fs.statSync(fullPath).isDirectory()) {
          processDirectory(fullPath);
        } else if (file.endsWith('.md')) {
          updateFrontmatter(fullPath);
        }
      });
    };

    /**
     * Reads a markdown file, updates its frontmatter, and saves changes.
     * @param {string} filePath - Path to the markdown file
     */
    const updateFrontmatter = (filePath) => {
      const content = fs.readFileSync(filePath, 'utf8');
      const parsed = matter(content);

      // Update the given key with the new value
      parsed.data[keyToUpdate] = newValue;

      // Convert back to markdown format
      const updatedContent = matter.stringify(parsed.content, parsed.data);
      fs.writeFileSync(filePath, updatedContent, 'utf8');

      console.log(`Updated ${filePath}: Set '${keyToUpdate}' to '${newValue}'`);
    };

    // Start processing
    console.log(`Scanning folder: ${baseFolder}`);
    processDirectory(baseFolder);
    console.log('Update complete.');
  }
});

call it like this and follow the instructions:

node manage-frontmatter.mjs # or, for instance
node manage-frontmatter.mjs --folder=content/blog --key=fmContentType --value=blog
Got it. For convenience sake, here is a little NodeJS script for anyone who got to change many markdown files in a folder. This one does what I did not want to do by hand (traverse through a directory and add/change one front matter value in every markdown file) ;) ```js #!/usr/bin/env node import fs from 'fs'; import path from 'path'; import { execSync } from 'child_process'; // Function to show help message const showHelp = () => { console.log(` Usage: node manage-frontmatter.mjs --folder=content --key=PARAM --value=NEWVALUE Options: --folder=<path> Directory to scan for Markdown files (default: 'content') --key=<param> Frontmatter key to add/update --value=<value> New value for the frontmatter key --help Show this help message Examples: node manage-frontmatter.mjs --folder=content/blog --key=fmContentType --value=blog node manage-frontmatter.mjs --key=author --value="John Doe" `); process.exit(0); }; // Parse CLI arguments const args = process.argv.slice(2).reduce((acc, arg) => { const [key, value] = arg.split('='); acc[key.replace('--', '')] = value; return acc; }, {}); // Show help if `--help` is passed or if no required parameters are given if (args.help || !args.key || !args.value) { showHelp(); } const baseFolder = args.folder || 'content'; const keyToUpdate = args.key; const newValue = args.value; // Function to check if a package is installed const isPackageInstalled = async (packageName) => { try { await import(packageName); return true; } catch (e) { return false; } }; // Ensure gray-matter is installed const packageName = 'gray-matter'; isPackageInstalled(packageName).then(async (installed) => { if (!installed) { console.error(`\n⚠️ The package '${packageName}' is not installed.\n`); process.stdout.write("Would you like to install it now? (y/n) "); process.stdin.setEncoding('utf8'); process.stdin.once('data', (answer) => { answer = answer.trim().toLowerCase(); if (answer === 'y') { console.log(`\nInstalling ${packageName}...\n`); try { execSync(`npm install ${packageName}`, { stdio: 'inherit' }); console.log(`\n✅ ${packageName} installed. Please run the script again.\n`); } catch (err) { console.error(`\n❌ Failed to install ${packageName}. Exiting.\n`); } } else { console.log(`\n❌ ${packageName} is required to run this script. Exiting.\n`); } process.exit(); }); process.stdin.resume(); } else { const { default: matter } = await import(packageName); /** * Recursively traverses directories and updates Markdown frontmatter * @param {string} dir - Directory to start traversal */ const processDirectory = (dir) => { fs.readdirSync(dir).forEach(file => { const fullPath = path.join(dir, file); if (fs.statSync(fullPath).isDirectory()) { processDirectory(fullPath); } else if (file.endsWith('.md')) { updateFrontmatter(fullPath); } }); }; /** * Reads a markdown file, updates its frontmatter, and saves changes. * @param {string} filePath - Path to the markdown file */ const updateFrontmatter = (filePath) => { const content = fs.readFileSync(filePath, 'utf8'); const parsed = matter(content); // Update the given key with the new value parsed.data[keyToUpdate] = newValue; // Convert back to markdown format const updatedContent = matter.stringify(parsed.content, parsed.data); fs.writeFileSync(filePath, updatedContent, 'utf8'); console.log(`Updated ${filePath}: Set '${keyToUpdate}' to '${newValue}'`); }; // Start processing console.log(`Scanning folder: ${baseFolder}`); processDirectory(baseFolder); console.log('Update complete.'); } }); ``` call it like this and follow the instructions: ```bash node manage-frontmatter.mjs # or, for instance node manage-frontmatter.mjs --folder=content/blog --key=fmContentType --value=blog ``` <!-- github-comment-id:2644472918 -->
adam commented 2026-10-05 03:01:26 +02:00
Author
Owner
Copy link
Copy source

@davidsneighbour, thank you for sharing your script 🙏

@davidsneighbour, thank you for sharing your script 🙏 <!-- github-comment-id:2648562729 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#707