Featured image and dictionary values

support
1

Related to this topic, I would like to pass some values in a partial by defining them via dict like below so that they appear inside the <img> tag. How can this be achieved?

{{- range $k, $v := .Pages | first 2 }}
  {{- if not $k }}
  {{- partial "home/featured-image.html" <!-- add `fetchpriority="high" here --> }}
  {{ else }}
  {{- partial "home/featured-image.html" <!-- add `loading="lazy" here --> }}
{{- end }}
2 
{{ partial "home/featured-image.html" (dict 
  "Resources" .Resources
  "LazyLoading" true
  "FetchPriority" "high"
) }}

The home/featured-image.html as below, the context (the dot .) is the data (dict) you pass to it.

<img 
  src="..."
  {{ if .LazyLoading }}loading="lazy"{{ end }}
  {{ with .FetchPriority}}fetchpriority="{{ . }}"{{ end }}
/>

I haven’t tested it, the code snippet may contain typos.

3

I get the error below

execute of template failed at <.FetchPriority>: can’t evaluate field FetchPriority in type *resources.resourceAdapter

I have the image partial (with image processing), which is called inside another partial that is then called in the list page. I am not sure if context is the issue here.

4

I guess you’re accessing those variables in other context, such as within the with statement. You can either assign it to a local var, or use a leading $ to access the outside context, i.e. $.FetchPriority.

{{/* PUT IT AT VERY TOP OF THE PARTIAL */}}
{{- $lazyLoading := default true .LazyLoading }}
{{- $fetchPriority:= default "" .FetchPriority}}

{{- with RESOURCE }}
<img 
  src="..."
  {{ if $lazyLoading }}loading="lazy"{{ end }}
  {{ with $fetchPriority }}fetchpriority="{{ . }}"{{ end }}
/>
{{- end }}
5 
can’t evaluate field LazyLoading in type page.Page  render: failed to render pages: can’t evaluate field LazyLoading in type page.Page

I even removed the second partial and added the code directly in the list template but the rror persists. The image processing is wrapped with with ({{ with or (page resource) (fallback image) }}), so I am not sure if that is affecting the context.

6

Could you please post your codes here? You’ll need to change other places that invoked that partial as well.

7
  1. /partial/featured-image.html
Summary 
{{/* PUT IT AT VERY TOP OF THE PARTIAL */}}
{{- $lazyLoading := default true .LazyLoading }}
{{- $fetchPriority:= default "" .FetchPriority}}

{{ with or (.Resources.GetMatch "cover.*") (resources.Get "image/thumbnail.jpg") }}
  {{/* Create map of images. */}}
  {{ $iMap := dict "original" . }}
  {{/* Set processing options. */}}
  {{ $formats := slice "webp" "jpeg" }} {{/* Last one is fallback. */}}
  {{ $anchor := "TopLeft" }}
  {{ $targetWidth := div $iMap.original.Width 2 }}
  {{ $targetHeight := div $iMap.original.Height 1.45 | int }}
  {{/* Create new images. */}}
  {{ $base := strings.TrimRight (path.Ext $iMap.original.Key) $iMap.original.Key }}
  {{ range $format := $formats }}
    {{ $opts := printf "%dx%d %s %s" $targetWidth $targetHeight . $anchor }}
    {{ with $iMap.original.Fill $opts | fingerprint }}
      {{ $ext := strings.TrimLeft "." (path.Ext .Key) }}
      {{ $targetPath := printf "%s.%d.%s" $base (crypto.FNV32a .Data.Integrity) $ext }}
      {{ with resources.Copy $targetPath . }}
        {{ $iMap = merge $iMap (dict $format . ) }}
      {{ end }}
    {{ end }}
  {{ end }}
  {{/* Render the picture element. */}}
  <picture>
    {{ range $formats }}
      {{ with index $iMap . }}
        <source srcset="{{ .RelPermalink }}" type="{{ .MediaType.Type }}">
      {{ end }}
    {{ end }}
    {{ with index $iMap (index $formats (sub (len $formats) 1)) }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt=""
       {{ if $lazyLoading }}loading="lazy"{{ end }}
      {{ with $fetchPriority }}fetchpriority="{{ . }}"{{ end }}
>
    {{ end }}
  </picture>
{{ end }}
  1. /partial/featured.html
  {{- range $k, $v := site.RegularPages | first 2 }}
        {{- if not $k }}
          {{- partial "home/featured-image.html" (dict "Resources" .Resources "FetchPriority" "high") }}
        {{- else }}
          {{- partial "home/featured-image.html" (dict "Resources" .Resources "LazyLoading" true) }}
        {{- end }}
         <a href="{{ .RelPermalink }}">{{ .Title }}</a>
     {{- end }}
  1. /index.html
{{- partial "featured.html" . }}
  1. list.html
{{- range $k, $v := .Pages | first 2 }}
        {{- if not $k }}
          {{- partial "home/featured-image.html" (dict "Resources" .Resources "FetchPriority" "high") }}
        {{- else }}
          {{- partial "home/featured-image.html" (dict "Resources" .Resources "LazyLoading" true) }}
        {{- end }}
         <a href="{{ .RelPermalink }}">{{ .Title }}</a>
     {{- end }}
8

Build successfully, are there other places invoked the home/featured-image.html?
It most likely that there are some places you forgot to modify, sth like following.
I modified one of those statement as following, produced same error as you posted.

{{ partial "home/featured-image.html" . }}

execute of template failed at <.LazyLoading>: can’t evaluate field LazyLoading in type page.Page
10

I found out one instance I had forgotten about. But this is the code that eventually worked.

{{- if not $k }}
  {{- partial "home/featured-image.html" (dict "Resources" .Resources "FetchPriority" "high" "LazyLoading" false) }}
{{ else }}
  {{- partial "home/featured-image.html" (dict "Resources" .Resources "LazyLoading" true) }}
{{- end }}
``
11

I couldn’t provide any help without seeing the full source code to reproduce the issue, since the code snippet you provided works as expected. But that’s just a context issue, you can double-check your codes, and make sure those files are modified and saved.

13

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