Computing path for imageConfig with page bundles

support
1

I am trying to write a shortcode that will accept the name of a Retina-quality (2x) image page resource, and output HTML for the following:

  1. A scaled version of the image for non-Retina displays, and
  2. A non-scaled, full resolution version of the image for Retina displays.

It is necessary to know the image’s size ahead of time to do this. I’d like to use imageConfig to do this, but it’s proving challenging since imageConfig does not accept image resource objects as its argument – it expects paths. How can I obtain the height and width of an image in a Resource?

Here is the solution I’m using today, which kind of works. Given the name of an image resource, it writes the necessary HTML:

{{ $img2x := $.Page.Resources.GetMatch (.Get 0) }}

{{ with (imageConfig (print "content/" $.Page.Dir "/" (.Get 0) ".png" )) }}

  {{ $img1x := $img2x.Resize (print (div .Width 2) "x") }}

  <img srcset="{{ $img1x.RelPermalink }}, {{ $img2x.RelPermalink }} 2x" 
       src="{{ $img2x.RelPermalink }}" 
       width="{{ (div .Width 2) }}"
       alt="{{ $img2x.Title }}"/>

{{ end }}

While it works in my use case, this feels hacky because it makes a lot of assumptions about where the image lives and what its extension is. It also requires the image resource’s name to be the same as its filename, which feels wrong.

Is there a more elegant way to do this? Maybe some way to pass the resource’s Content directly to imageConfig, or a way to expose the resource’s file path?

2

You don’t need that function. You can just do

{{ $img2x := $.Page.Resources.GetMatch (.Get 0) }}
{{ $img2x.Width }} x {{ $img2x.Height }}

P.S. when you’re debugging something like this, you can do the below, and it’ll show you more info on the variable

{{ printf "%#v" $img2x }}
3

Woah, so cool! Thanks much. Did I miss this in the documentation somewhere?

4

Sure thing.

So if you go here and scroll down a bit, you can see where they use .Width and .Height in the example shortcode https://gohugo.io/content-management/image-processing/#image-processing-examples

5

Hah, I missed that because the example was horizontally clipped on my display – I can see it now that I hover. Thanks!