Using variables or functions in page front matter

Currently, front matter looks like this to provide an image to the Casper Two template:

title: "Dream of a life-time"
date: 2018-21-15T19:27:57-08:00
draft: false
author: Lewis
categories: [“thoughts”]
image:   post/dream-of-a-life-time/2018-09-27 09.58.37.jpg

But, I would like to only have to put the name of the image file since “post” and the folder name of the actual post are available during the page gen process.

I can see very little clear advice on how to use variables or functions. There are some syntax inconsistencies in how these are used based on the context where they are used.

A bunch of things DON’T work:

image: {{.URL}}“imagefile.jpg”
image: {{ .URL “imagefile.jpg”}}
image: “{{ .URL “imagefile.jpg”}}”

Similarly, using ref or relref don’t work. It is quite unclear as to whether these are variables, short codes, or functions. So, the syntax for proper usage can’t easily be determined.

Using relref in double braces with or without a preceding dot seems to be an error.

Also, it is not clear when the :placeholders can or cannot be used.

So many similar things behave quite differently.

I’d like not to have to code the full path as it is known to the generator.

Apparently, this can be done in archetypes, but that is another concept to learn. Possibly worth it as posts would no longer need any front matter at all. Can I use an archetype, in effect, as a front matter generator?

Sort of answering my own question and providing a bit more context:

Archetypes work when using hugo new… to generate the .md file to create a new post. Indeed, archetypes ARE templates for .md as clearly documented (and avoiding overloading the word “template”).

I can’t use archetypes. Authors will be using a markdown editor on a phone to create posts. There is no hugo on the phone to generate the instance markdown file for each post.

Looks like I have no choice but to hardcode the path to the image. Too bad.

I’m pretty sure you can get what you want, though I am skeptical of your use case: are folks gonna type “2018-09-27 09.58.37.jpg” on their phones?

Anyhow, the solution to your issue depends on how you are keeping media in the project. I suggest sharing your project code, and then we can figure it out. :slight_smile:

Hey @lewisl, I’m curious … is the intention to use the image as some sort of main/featured page image?

If this is indeed the intention, you could avoid a lot of pain by:

  1. Including the path where you’re likely to keep your images in your theme templates. In fact, this can be done in a way that will adapt to several situations. In doing so, the authors would only have to fill in the name of the image and probably the mime type (with further customization)

  2. Ensuring good naming conventions for the images. Shorter idiomatic naming scheme works best.

This kind of approach combined with archetype, will in time make the authoring process a breeze. It’s something I have done with Jekyll a lot; and I’m convinced that Hugo could be more capable for this sort of thing.

That’s just a test image. other images will have simple names.

This is exactly right.

Plan B is to change the link reference in the template.

Current template references the page image as:

    <a class="post-card-image-link" href="{{ .Permalink }}">
      <div class="post-card-image" style="background-image: url({{ .Params.image  | absURL }})"></div>

The front matter currently must hard code a full path to the image as:

image: post/dream-of-a-life-time/2018-09-27 09.58.37.jpg

I’d like authors just to be able to type the image file name:

image: 2018-09-27 09.58.37.jpg

Then the template needs to be changed to catenate the URL to the post with the file name. But, I can’t figure out the combination of go templating and Hugo variables and functions to get that result. Anything beyond utterly trivial has many layers.

The following clearly isn’t it. Barking up wrong tree?

    <a class="post-card-image-link" href="{{ .Permalink }}">
      <div class="post-card-image" style="background-image: url({{ printf .URL .Params.image  | absURL }})"></div>

So it looks like I need to catenate .Permalink and .Params.image but I don’t know how to use the go templating language to do this (it looks like there is no such operator or function). Or I need to inline the results of each variable reference so that they are part of the html with no intervening space as input to absRel. It’s surprising there is no obvious way to do this. Part of the problem is having to use the pipe to pass the input to the absRel function. If there was another way to pass the argument and the argument could be two parts…

Problem is we need a general purpose language in templating like the various python template engines that allow full inline python. but, go isn’t dynamic and can’ t do that.

Got it–need to use print instead of printf:

 <figure class="post-full-image" style="background-image: url({{  (print .Permalink .Params.image)  | absURL }} )">

Once understood it’s easy enough. Weirdness of templating interspersed in html (all the way back to php…).