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

Preview Images in Dashboard gone after "Clear Cache" #496

New Issue
Closed
opened 2026-10-05 02:50:14 +02:00 by adam · 13 comments
adam commented 2026-10-05 02:50:14 +02:00
Owner
Copy link
Copy source

I'm fiddling a bit around with the "isPreviewImage" feature (more on that in a different issue, maybe) and I tried out the "Clear Cache" command. After restarting VS Code and opening the dashboard, all preview images are gone and will only be rebuilded if I open up the posts one by one and save it again (STRG-S under Windows) without changes.

I'm fiddling a bit around with the "isPreviewImage" feature (more on that in a different issue, maybe) and I tried out the "Clear Cache" command. After restarting VS Code and opening the dashboard, all preview images are gone and will only be rebuilded if I open up the posts one by one and save it again (STRG-S under Windows) without changes. <!-- github-sync-id:1861239404 -->
adam commented 2026-10-05 02:50:15 +02:00
Author
Owner
Copy link
Copy source

My current preview image is configured like we talked about in https://github.com/estruyf/vscode-front-matter/issues/257 and I'm running Front Matter (v9.1.5937226-beta BETA)

My current preview image is configured like we talked about in https://github.com/estruyf/vscode-front-matter/issues/257 and I'm running Front Matter (v9.1.5937226-beta BETA) <!-- github-comment-id:1687990596 -->
adam commented 2026-10-05 02:50:15 +02:00
Author
Owner
Copy link
Copy source

What are the steps to reproduce it?

What are the steps to reproduce it? - Clone: https://github.com/kristofzerbe/kiko.io - ... <!-- github-comment-id:1688021660 -->
adam commented 2026-10-05 02:50:16 +02:00
Author
Owner
Copy link
Copy source

Oh yeah ... sry

  1. Clone: https://github.com/kristofzerbe/kiko.io

All files are now available for FRONTMATTER. Open up in VS Code und see if dashboard has preview images. If not, open up one post and press STRG-S (Save under Windows). Preview image will now be rendered in dashboard.

Oh yeah ... sry 1. Clone: https://github.com/kristofzerbe/kiko.io All files are now available for FRONTMATTER. Open up in VS Code und see if dashboard has preview images. If not, open up one post and press STRG-S (Save under Windows). Preview image will now be rendered in dashboard. <!-- github-comment-id:1688085153 -->
adam commented 2026-10-05 02:50:17 +02:00
Author
Owner
Copy link
Copy source

Strange ... A minute ago I cleared cache again and the dashboard has filled the preview files immediatly...!?

Strange ... A minute ago I cleared cache again and the dashboard has filled the preview files immediatly...!? <!-- github-comment-id:1688092940 -->
adam commented 2026-10-05 02:50:17 +02:00
Author
Owner
Copy link
Copy source

Thank you Elio for always responding so quickly 👍🏼

Thank you Elio for always responding so quickly 👍🏼 <!-- github-comment-id:1688094720 -->
adam commented 2026-10-05 02:50:18 +02:00
Author
Owner
Copy link
Copy source

Could be that the pages were still processing in the background. As some versions ago we changed this logic.

A couple of versions ago, we processed it on the dashboard load, but now it gets processed in the background and cached.

Let me know if it would happen again.

Could be that the pages were still processing in the background. As some versions ago we changed this logic. A couple of versions ago, we processed it on the dashboard load, but now it gets processed in the background and cached. Let me know if it would happen again. <!-- github-comment-id:1688096337 -->
adam commented 2026-10-05 02:50:19 +02:00
Author
Owner
Copy link
Copy source

Hi Elio ... yesterday only a few preview images where rendered and after another CLEAR CACHE no longer one on several different machines (local and virtual).

I currently try to make FM Dashboard to my main tool on writing for my blog. Here's my latest config:
https://github.com/kristofzerbe/kiko.io/blob/master/frontmatter.json

You said the images are cached? Where? Maybe I can try to delete the cache manually...

Hi Elio ... yesterday only a few preview images where rendered and after another CLEAR CACHE no longer one on several different machines (local and virtual). I currently try to make FM Dashboard to my main tool on writing for my blog. Here's my latest config: https://github.com/kristofzerbe/kiko.io/blob/master/frontmatter.json You said the images are cached? Where? Maybe I can try to delete the cache manually... <!-- github-comment-id:1692988071 -->
adam commented 2026-10-05 02:50:19 +02:00
Author
Owner
Copy link
Copy source

I just checked, and it is because of some incorrect configuration and SSG/CMS assumptions. You configured the public folder as follows:

{
  "frontMatter.content.publicFolder": {
    "path": "static",
    "relative": true
  }
}

However, your articles with a preview image do not include a relative path from the original content. For example, I will take this page: https://github.com/kristofzerbe/kiko.io/blob/867c5dc7c33a7903a478ce4abaff98787fc77153/source/_posts/2023/Top-10-Pens-of-Jon-Kantner.md

It contains the following front matter:

---
slug: Top-10-Pens-of-Jon-Kantner
title: Top 10 Pens of Jon Kantner
subtitle:
date: 2023-05-08 15:34:15
photograph:
  file: D50_1577.jpg
  name: Floral Magic XIV
  link: https://500px.com/photo/1068126744
  socialmedia: /static/images/social-media/Top-10-Pens-of-Jon-Kantner.png
---

Notice the socialmedia image path; if it was relative (as configured), it should be: ../../../static/images/social-media/404-Page-in-Hexo-for-GitHub-Pages.png.

Now, I noticed an issue with combining the settings when using Hexo. The CMS integrated support for Hexo in the past to reference images. Due to that, it causes us to skip the setting and fall back to the Hexo configuration. This will be fixed.

Now, once this is fixed, it should correctly add the paths as ../../../static/images/social-media/404-Page-in-Hexo-for-GitHub-Pages.png, although this is not your preferred outcome I believe.

In your case, you need a path to start with /static/images/, which requires configuring the frontMatter.content.publicFolder as an empty string. Once you apply this, all the previews start loading again.

I just checked, and it is because of some incorrect configuration and SSG/CMS assumptions. You configured the public folder as follows: ```json { "frontMatter.content.publicFolder": { "path": "static", "relative": true } } ``` However, your articles with a preview image do not include a relative path from the original content. For example, I will take this page: https://github.com/kristofzerbe/kiko.io/blob/867c5dc7c33a7903a478ce4abaff98787fc77153/source/_posts/2023/Top-10-Pens-of-Jon-Kantner.md It contains the following front matter: ```yaml --- slug: Top-10-Pens-of-Jon-Kantner title: Top 10 Pens of Jon Kantner subtitle: date: 2023-05-08 15:34:15 photograph: file: D50_1577.jpg name: Floral Magic XIV link: https://500px.com/photo/1068126744 socialmedia: /static/images/social-media/Top-10-Pens-of-Jon-Kantner.png --- ``` Notice the `socialmedia` image path; if it was relative (as configured), it should be: `../../../static/images/social-media/404-Page-in-Hexo-for-GitHub-Pages.png`. Now, I noticed an issue with combining the settings when using Hexo. The CMS integrated support for Hexo in the past to reference images. Due to that, it causes us to skip the setting and fall back to the Hexo configuration. *This will be fixed*. Now, once this is fixed, it should correctly add the paths as `../../../static/images/social-media/404-Page-in-Hexo-for-GitHub-Pages.png`, although this is not your preferred outcome I believe. In your case, you need a path to start with `/static/images/`, which requires configuring the `frontMatter.content.publicFolder` as an empty string. Once you apply this, all the previews start loading again. <!-- github-comment-id:1693077634 -->
adam commented 2026-10-05 02:50:20 +02:00
Author
Owner
Copy link
Copy source

I think on changing the preview to my original photo, which the social media image is based on, because actually I have a lot of drafts and the latter is only generated during build for ready posts.

As I have configured my contentType as follows and the photograph.file just helds the files NAME (like 'xyz.jpg') ...

"frontMatter.taxonomy.contentTypes": [
  ...
  {
    "title": "Photograph",
    "name": "photograph",
    "type": "fields",
    "fields": [
      {
        "title": "File",
        "name": "file",
        "type": "image",
        "isPreviewImage": true
      },
      {
        "title": "Name",
        "name": "name",
        "type": "string",
        "single": true
      },
      {
        "title": "Link",
        "name": "link",
        "type": "string"
      },
      {
        "title": "Social Media",
        "name": "socialmedia",
        "type": "image",
        "default": "{{sm}}"
      }
    ]
  },
  ...
]

... it should work with following publicFolder setting, as I have the photo with the proper file name in the TABLET folder too, right?

"frontMatter.content.publicFolder": {
  "path": "static/photos/tablet",
  "relative": true
}
I think on changing the preview to my original photo, which the social media image is based on, because actually I have a lot of drafts and the latter is only generated during build for ready posts. As I have configured my ``contentType`` as follows and the ``photograph.file`` just helds the files NAME (like 'xyz.jpg') ... ``` "frontMatter.taxonomy.contentTypes": [ ... { "title": "Photograph", "name": "photograph", "type": "fields", "fields": [ { "title": "File", "name": "file", "type": "image", "isPreviewImage": true }, { "title": "Name", "name": "name", "type": "string", "single": true }, { "title": "Link", "name": "link", "type": "string" }, { "title": "Social Media", "name": "socialmedia", "type": "image", "default": "{{sm}}" } ] }, ... ] ``` ... it should work with following ``publicFolder`` setting, as I have the photo with the proper file name in the TABLET folder too, right? ``` "frontMatter.content.publicFolder": { "path": "static/photos/tablet", "relative": true } ``` <!-- github-comment-id:1693131140 -->
adam commented 2026-10-05 02:50:21 +02:00
Author
Owner
Copy link
Copy source

ahh ... got it running with this:

"frontMatter.content.publicFolder": {
    "path": "./static/photos/tablet",
    "relative": false
  }
ahh ... got it running with this: ``` "frontMatter.content.publicFolder": { "path": "./static/photos/tablet", "relative": false } ``` <!-- github-comment-id:1693135290 -->
adam commented 2026-10-05 02:50:21 +02:00
Author
Owner
Copy link
Copy source

Hi Elio ... me again :)

Found a little inconvenience, that you may be able to help with:

In my process, I need the header image name multiple times, but when I configure FM as follows, I see the image itself in the dashboard, but not the name:

{
  "title": "File",
  "name": "file",
  "type": "image",
  "isPreviewImage": true
}

If I configure FILE as a string, I see the name, but not the image in the dashboard. I guess because isPreviewImage requires mandatory type image, right?

{
  "title": "File",
  "name": "file",
  "single": true,
  "type": "string",
  "isPreviewImage": true
}

The question is why? I would love to configure the files name as string and see the image in the dashboard.

Hi Elio ... me again :) Found a little inconvenience, that you may be able to help with: In my process, I need the header image name multiple times, but when I configure FM as follows, I see the image itself in the dashboard, but not the name: ``` { "title": "File", "name": "file", "type": "image", "isPreviewImage": true } ``` If I configure FILE as a string, I see the name, but not the image in the dashboard. I guess because ``isPreviewImage`` requires mandatory type ``image``, right? ``` { "title": "File", "name": "file", "single": true, "type": "string", "isPreviewImage": true } ``` The question is why? I would love to configure the files name as string and see the image in the dashboard. <!-- github-comment-id:1695266506 -->
adam commented 2026-10-05 02:50:22 +02:00
Author
Owner
Copy link
Copy source

@kristofzerbe isPreviewImage only works in combination with the image field. The file field is used for linking other files than images, or if you want to add various types of data to your content.

@kristofzerbe `isPreviewImage` only works in combination with the `image` field. The `file` field is used for linking other files than images, or if you want to add various types of data to your content. <!-- github-comment-id:1695270216 -->
adam closed this issue 2026-10-27 13:19:17 +01:00
adam commented 2026-10-27 13:19:22 +01:00
Author
Owner
Copy link
Copy source

Closing this as a stale issue, as there hasn't been any activity on it for a long time. If this is still a problem with the latest version of Front Matter CMS, feel free to reopen it (or create a new issue) and we'll take another look. Thanks!

Closing this as a stale issue, as there hasn't been any activity on it for a long time. If this is still a problem with the latest version of Front Matter CMS, feel free to reopen it (or create a new issue) and we'll take another look. Thanks! <!-- github-comment-id:6438495729 -->
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#496