• Georg Makowski
  • 0:02 am

Resources in Data Files

The theme offers a new possibility to store local parameters for resources. Data files allow to associate local meta-data with global or remote resources.

Hugo offers to process arbitrary meta-data parameters associated with page resources. We can add a parameter list to local resources in the frontmatter of page bundles under params:

resources:
  - src: hebert-kostan-y6UEUCq2RHw-unsplash.jpg
    name: tiger
    params: 
      caption: Local image resource
      width: small
      posh: left
global tiger
Image file from assets(Hebert Kostan/Unsplash)

Depending on the content structure of your project, you may want to store some resources in the global assets folder or on a remote server. Hugo also can retrieve these resources, but there is (currently) no native mechanism to associate them with meta-data parameters.

And this is where this module comes in handy. The tiger here is stored in the assets folder and gets referenced in a local data file. This way, we can re-use global assets repeatedly and store meta-data in a local file like global.yaml:

src: img/tiger/hebert-kostan-y6UEUCq2RHw-unsplash.jpg
caption: Image file from assets
width: small
posh: left
Remote image
Random image

The extra parameter keys are the same as the ones above. There is no new name for the resource, we use the data file inside the usual Markdown image syntax like ![global tiger](global.yaml).

We can also use TOML or JSON files, enter a remote URL as source, and call every image service with an HTTP API. The second image here is generated with this data file for example:

{
    "src": "https://picsum.photos/300/300",
    "caption": "Random image",
    "posh": "right",
    "width": "tiny"
}

The module is available on GitHub.

See Also