Question: Post image from Hugo page resources

[davidsneighbour]

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.

[estruyf]

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.

[davidsneighbour]

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:

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.

[estruyf]

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.

[estruyf]

New beta version is available with this enhancement.

[davidsneighbour]

Perfectly working :) Thank you!