Lazyloading + Image processing using partials instead of shortcode

support
1

Hi! I’ve found this incredible article here for image optimization and lazyloading:

Now my issue is that most of my sites are marketing sites where the images are in the layout itself. I would love to be able to do what this does but with partials instead. How can I have a partial that receives an src value just like I would with a shortcode?

2

Your question isn’t entirely clear to me, but…

Example 1: Pass String “bar” to Partial

{{ partial foo.html "bar" }}

Within the partial, access the passed string with . (dot).

Example 2: Pass Current Context and String “bar” to Partial

{{ partial foo.html (dict "ctx" . "my_variable" "bar"  }}

Within the partial, access the passed context with .ctx, and access the passed string with .my_variable.

See https://gohugo.io/templates/partials/#variable-scoping.

You might also consider using an image render hook.

3

I’ll try to be clearer. In that case of the shortcode this guy use, he only has to add this:

{{<post-image image="hero-image.png" />}}

in order for the shortcode to be activated and generating a lazyloaded image that is optimized via srcset. The issue is that we can’t use shortcodes in layout.

I’m trying to get the same result, but by using partial. I would like the variable that I’m passing be the src attribute of <img>

4

See my previous response. Example 1 or 2.