How can I use an existing page variable also as cover? #836

brunomiguel · 2022-03-16T02:43:36Z

brunomiguel
Mar 16, 2022

Hello \o

I'm trying to switch my blog's theme to this amazing one but, due to my poor development skills, I'm hitting a roadblock. With the previous theme I was using, I had a featuredImage variable in each blog post, where I inserted the image path. PaperMod, however, uses cover.image.

To avoid changing a ton of files, I did the best I could and was able to force the use of my preexisting variable with the following changes:

{{- with .cxt}} {{/* Apply proper context from dict */}}
{{- if (and .Params.featuredImage (not $.isHidden)) }}
{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }}
<figure class="entry-cover">
    {{- $responsiveImages := (.Params.cover.responsiveImages | default .Site.Params.cover.responsiveImages) | default true }}
    {{- $addLink := (and .Site.Params.cover.linkFullImages (not $.IsHome)) }}
    {{- $cover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.featuredImage)) }}
    {{- if $cover -}}{{/* i.e it is present in page bundle */}}
        {{- if $addLink }}<a href="{{ (path.Join .RelPermalink .Params.featuredImage) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
        {{- $sizes := (slice "360" "480" "720" "1080" "1500") }}
        {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
        {{- if hugo.IsExtended -}}
            {{- $processableFormats = $processableFormats | append "webp" -}}
        {{- end -}}
        {{- $prod := (hugo.IsProduction | or (eq .Site.Params.env "production")) }}
        {{- if (and (in $processableFormats $cover.MediaType.SubType) ($responsiveImages) (eq $prod true)) }}
        <img loading="lazy" srcset="{{- range $size := $sizes -}}
                        {{- if (ge $cover.Width $size) -}}
                        {{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
                        {{ end }}
                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}" 
            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" 
            width="{{ $cover.Width }}" height="{{ $cover.Height }}">
        {{- else }}{{/* Unprocessable image or responsive images disabled */}}
        <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.featuredImage) | absURL }}" alt="{{ $alt }}">
        {{- end }}
    {{- else }}{{/* For absolute urls and external links, no img processing here */}}
        {{- if $addLink }}<a href="{{ (.Params.featuredImage) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
            <img loading="lazy" src="{{ (.Params.featuredImage) | absURL }}" alt="{{ $alt }}">
    {{- end }}
    {{- if $addLink }}</a>{{ end -}}
    {{/*  Display Caption  */}}
    {{- if not $.IsHome }}
        {{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }}
    {{- end }}
</figure>
{{- end }}{{/* End image */}}
{{- end -}}{{/* End context */ -}}

This, however, doesn't allow to use the .cover.image variable, which I intended to use for future blog posts. How can I make the cover.html partial look for one of the two variables and load the one being used in the markdown file? I tried everything I could with conditionals, read Hugo docs, but I can't make it print the one written in the markdown file and it always break it.

Answered by brunomiguel

Mar 17, 2022

After a lot (and I mean a lot) of trial and error, I was able to come up with what it seems to be a more elegant solution

{{- with .cxt}} {{/* Apply proper context from dict */}}
{{- if (and .Params.featuredImage (not $.isHidden)) }}
<figure class="entry-cover">
    {{- $cover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.featuredImage)) }}
    {{- if $cover -}}{{/* i.e it is present in page bundle */}}
        <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.featuredImage) | absURL }}">
    {{- else }}{{/* For absolute urls and external links, no img processing here */}}
            <img loading="lazy" src="{{ (.Params.featuredImage) | absURL }}">
    {{- end …

View full answer

adityatelange · 2022-03-16T18:04:39Z

adityatelange
Mar 16, 2022
Maintainer

Hi @brunomiguel,

A simple solution to above problem is to use github's web editor and replace the string featuredImage with cover.image(or whatever preferred).

https://github.dev/brunomiguel/blog.brunomiguel.net

1 reply

brunomiguel Mar 16, 2022
Author

Thank you for your reply, @adityatelange

I did the inverse to accommodate the variable I used with the previous theme, but my intention is having the theme supporting both, so it can display the cover image in the old posts (with the featuredImage variable) and the cover image for the new posts (with the cover.image variable).

After two handful of tries, I was able to come up with the following, but it seems to have a lot of unneeded code for displaying the featuredImage variable image

{{- with .cxt}} {{/* Apply proper context from dict */}}
{{- if (and .Params.featuredImage (not $.isHidden)) }}
{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }}
<figure class="entry-cover">
    {{- $responsiveImages := (.Params.cover.responsiveImages | default .Site.Params.cover.responsiveImages) | default true }}
    {{- $addLink := (and .Site.Params.cover.linkFullImages (not $.IsHome)) }}
    {{- $cover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.featuredImage)) }}
    {{- if $cover -}}{{/* i.e it is present in page bundle */}}
        {{- if $addLink }}<a href="{{ (path.Join .RelPermalink .Params.featuredImage) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
        {{- $sizes := (slice "360" "480" "720" "1080" "1500") }}
        {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
        {{- if hugo.IsExtended -}}
            {{- $processableFormats = $processableFormats | append "webp" -}}
        {{- end -}}
        {{- $prod := (hugo.IsProduction | or (eq .Site.Params.env "production")) }}
        {{- if (and (in $processableFormats $cover.MediaType.SubType) ($responsiveImages) (eq $prod true)) }}
        <img loading="lazy" srcset="{{- range $size := $sizes -}}
                        {{- if (ge $cover.Width $size) -}}
                        {{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
                        {{ end }}
                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}" 
            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" 
            width="{{ $cover.Width }}" height="{{ $cover.Height }}">
        {{- else }}{{/* Unprocessable image or responsive images disabled */}}
        <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.featuredImage) | absURL }}" alt="{{ $alt }}">
        {{- end }}
    {{- else }}{{/* For absolute urls and external links, no img processing here */}}
        {{- if $addLink }}<a href="{{ (.Params.featuredImage) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
            <img loading="lazy" src="{{ (.Params.featuredImage) | absURL }}" alt="{{ $alt }}">
    {{- end }}
    {{- if $addLink }}</a>{{ end -}}
    {{/*  Display Caption  */}}
    {{- if not $.IsHome }}
        {{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }}
    {{- end }}
</figure>
{{/*- end */}}{{/* End image */}}

{{- else }}

{{/* Begin cover.image variable support */}}
{{- if (and .Params.cover.image (not $.isHidden)) }}
{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }}
<figure class="entry-cover">
    {{- $responsiveImages := (.Params.cover.responsiveImages | default .Site.Params.cover.responsiveImages) | default true }}
    {{- $addLink := (and .Site.Params.cover.linkFullImages (not $.IsHome)) }}
    {{- $cover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
    {{- if $cover -}}{{/* i.e it is present in page bundle */}}
        {{- if $addLink }}<a href="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
        {{- $sizes := (slice "360" "480" "720" "1080" "1500") }}
        {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
        {{- if hugo.IsExtended -}}
            {{- $processableFormats = $processableFormats | append "webp" -}}
        {{- end -}}
        {{- $prod := (hugo.IsProduction | or (eq .Site.Params.env "production")) }}
        {{- if (and (in $processableFormats $cover.MediaType.SubType) ($responsiveImages) (eq $prod true)) }}
        <img loading="lazy" srcset="{{- range $size := $sizes -}}
                        {{- if (ge $cover.Width $size) -}}
                        {{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
                        {{ end }}
                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}" 
            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" 
            width="{{ $cover.Width }}" height="{{ $cover.Height }}">
        {{- else }}{{/* Unprocessable image or responsive images disabled */}}
        <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}">
        {{- end }}
    {{- else }}{{/* For absolute urls and external links, no img processing here */}}
        {{- if $addLink }}<a href="{{ (.Params.cover.image) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
            <img loading="lazy" src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
    {{- end }}
    {{- if $addLink }}</a>{{ end -}}
    {{/*  Display Caption  */}}
    {{- if not $.IsHome }}
        {{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }}
    {{- end }}
</figure>
{{- end }}{{/* End image */}}
{{- end }}
{{/* End cover.image variable support */}}

{{- end -}}{{/* End context */ -}}

brunomiguel · 2022-03-17T18:16:32Z

brunomiguel
Mar 17, 2022
Author

After a lot (and I mean a lot) of trial and error, I was able to come up with what it seems to be a more elegant solution

{{- with .cxt}} {{/* Apply proper context from dict */}}
{{- if (and .Params.featuredImage (not $.isHidden)) }}
<figure class="entry-cover">
    {{- $cover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.featuredImage)) }}
    {{- if $cover -}}{{/* i.e it is present in page bundle */}}
        <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.featuredImage) | absURL }}">
    {{- else }}{{/* For absolute urls and external links, no img processing here */}}
            <img loading="lazy" src="{{ (.Params.featuredImage) | absURL }}">
    {{- end }}
</figure>
{{/*- end */}}{{/* End image */}}

{{- else }}

{{/* Begin cover.image variable support */}}
{{- if (and .Params.cover.image (not $.isHidden)) }}
{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }}
<figure class="entry-cover">
    {{- $responsiveImages := (.Params.cover.responsiveImages | default .Site.Params.cover.responsiveImages) | default true }}
    {{- $addLink := (and .Site.Params.cover.linkFullImages (not $.IsHome)) }}
    {{- $cover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
    {{- if $cover -}}{{/* i.e it is present in page bundle */}}
        {{- if $addLink }}<a href="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
        {{- $sizes := (slice "360" "480" "720" "1080" "1500") }}
        {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
        {{- if hugo.IsExtended -}}
            {{- $processableFormats = $processableFormats | append "webp" -}}
        {{- end -}}
        {{- $prod := (hugo.IsProduction | or (eq .Site.Params.env "production")) }}
        {{- if (and (in $processableFormats $cover.MediaType.SubType) ($responsiveImages) (eq $prod true)) }}
        <img loading="lazy" srcset="{{- range $size := $sizes -}}
                        {{- if (ge $cover.Width $size) -}}
                        {{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
                        {{ end }}
                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}" 
            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" 
            width="{{ $cover.Width }}" height="{{ $cover.Height }}">
        {{- else }}{{/* Unprocessable image or responsive images disabled */}}
        <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}">
        {{- end }}
    {{- else }}{{/* For absolute urls and external links, no img processing here */}}
        {{- if $addLink }}<a href="{{ (.Params.cover.image) | absURL }}" target="_blank"
            rel="noopener noreferrer">{{ end -}}
            <img loading="lazy" src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
    {{- end }}
    {{- if $addLink }}</a>{{ end -}}
    {{/*  Display Caption  */}}
    {{- if not $.IsHome }}
        {{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }}
    {{- end }}
</figure>
{{- end }}{{/* End image */}}
{{- end }}
{{/* End cover.image variable support */}}

{{- end -}}{{/* End context */ -}}

1 reply

brunomiguel Mar 17, 2022
Author

It feels there might be room for improvement, but for now it works better and I happy with it.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How can I use an existing page variable also as cover? #836

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How can I use an existing page variable also as cover? #836

Uh oh!

brunomiguel Mar 16, 2022

Replies: 2 comments · 2 replies

Uh oh!

adityatelange Mar 16, 2022 Maintainer

Uh oh!

brunomiguel Mar 16, 2022 Author

Uh oh!

brunomiguel Mar 17, 2022 Author

Uh oh!

brunomiguel Mar 17, 2022 Author

brunomiguel
Mar 16, 2022

Replies: 2 comments 2 replies

adityatelange
Mar 16, 2022
Maintainer

brunomiguel Mar 16, 2022
Author

brunomiguel
Mar 17, 2022
Author

brunomiguel Mar 17, 2022
Author