Referencing the same file from two different page resources

[pollux]

Is it possible to define a page resource, but which points to a file that is already referenced by another resource of the same page?

I have several image resources (image_*) on each page, and usually a separate file for header image resource (header_image). Sometimes however I want to use an existing resource as the header image. I already tried the following:

resources:
- name: header_image
  params:
    alt: "Alternate text."
  src: image-1.webp
- name: image_1
  params:
    alt: "Alternate text."
  src: image-1.webp
- name: image_2
  params:
    alt: "Alternate text."
  src: image-2.webp

But Hugo only displays the first reference to image-1.webp, which in this case is the header_image and if the resources order is reversed, it will only display image_1. So, if two resources referencing (via src) the same file are accessed, only one that is declared as first seems to be available.

I’m accessing resources in various parts of my theme with GetMatch and Match statements. For example:

{{ with .Resources.GetMatch "header_image" }}
	<section class="page-heading heading-portfolio" style="background-image: url({{ .RelPermalink }}); background-position: {{ $headerpos }}; background-size: cover;">
{{- end }}

And:

{{ $image_count := .Resources.Match "image_*" | len }}
{{ range .Resources.Match "image_*" }}
    <a href="{{ .RelPermalink }}">
        {{ if gt $image_count 1 }}
            {{ with .Resize "640x" }}
                <img src="{{ .RelPermalink }}" width="{{ .Width }} height="{{ .Height }} alt="{{ .Params.alt }}">
            {{ end }}
        {{ else }}
            {{ with .Resize "1280x" }}
                <img src="{{ .RelPermalink }}" width="{{ .Width }} height="{{ .Height }} alt="{{ .Params.alt }}">
            {{ end }}
        {{ end }}
    </a>
{{ end }}

I’m aware of “the order matters” rule mentioned in the docs, but I’m not sure if it might be the culprit of my problem.

Could someone please shed some light on this matter?

[jmooring]

You cannot have two resources with the same path.

Consider refactoring, adding a header boolean to the resource params as needed.

resources:
  - name: image_1
    src: image-1.webp
    params:
      alt: Alternate text.
      header: true
  - name: image_2
    src: image-2.webp
    params:
      alt: Alternate text.

To render the header image:

{{ with where .Resources "Params.header" true }}
  {{ with index . 0 }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Params.alt }}">
  {{ end }}
{{ end }}

[pollux]

Thanks. I tried to implement changes that you suggested:

resources:
- name: image_1
  src: image-1.jpg
  params:
    alt: Alternate text.
    header: true

{{ with where .Resources. "Params.header" true }}
	{{ with index . 0 }}
		{{ with .Resize "640x" }}
			<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
		{{ end }}
	{{ end }}
{{ end }}

But now I’m getting an error:

parse failed unexpected <.> in operand 

That’s in the line with:

{{ with where .Resources. "Params.header" true }}

So far I’ve only added header: true to one page, so perhaps Hugo errors out while processing some other page that doesn’t have a header: true parameter yet. Is this possible? Should I continue on with refactoring other pages in hope that the error will disappear? That’s a good number of pages, so I thought asking first wouldn’t hurt.

[jmooring]

Change:

{{ with where .Resources. "Params.header" true }}

to:

{{ with where .Resources "Params.header" true }}

[pollux]

Oh my God. I guess it’s time for me to buy myself some optical glasses. I swear I didn’t notice that trailing dot.

Now it works beautifully. Thanks again.