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

Question: Post image from Hugo page resources #233

New Issue
Closed
opened 2026-10-05 02:35:12 +02:00 by adam · 5 comments
adam commented 2026-10-05 02:35:12 +02:00
Owner
Copy link
Copy source

I am using Frontmatter in connection with Hugo and wonder if it's possible to somehow use images as article image on the dashboard when they are defined in the resources section of the frontmatter.

frontmatter sample

---
...
resources:
  - title: "caption"
    id: "id1"
    src: "header.jpg"
  - title: "caption2"
    id: "id2"
    src: "header2.jpg"
---

I would expect the solution to show the image of the first resource (header.jpg). This can of course be "hacked" by adding an additional frontmatter item with the header image, but that would not be used in the theme at all and only for Frontmatter to look nice.

Page Resources is a fairly integral piece of Hugos page bundle system. This would have to check if the first item is an actual image though, because other media types could take that place.

I am using Frontmatter in connection with [Hugo](https://gohugo.io) and wonder if it's possible to somehow use images as article image on the dashboard when they are defined in the `resources` section of the frontmatter. **frontmatter sample** ```yaml --- ... resources: - title: "caption" id: "id1" src: "header.jpg" - title: "caption2" id: "id2" src: "header2.jpg" --- ``` I would expect the solution to show the image of the first resource (`header.jpg`). This can of course be "hacked" by adding an additional frontmatter item with the header image, but that would not be used in the theme at all and only for Frontmatter to look nice. [Page Resources](https://gohugo.io/content-management/page-resources/#readout) is a fairly integral piece of Hugos page bundle system. This would have to check if the first item is an actual image though, because other media types could take that place. <!-- github-sync-id:1174573277 -->
adam closed this issue 2026-10-05 02:35:12 +02:00
adam commented 2026-10-05 02:35:13 +02:00
Author
Owner
Copy link
Copy source

Hi @davidsneighbour did you define a block field for the resources metadata?

By default FM does not show or use resources, as you need to tell it what to render/use. That said, the block field allows you to re-use predefined fields to create list data. This would allow you to create the appropriate data for your theme.

Hi @davidsneighbour did you define a block field for the resources metadata? By default FM does not show or use resources, as you need to tell it what to render/use. That said, the block field allows you to re-use predefined fields to create list data. This would allow you to create the appropriate data for your theme. <!-- github-comment-id:1073294436 -->
adam commented 2026-10-05 02:35:14 +02:00
Author
Owner
Copy link
Copy source

I tried that but am still not able to get to what I want. The block field works nicely, but what I want to achieve is, that the article image, which is defined in the block is shown on the dashboard, not the website. Currently it shows the markdown symbol:

20220327-18:22:34-Selection-001

I will go through the field docs again and see what I misunderstand. Basically, isPreviewImage for my block would be nice ;)

The config in question is here.

I'll add to this issue when I am further.

I tried that but am still not able to get to what I want. The block field works nicely, but what I want to achieve is, that the article image, which is defined in the block is shown on the dashboard, not the website. Currently it shows the markdown symbol: ![20220327-18:22:34-Selection-001](https://user-images.githubusercontent.com/83281/160279164-bf9a7a5b-1040-4cb6-8d53-71cd526c33e5.png) I will go through the field docs again and see what I misunderstand. Basically, [`isPreviewImage`](https://frontmatter.codes/docs/content-creation/fields#image) for my block would be nice ;) The config in question is [here](https://github.com/davidsneighbour/kollitsch.de/blob/feat/frontmatter/frontmatter.json#L141). I'll add to this issue when I am further. <!-- github-comment-id:1079910415 -->
adam commented 2026-10-05 02:35:14 +02:00
Author
Owner
Copy link
Copy source

The preview image for block fields is not yet supported, but I'll push a new update in a couple of minutes to have this supported as well.

In your case, what you have to do is update the resources field group as follows:

{
  "id": "resources",
  "labelField": "src",
  "fields": [
    {
      "title": "Path/Filename",
      "name": "src",
      "type": "image",
      "isPreviewImage": true
    },
    {
      "title": "Title",
      "name": "title",
      "type": "string",
      "single": true
    },
    {
      "title": "Name (Identifier)",
      "name": "name",
      "type": "string",
      "single": true
    }
  ]
}

Changed the src field to type image and set it as the preview image.

The preview image for block fields is not yet supported, but I'll push a new update in a couple of minutes to have this supported as well. In your case, what you have to do is update the `resources` field group as follows: ```json { "id": "resources", "labelField": "src", "fields": [ { "title": "Path/Filename", "name": "src", "type": "image", "isPreviewImage": true }, { "title": "Title", "name": "title", "type": "string", "single": true }, { "title": "Name (Identifier)", "name": "name", "type": "string", "single": true } ] } ``` > Changed the `src` field to type image and set it as the preview image. <!-- github-comment-id:1080817484 -->
adam commented 2026-10-05 02:35:15 +02:00
Author
Owner
Copy link
Copy source

New beta version is available with this enhancement.

New beta version is available with this enhancement. <!-- github-comment-id:1080823902 -->
adam commented 2026-10-05 02:35:16 +02:00
Author
Owner
Copy link
Copy source

Perfectly working :) Thank you!

Perfectly working :) Thank you! <!-- github-comment-id:1086781490 -->
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#233