Using different imagesizes in different layouts

support
1

The way I am organizing my content is that I upload images into the posts directory (e.g. content/posts/posttitle/ and there are image.jpg and index.md).
The filename is listet as an image:-ressource in the index.md frontmatter and is used by an imgproc-shortcode to generate different sizes to be displayed be single.html and a larger version as a tagget to be linked to. That is all fine and works exactly as I want it to.

What I would like to do, is create three different image sizes, the large sized one to be linked to, a medium sized one to be displayed by single.html, and a small sized one to be displayed by list.html.

Since the shortcode gets used by both single.html and list.html, the figure-tag always contains the same filenames (in this case $medium.RelPermalink and $large.RelPermalink).

I guess what I would like to have, is a way to make the shortcode find out if it is called from single.html or from list.html and use $small.RelPermalink instead if it is from list.html.

Is that even possible? Or would there be a different solution?

frontmatter:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
type: post
draft: true
comments: false
tags:
  - topic
image:
  - picturename
---

{{<imgproc "picturename" "description">}}

shortcode:

{{- $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) -}}
{{- $alt := .Get 1 -}}
{{- .Scratch.Set "tiny" ($original.Fit "250x250") -}}
{{- .Scratch.Set "small" ($original.Fit "500x500") -}}
{{- .Scratch.Set "big" ($original.Fit "1000x1000") -}}
{{- $thumb := .Scratch.Get "tiny" -}}
{{- $small := .Scratch.Get "small" -}}
{{- $big := .Scratch.Get "big" -}}
<figure style="margin-top: 10px; margin-bottom: 10px;">
        <a href="{{ $big.RelPermalink }}" class="gallery" data-featherlight="image"><img style="max-width: 100%; width: auto; height: auto; box-shadow: 5px 5px 5px grey;" src="{{ $small.RelPermalink }}" width="{{ $small.Width }}" height="{{ $small.Height }}" alt="{{ $alt }}" /></a>
        <figcaption style="margin-top: 5px;">{{ $alt }}</figcaption>
</figure>

Since all three files have the same basename, it might be possible with replacing the size-description at the end.

IMG_2341_hu6becb502fac6d0cd34e842c91fc55ffa_2730224_1000x1000_fit_q75_box.jpeg
IMG_2341_hu6becb502fac6d0cd34e842c91fc55ffa_2730224_250x250_fit_q75_box.jpeg
IMG_2341_hu6becb502fac6d0cd34e842c91fc55ffa_2730224_500x500_fit_q75_box.jpeg
IMG_2341.jpeg
2

How are you rendering your list?

3

So, Hugo tries to avoid doing extra work, so the .Content (and shortcodes) currently gets re-rendered if there are language or output format specific variants of any shortcode (or rendering hook) in that file.

So, I think your best option here would be to create 2 output formats for HTML (one for the sections/list, and one for the … others). And then create 2 imgproc shortcodes on the form ìmgproc.outputformatname1.html ìmgproc.outputformatname2.html …

4

What do you exactly mean?
Like typing “hugo” at the command prompt and waiting for it to finish?
I am using the bootstrap theme by razonyang.

5

I see. But that would mean that I need to restrict the normal post / single render to one of the output formats and the list render to the other.

Or can I wrap the shortcode in the md-file in an conditional?

Something like this, even if it is incorrect and nonsense, but you get the gist:

{{if eq rendertype "post" <imgproc1 >}}
{{if eq rendertype "list" <imgproc2 >}}
6

No, Hugo picks the shortcode template for a given output format given a lookup order that uses the suffix of the file.

So you can have two templates with the names imgproc.output1.html and imgproc.output2.html. From the content file you just use the base name.

7

That sounds promising and I would like to try it, but I don’t understand how that works or what I would have to change in my files. Could you please elaborate - if you don’t mind?

8

So I’ve created
hugo/layouts/shortcodes/imgproc.list.html
hugo/layouts/shortcodes/imgproc.single.html

The site still renders without any changes to any other files, but nothing has changed, the images are still medium sized in the list-view.
Maybe I need to add that I’ve change the default list.html from rendering .Summary to rendering .Content.

Do I have to define the lookup order you’ve mentioned?

Edit: Lookup Order doesn’t mention any shortcode-dirs when listing the lookup order.

9

I renamed the shortcode-file containing the code to link to the smallest imagesize imgproc.list.html to imgproc.index.html which resulted in that shortcode being preferred when rendering the main index-page /index.html.

But then also all /posts/posttitle/index.html also got rendered using the shortcode imgproc.index.html and imgproc.single.html didn’t get used at all.

Apparently the lookup order is not based on the layout file being used, but the target filename.

In the case of the main /index.html the layout file is layouts/_default/index.html, but all blogposts that get rendered by layouts/_default/single.html get written as index.html, too.

So no solution yet.