Chaining Image Processing Functions in a Shortcode

support
1

I have a shortcode that successfully takes an image’s filepath and generates an HTML img tag with a couple srcset options and resized images to go with them.

However, sometimes when resizing, Hugo also rotates these images to incorrect rotations (sideways and the like).

On initial research, it may be that I need to explicitly set rotation based on exif data, even if there is none? I’m working off this issue: https://github.com/lovell/sharp/issues/903

So, I’d like to test this, but I’m having a hard time figuring out how to chain functions in a shortcode. I’ve looked at the image processing docs (which this forum won’t let me link to, sorry) and had a paw through Go’s function documentation but haven’t yet figured out what it is I’m missing. Below is the shortcode:

{{ $altText := .Get "alt"}}
{{ $caption := .Get "caption"}}
{{ with $.Page.Resources.GetMatch (.Get "src") }}
{{(.Print )}}
<img
    srcset="
    {{ (.Resize "300x").RelPermalink }} 300w,
    {{ (.Resize "320x").RelPermalink }} 320w,
    {{ (.Resize "600x").RelPermalink }} 600w,
    {{ (.Resize "1200x").RelPermalink }} 2x"
    src="{{ (.Resize "600x").RelPermalink }}" alt="{{$altText}}"/>
{{ else }}
could not find image
{{ end }}

This is available on github as well, please see the “shortcode” folder of the below linked github because I guess I’m limited to two links, apologies. It is the “img.html” shortcode.

And an example of an improperly rotated image is the output of cooldress.jpg in this article: https://github.com/komali2/blog/tree/master/content/posts/taipei-in-2019

I’ve tried .Resize.Rotate, (.Rotate)(.Resize), and a couple other variations, to no avail. Paging through the template documentation, I’m not finding this function invocation syntax - I don’t understand how to invoke multiple functions in a row.

How can I apply two different functions to the same image in a shortcode?

2

While not addressing your main question, do see this recent thread about EXIF image rotation: Image EXIF orientation