Enhancement: Referencing fallback images in registerCardImage

[scottsweb]

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.

[estruyf]

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.

[estruyf]

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.

[scottsweb]

@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 🙇