Urlize markdown element

Trying to print a markdown poster image as the background image of a cell in the list view of my site.

/content/post/post1.md has something like

title: "lol"
poster: "/imageiwanttoshow.jpg"


My view is quickstart/layouts/partials/post-list.html with

<a href="{{ .Permalink }}" itemprop="url" {{ with .Params.Poster }}style="background-image: src('{{ . | urlize }}');"{{ end }}>

I see the url in my source but am unable to urlize it properly. What is wrong with my syntax?

How the URL looks: background-image: src('https\2f\2fs3.us-east-2.amazonaws.com\2f bancroftshow\2fseason-1\2f episode-1\2fposter.jpg');

Your poster is a string, and urlize can’t do much with it.

My advice, use page bundles.

In the frontmatter:

- src: IMG_0064.JPG
  name: "header"

And in your template, something like this:

<div id="large-background" style="background: linear-gradient(360deg, rgba(244,244,244,1) 0%, rgba(244,244,244, 0) 50%), url('{{ with .Resources.GetMatch "header" }}{{ .RelPermalink }}{{else}}{{ .Site.BaseURL }}images/fractal_thumb.jpg{{end}}') 100% no-repeat / cover;"></div>

The added bonus is you can also run resize operations on the image. Hope this helps!

Running resources in my post frontmatter below.

- src: /images/season-1/episode-1/poster.jpg
  name: "header"

then running this now in my post lists but still won’t print anything.

<div class="p-wrap" style="background-image: url('{{ with .Resources.GetMatch "header"}}{{ .RelPermalink }}{{end}}');"></div>

I think the src needs to be relative, but I’m not sure. At least it’s relative in the documentation but does not state it implicitly.

It should still print out a broken path vs nothing I would assume?


I also don’t know what’s going on here; couldn’t make it work with any Hugo function (urlize, urls.Parse, safeURL, printf, and so on).

Neither do I know what the output means. If URLs are encoded incorrectly, we’d see %2f instead of \2f. So it looks like some form of percent encoding, but without the percent.

Unfortunately we don’t have Hugo functions that perform URL encoding/decoding (urlize has a more limited use than that).