Urlize markdown element

#1

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"
___

content

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

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

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');

#2

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

My advice, use page bundles.

In the frontmatter:

resources: 
- 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!

#3

Running resources in my post frontmatter below.

resources: 
- 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>
#4

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.

#5

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

20%20PM

#6

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).