How to change figure shortcode to use page resources?

support
1

I tried to follow the advice of @jmooring and alter the builtin figure short code to use page resources. I changed it to:

{{ $img := $.Page.Resources.GetMatch (.Get "src")}}
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}> img: {{ $img }} type: {{ $img.ResourceType }}
    {{- if .Get "link" -}}
        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end }}
<!--    <img src="{{ .Get "src" }}"-->
    <img src="{{ $img.relPermalink }}"
         {{- if or (.Get "alt") (.Get "caption") }}
[...]

and my content markdown file contains

---
Title: "Lorem ipsum"
resources:
- name: foo
  src: bar.jpg
---
# Dolor est
{{<figure src="foo" >}}
[...]

An image bar.jpg lays next to the markdown file.

Unfortunately that doesn’t work and I receive a Hugo Server: Error:

execute of template failed: template: shortcodes/figure.html:7:21: executing "shortcodes/figure.html" at <$img.relPermalink>: can't evaluate field relPermalink in type resource.Resource

If I enter {{ $img.ResourceType }} in the figure shortcode template, the printed result is image, so it seems to me, that the resource type is ok.
What did I do wrong? How does it work? Thx in advance!

2

Check your capitalization: use .RelPermalink. I did not test the rest of your code, so you may have other problems.

2 Likes
3

wow, thanks for your super fast reply! Correcting the capitalization solved the problem. :slight_smile:

4

I fear I need some additional advice. :confused: Trying to make use of additional page resource attributes I fail again. :frowning:
I did set a title in my front matter:

- name: foo
  src: bar.jpg
  title: Lorem ipsum
  params:
    caption: dolor est
[...]

Now I want to use it in my shortcode:

[...]
    {{- if .Get "link" }}</a>{{ end -}}
<!--    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}-->
    {{- if or (or ($img.Title) (.Get "caption")) (.Get "attr") -}}
        <figcaption>
<!--            {{ with (.Get "title") -}}-->
            {{ with ($img.Title) -}}
                <h4>{{ . }}</h4>
            {{- end -}}
[...]

This again results in an error: unexpected EOF So probably I didn’t understand the syntax of the with clause correctly?
I later want to make use of the value dolor est by its key caption as well. I’m not sure where to look up the needed method. Probably there exists something like $img.Params "caption"?

5

Please show all of your front matter for the page.

6

I did some forth and back, now the error disappeared, but the title is still not shown.

Here you go:

---
Title: "Lorem ipsum dolor est"
Date: "2021-02-20T18:05:19+01:00"
resources:
- name: foo
  src: bar.jpg
  title: Lorem ipsum
  params:
    caption: dolor est
---

Thanks for your help!

Edit: the figure template:

{{ $img := $.Page.Resources.GetMatch (.Get "src")}}
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    {{- if .Get "link" -}}
        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end }}
<!--    <img src="{{ .Get "src" }}"-->
    <img src="{{ $img.RelPermalink }}"
         {{- if or (.Get "alt") (.Get "caption") }}
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
         {{- end -}}
         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    /> <!-- Closing img tag -->
    {{- if .Get "link" }}</a>{{ end -}}
<!--    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}-->
    {{- if or (or ($img.Title) (.Get "caption")) (.Get "attr") -}}
        <figcaption>
<!--            {{ with (.Get "title") -}}-->
            {{ with ($img.Title) -}}
                <h4>{{ . }}</h4>
            {{- end -}}
            {{- if or (.Get "caption") (.Get "attr") -}}<p>
                {{- .Get "caption" | markdownify -}}
                {{- with .Get "attrlink" }}
                    <a href="{{ . }}">
                {{- end -}}
                {{- .Get "attr" | markdownify -}}
                {{- if .Get "attrlink" }}</a>{{ end }}</p>
            {{- end }}
        </figcaption>
    {{- end }}
</figure>
7

What does this code produce?

{{ with .Title }}
  <!-- {{ with "foo" }} -->
  {{ . }}
  <!-- {{ end }} -->
{{ end }}

The answer: foo.

This code:

{{ with .Title }}
  {{/* {{ with "foo" }} */}}
  {{ . }}
  {{/* {{ end }} */}}
{{ end }}

will display the value of .Title.

Please clean up your comments, test, and post again if you continue to have problems.

See https://gohugo.io/templates/introduction/#comments

Do not try to comment out Go Template code using HTML comments.

1 Like
8

thx, works flawless now. :slight_smile:

(Hopefully) last thing missing: How can I get values of Params by its key? I did find https://github.com/gohugoio/hugo/blob/master/resources/resource/resourcetypes.go#L109 and I’m a little confused that no parameter is mentioned for the function Params(). Using $img.Params "caption" leads to the consistent error message wrong number of args for Params: want 0 got 1 but leaves me wondering how to access the value/how to use the key.

9

to answer my own question: Looking at https://github.com/gohugoio/hugo/blob/fa432b17b349ed7e914af3625187e2c1dc2e243b/common/maps/params.go#L23 I tried $img.Params.Get "caption" which seems to work as intended. So I believe now I’m good to go. :slight_smile:

10

Excellent. One more thing. If you intend to display the image at its actual size, you don’t need to pass the dimensions when calling the shortcode. Once you have the image resource, the values are available as properties.

$img.Width
$img.Height
1 Like
11

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