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

[estruyf]

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

[estruyf]

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
}

[estruyf]

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

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?

[estruyf]

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

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

[appieschot]

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

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

[estruyf]

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

[appieschot]

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.

[estruyf]

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

[appieschot]

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

[estruyf]

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

[appieschot]

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

[estruyf]

Seems something went wrong during the build