Image processing outside of the page resource scope

1

Hi everyone,

I’d like to use the image processing features of Hugo (https://gohugo.io/content-management/image-processing/). From my understanding, this only works on page resources (https://gohugo.io/content-management/page-resources/).

We use some images across many parts of the website. I’d also like to eventually use the data templates that would also include some images.

Is there a way for Hugo to process these assets? For example, if we put the images inside an assets folder. I understand the static folder doesn’t (rightfully) do any processing of it’s contents.

If not, how do others handle this situation? I know there are a few alternative methods for image processing such at Netlify LFS or Cloundiary.

Thanks for your help in advance.

Dave.

2

only one idea to try

  • put the image in /assets
  • define it as resource in page frontmatter
  • use resources.Get or resources.Match to access the file

the Pros here could help more :wink:

3

This is wat I do:

  • Create uploads folder under content (content/uploads)
  • Put all images in their

Then make a shortcode or template function to get the image from the content/uploads folder

Shortcode

{{ with .Get "image"}}
{{ $imageResource := ($.Page.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
  {{ with $imageResource }}
    {{ $src1x := (.Resize "920x") }}
    {{ $src2x := (.Resize "1840x") }}
    <picture class="block">
        <img src="{{ $src1x.RelPermalink }}"  srcset="{{ $src1x.RelPermalink }} 1x, {{ $src2x.RelPermalink }} 2x"  class="block w-full" style="object-fit:cover;" />
    </picture>
  {{ end }}
{{ end }}

In template

{{ with .Params.hero }}
{{ $title := .title }}

{{ with .image }}
{{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
{{ with $imageResource }}
{{ $src1x := (.Fill "680x540 Center") }}
{{ $src2x := (.Fill "1360x1060 Center") }}
<picture class="block w-full max-w-lg xl:max-w-5xl ">
  <img src="{{ $src1x.RelPermalink }}" class="rounded w-full"
    srcset="{{ $src1x.RelPermalink }} 1x, {{ $src2x.RelPermalink }} 2x" style="object-fit: cover;" alt="{{$title}}">
</picture>
{{ end }}
{{ end }}
{{ end }}

Hope this will help you

2 Likes
5

Thanks, frankspin89.

This is a brilliant solution.

6

@frankspin89 's method has it’s benefits (esp. if you also bundle other types of files).

But yes, Hugo can process images either from /content (.Resources) or in /assets (resources.Get or resources.GetMatch, or resources.Match) …

I will add that since you can mount just about any directory or file into /assets or /content using Hugo’s mount config, these images does not have to be located there.

2 Likes
7

Thanks, @bep!

That’s really helpful. In case anyone is interested, here’s what I’ve ended up with:

Shortcode:

{{ $imageAlt := .Get "alt" }}
{{ $imageCaption := .Get "caption" }}
{{ with .Get "src"}}
  {{ $imageResource := resources.Get . }}
  {{ with $imageResource }}
    {{ $src1x := (.Resize "920x") }}
    {{ $src2x := (.Resize "1840x") }}
    <figure>
      <picture>
        <img
          src="{{ $src1x.RelPermalink }}"
          srcset="{{ $src1x.RelPermalink }} 1x, {{ $src2x.RelPermalink }} 2x"
          {{ with $imageAlt }} alt="{{ $imageAlt }}" {{ end }}
        />
      </picture>
      {{ with $imageCaption }}
        <figurecaption>{{ $imageCaption }}</figurecaption>
      {{ end }}
    </figure>
  {{ end }}
{{ end }}

And inside the content I do this:

{{< img src="images/hello.jpg" alt="World" caption="This is a hello, world image." >}}

This will now look in the assets folder for the image.

If anyone sees any improvements in the above, let me know!

Thanks,

Dave.

2 Likes
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.