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

Enhancement: Referencing fallback images in registerCardImage #489

New Issue
Closed
opened 2026-10-05 02:49:51 +02:00 by adam · 3 comments
adam commented 2026-10-05 02:49:51 +02:00
Owner
Copy link
Copy source

Is your feature request related to a problem? Please describe.

This may just be a documentation request, but I was hoping to set a default card image for posts without an explicit image set. I have been testing the new registerCardImage hooks with the code below, but cannot work out how to locally serve an alternative image from within VSCodium.

import { registerCardImage, enableDevelopmentMode } from "https://cdn.jsdelivr.net/npm/@frontmatter/extensibility/+esm";
enableDevelopmentMode();

/**
 * @param {string} filePath - The path of the file
 * @param {object} data - The metadata of the file
 * @returns {string} - The HTML to be rendered in the card footer
 */
registerCardImage(async (filePath, metadata) => {
    const image = metadata.fmPreviewImage ? metadata.fmPreviewImage : '/path/to/fallback.jpg';
    return `<img src="${image}" alt="${metadata.title}" style="object-fit: cover;" class="h-36" />`;
});

The default images seem to be prefixed with a local / CDN URL which is probably what I need to do here as well.

Describe the solution you'd like

Some documentation or an example of how to reference images from within these hooks.

Describe alternatives you've considered

Possibly just using an inline SVG as a temporary solution.

**Is your feature request related to a problem? Please describe.** This may just be a documentation request, but I was hoping to set a default card image for posts without an explicit image set. I have been testing the new `registerCardImage` hooks with the code below, but cannot work out how to locally serve an alternative image from within VSCodium. ``` import { registerCardImage, enableDevelopmentMode } from "https://cdn.jsdelivr.net/npm/@frontmatter/extensibility/+esm"; enableDevelopmentMode(); /** * @param {string} filePath - The path of the file * @param {object} data - The metadata of the file * @returns {string} - The HTML to be rendered in the card footer */ registerCardImage(async (filePath, metadata) => { const image = metadata.fmPreviewImage ? metadata.fmPreviewImage : '/path/to/fallback.jpg'; return `<img src="${image}" alt="${metadata.title}" style="object-fit: cover;" class="h-36" />`; }); ``` The default images seem to be prefixed with a local / CDN URL which is probably what I need to do here as well. **Describe the solution you'd like** Some documentation or an example of how to reference images from within these hooks. **Describe alternatives you've considered** Possibly just using an inline SVG as a temporary solution. <!-- github-sync-id:1846391522 -->
adam closed this issue 2026-10-05 02:49:52 +02:00
adam commented 2026-10-05 02:49:52 +02:00
Author
Owner
Copy link
Copy source

This is good feedback for the extensibility framework!

I will check if we can add the VS Code URL for the current workspace you're working in.

This is good feedback for the extensibility framework! I will check if we can add the VS Code URL for the current workspace you're working in. <!-- github-comment-id:1674646108 -->
adam commented 2026-10-05 02:49:53 +02:00
Author
Owner
Copy link
Copy source

Hi @scottsweb, I just added a new data property fmWebviewUrl which contains the webview URL of the current project.

You can use it as follows:

import { registerCardImage, enableDevelopmentMode } from "https://cdn.jsdelivr.net/npm/@frontmatter/extensibility/+esm";
enableDevelopmentMode();

/**
 * @param {string} filePath - The path of the file
 * @param {object} data - The metadata of the file
 * @returns {string} - The HTML to be rendered in the card footer
 */
registerCardImage(async (filePath, metadata) => {
    const image = metadata.fmPreviewImage ? metadata.fmPreviewImage : `${metadata.fmWebviewUrl}/relPath/to/fallback.jpg`;
    return `<img src="${image}" alt="${metadata.title}" style="object-fit: cover;" class="h-36" />`;
});

This will be available in the latest beta version of the extension.

Hi @scottsweb, I just added a new data property `fmWebviewUrl` which contains the webview URL of the current project. You can use it as follows: ```typescript import { registerCardImage, enableDevelopmentMode } from "https://cdn.jsdelivr.net/npm/@frontmatter/extensibility/+esm"; enableDevelopmentMode(); /** * @param {string} filePath - The path of the file * @param {object} data - The metadata of the file * @returns {string} - The HTML to be rendered in the card footer */ registerCardImage(async (filePath, metadata) => { const image = metadata.fmPreviewImage ? metadata.fmPreviewImage : `${metadata.fmWebviewUrl}/relPath/to/fallback.jpg`; return `<img src="${image}" alt="${metadata.title}" style="object-fit: cover;" class="h-36" />`; }); ``` This will be available in the latest beta version of the extension. <!-- github-comment-id:1682524023 -->
adam commented 2026-10-05 02:49:54 +02:00
Author
Owner
Copy link
Copy source

@estruyf Thanks so much. I just installed the beta extension and took it all for a test and it's working well!

Really appreciate you looking at this so quickly 🙇

@estruyf Thanks so much. I just installed the beta extension and took it all for a test and it's working well! Really appreciate you looking at this so quickly 🙇 <!-- github-comment-id:1682840136 -->
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#489