How to get all RelPermalink of a resource.Resources?

support
1

Hello,
I try to use multiple background image and switch then dynamically by javaScript.

Currently I use a scratch and range over my resources to get all RelPermalink, it works, but I found it’s not very clean.

I wonder if there is a more simple, or a more speedy method ?

You can see my source code below:
/home/hero/ contain 3 webp images, maybe less or more later.

themes/piko/layouts/index.html

{{ $bgImages := resources.Match "/home/hero/*.webp" }}
{{ $bgImageCurrent := index (shuffle $bgImages) 0 }}

{{ $bgImagesPath := newScratch }}
{{ range $bgImages }}
  {{ $bgImagesPath.Add "RelPermalink" (slice .RelPermalink) }}
{{ end }}

<section id="home_hero" class="hero" style="background-image:var(--hero-linear-gradient),
url('{{ $bgImageCurrent }}');"
data-bgImages='{{ delimit ($bgImagesPath.Get "RelPermalink") ";" }}'
>

rendered as :

<section
  id="home_hero"
  class="hero"
  style="background-image:var(--hero-linear-gradient),url(/home/hero/Gerard-Alexis_fondBlanc.webp)"
  data-bgimages="/home/hero/Alexis-Anthony_fondBlanc.webp;/home/hero/Gerard-Alexis.webp;/home/hero/Gerard-Alexis_fondBlanc.webp"
>
2

Just use a slice instead of a scratch utilizing append to build up the list.

{{ $bgImagesLinks := slice }}
{{ range $bgImages }}
  {{ $bgImagesLinks = $bgImagesLinks | append .RelPermalink}}
{{ end }}

Or use a string variable and add each string using printf or add. In that case initialize the var with the relpermalink of the first resource and then loop over the rest using after. And add ‘;’ link .

{{ $bgImagesLinks := index $bgImages 0 }}
{{ range after 1 $bgImages }}
  {{ $bgImagesLinks = printf "%s;%s" $bgImagesLinks .RelPermalink }}
{{ end }}
# no delimit later cause already a string
# just use $bgImagesLinks

A comment/question on:

First returns an image resource. Shouldn’t it be url('{{ $bgImageCurrent.RelPermalink }}'); in the latter line.

1 Like
3

Thanks for your advice.

It’s interesting to note that printf "%s" $resource cast resource to it’s RelPermalink

I finally use the code below for my site.

{{ $bgImages := shuffle (resources.Match "/home/hero/*.webp") }}
{{ $bgImagesLinks := index $bgImages 0 }}
{{ range after 1 $bgImages }}
  {{ $bgImagesLinks = printf "%s;%s" $bgImagesLinks .RelPermalink }}
{{ end }}

<section id="home_hero" class="hero" style="background-image:var(--hero-linear-gradient),
url('{{ index $bgImages 0 }}');"
data-bgImages='{{ $bgImagesLinks }}'
>
4

There are some default conversions when using an object in a string context.

The docs for print states:

fmt.Print

Prints the default representation of the given arguments using the standard fmt.Print function.

But i could not find details on default representation.

5

There is a side effect with the auto casting of printf, the asset is not published in public directory.
Hugo doc about Asset publishing:

Hugo publishes assets to the publishDir (typically public) when you invoke .Permalink, .RelPermalink, or .Publish. You can use .Content to inline the asset.

So i had .RelPermalink when creating the $bgImagesLinks and it work fine.

full code below:

{{ $bgImages := shuffle (resources.Match "/home/hero/*.webp") }}
{{ $bgImagesLinks := (index $bgImages 0).RelPermalink }}
{{ range after 1 $bgImages }}
  {{ $bgImagesLinks = printf "%s;%s" $bgImagesLinks .RelPermalink }}
{{ end }}

<section class="hero"
  style="background-image:var(--hero-linear-gradient),url('{{ index $bgImages 0 }}');"
  data-bgImages='{{ $bgImagesLinks }}'
>
1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.