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

Enhancement: Ability to specify the preview image in the content type #100

New Issue
Closed
opened 2026-10-05 02:25:21 +02:00 by adam · 15 comments
adam commented 2026-10-05 02:25:21 +02:00
Owner
Copy link
Copy source

Specify which field can be used for the preview image in the content type.

The issue raised by @appieschot on Twitter: https://twitter.com/appieschot/status/1443568883248492554?s=20

Specify which field can be used for the preview image in the content type. The issue raised by @appieschot on Twitter: https://twitter.com/appieschot/status/1443568883248492554?s=20 <!-- github-sync-id:1012237185 -->
adam closed this issue 2026-10-05 02:25:21 +02:00
adam commented 2026-10-05 02:25:21 +02:00
Author
Owner
Copy link
Copy source

This will be supported in the upcoming release where you can specify in your content type image field that it can be used as the preview image with the isPreviewImage property.

{
  "title": "Article preview",
  "name": "custom-image",
  "type": "image",
  "isPreviewImage": true
}
This will be supported in the upcoming release where you can specify in your content type image field that it can be used as the preview image with the `isPreviewImage` property. ```json { "title": "Article preview", "name": "custom-image", "type": "image", "isPreviewImage": true } ``` <!-- github-comment-id:931372791 -->
adam commented 2026-10-05 02:25:22 +02:00
Author
Owner
Copy link
Copy source

@appieschot this is now available for testing in the https://beta.frontmatter.codes version

More information: https://beta.frontmatter.codes/docs/content-types#field-properties

@appieschot this is now available for testing in the https://beta.frontmatter.codes version More information: https://beta.frontmatter.codes/docs/content-types#field-properties <!-- github-comment-id:931381733 -->
adam commented 2026-10-05 02:25:23 +02:00
Author
Owner
Copy link
Copy source

Awesome work 🚀, two more questions though ;-):

  • My images are stored in the /static folder (Hugo specific). When referencing you dont specify that folder and Hugo knows (https://gohugo.io/content-management/static-files/) any way we can configure that for preview's as well?
  • Even when specifying the preview URL correctly the image won't show up; it does show in the left pane as preview, but the dashboard shows an error image. Is there a place where I can look for logs?
Awesome work 🚀, two more questions though ;-): - My images are stored in the /static folder (Hugo specific). When referencing you dont specify that folder and Hugo knows (https://gohugo.io/content-management/static-files/) any way we can configure that for preview's as well? - Even when specifying the preview URL correctly the image won't show up; it does show in the left pane as preview, but the dashboard shows an error image. Is there a place where I can look for logs? <!-- github-comment-id:932091352 -->
adam commented 2026-10-05 02:25:23 +02:00
Author
Owner
Copy link
Copy source

@appieschot did you specify the frontmatter.content.publicfolder setting with static as value?

https://frontmatter.codes/docs/settings#frontmatter.content.publicfolder

@appieschot did you specify the `frontmatter.content.publicfolder` setting with `static` as value? https://frontmatter.codes/docs/settings#frontmatter.content.publicfolder <!-- github-comment-id:932094695 -->
adam commented 2026-10-05 02:25:24 +02:00
Author
Owner
Copy link
Copy source

Yes, the preview itself shows on the left pane (see screenshot) but throws a image not found in the dashboard.

image

Part of the settings:

 "frontMatter.taxonomy.contentTypes": [
        {
            "name": "default",
            "fields": [
                {
                    "title": "Title",
                    "name": "title",
                    "type": "string"
                },
                {
                    "title": "Publishing date",
                    "name": "date",
                    "type": "datetime"
                },
                {
                    "title": "Article preview",
                    "name": "image",
                    "type": "image",
                    "isPreviewImage": true
                },
                {
                    "title": "Is in draft",
                    "name": "draft",
                    "type": "boolean"
                },
                {
                    "title": "Categories",
                    "name": "categories",
                    "type": "categories"
                }
            ]
        }
    ],
    "frontMatter.content.pageFolders": [
        {
            "title": "post content",
            "path": "[[workspace]]/content"
        }
    ],
    "frontMatter.content.publicFolder": "static",
    "frontMatter.content.autoUpdateDate": true
Yes, the preview itself shows on the left pane (see screenshot) but throws a image not found in the dashboard. ![image](https://user-images.githubusercontent.com/15227781/135603822-e5ea4cb9-d413-4428-8f16-c9ad5d3bce0e.png) Part of the settings: ``` "frontMatter.taxonomy.contentTypes": [ { "name": "default", "fields": [ { "title": "Title", "name": "title", "type": "string" }, { "title": "Publishing date", "name": "date", "type": "datetime" }, { "title": "Article preview", "name": "image", "type": "image", "isPreviewImage": true }, { "title": "Is in draft", "name": "draft", "type": "boolean" }, { "title": "Categories", "name": "categories", "type": "categories" } ] } ], "frontMatter.content.pageFolders": [ { "title": "post content", "path": "[[workspace]]/content" } ], "frontMatter.content.publicFolder": "static", "frontMatter.content.autoUpdateDate": true ``` <!-- github-comment-id:932103194 -->
adam commented 2026-10-05 02:25:25 +02:00
Author
Owner
Copy link
Copy source

Would you be able to open the developer tools and check which URL of the image it tries to load?

Would you be able to open the developer tools and check which URL of the image it tries to load? <!-- github-comment-id:932105083 -->
adam commented 2026-10-05 02:25:25 +02:00
Author
Owner
Copy link
Copy source

Learned something new; didn't know it would be that easy.

Image on the left is rendered using:
<img src="https://file%2B.vscode-resource.vscode-webview.net/c%3A/git/sbx/weblog/static/wp-content/uploads/2021/cliflowexport.webp">

The image in the dashboard is:
<img src="/wp-content/uploads/2021/cliflowexport.webp" alt="Flow missing export to logic app? Use the CLI for Microsoft 365" class="absolute inset-0 h-full w-full object-cover" loading="lazy">

Manually changing the URL only solves the problem.

Learned something new; didn't know it would be that easy. Image on the left is rendered using: ```<img src="https://file%2B.vscode-resource.vscode-webview.net/c%3A/git/sbx/weblog/static/wp-content/uploads/2021/cliflowexport.webp">``` The image in the dashboard is: ```<img src="/wp-content/uploads/2021/cliflowexport.webp" alt="Flow missing export to logic app? Use the CLI for Microsoft 365" class="absolute inset-0 h-full w-full object-cover" loading="lazy">``` Manually changing the URL only solves the problem. <!-- github-comment-id:932121559 -->
adam commented 2026-10-05 02:25:26 +02:00
Author
Owner
Copy link
Copy source

ok, know what the issue is 😀, will fix it

ok, know what the issue is 😀, will fix it <!-- github-comment-id:932121957 -->
adam commented 2026-10-05 02:25:27 +02:00
Author
Owner
Copy link
Copy source

Will have a look at the code to see if I can help out next time as well 💪

Will have a look at the code to see if I can help out next time as well 💪 <!-- github-comment-id:932124069 -->
adam commented 2026-10-05 02:25:27 +02:00
Author
Owner
Copy link
Copy source

@appieschot just tested it in two different projects, should be fixed now. Would you be able to validate it on your end?

@appieschot just tested it in two different projects, should be fixed now. Would you be able to validate it on your end? <!-- github-comment-id:932205176 -->
adam commented 2026-10-05 02:25:28 +02:00
Author
Owner
Copy link
Copy source

After updating the panel won't load anymore, anything else I need to update / check / change?

image

After updating the panel won't load anymore, anything else I need to update / check / change? ![image](https://user-images.githubusercontent.com/15227781/135635167-c0ae98d5-0938-41d2-a3b5-6578261c8391.png) <!-- github-comment-id:932269851 -->
adam commented 2026-10-05 02:25:29 +02:00
Author
Owner
Copy link
Copy source

Seems something went wrong during the build

Seems something went wrong during the build <!-- github-comment-id:932307709 -->
adam commented 2026-10-05 02:25:29 +02:00
Author
Owner
Copy link
Copy source

Ok, found it. Auto-import inserted something in the wrong order. Should be fixed in the next release which is currently publishing.

Ok, found it. Auto-import inserted something in the wrong order. Should be fixed in the next release which is currently publishing. <!-- github-comment-id:932310386 -->
adam commented 2026-10-05 02:25:30 +02:00
Author
Owner
Copy link
Copy source

Released and works again @appieschot 😁

Released and works again @appieschot 😁 <!-- github-comment-id:932317869 -->
adam commented 2026-10-05 02:25:31 +02:00
Author
Owner
Copy link
Copy source

Awesome works great! Can be closed out 🚀

Awesome works great! Can be closed out 🚀 <!-- github-comment-id:932371598 -->
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#100