hugohugo-content-organization

Hugo: Imaging parameter does not apply to page bundles?


I successfully created my website with Hugo, but the images in my posts are way too large (1.3Mb).

I have seen that there is a [imaging] parameter to reduce the quality, so I modified my hugo.toml config file to the following

baseURL = 'http://my_beautiful_site/'
languageCode = 'en-en'
title = 'My Beautiful Site'
theme = 'papermod'

[imaging]
bgColor = '#ffffff'
hint = 'photo'
quality = 1
resampleFilter = 'Box'

However, it does not change the image quality when I build the website, it just copies the initial image in the public folder.

Here are the logs when executing Hugo :

> rm -rf public/
> hugo --gc
....
> hugo
Start building sites … 
hugo v0.134.3-..  BuildDate=2024-09-19T14:28:20Z VendorInfo=snap:0.134.3

WARN  deprecated: .Site.Social was deprecated in Hugo v0.124.0 and will be removed in a future release. Use .Site.Params instead.

                   | EN  
-------------------+-----
  Pages            | 12  
  Paginator pages  |  0  
  Non-page files   |  3  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  2  
  Cleaned          |  0  

Total in 82 ms

My images are considered as Non-page files and there are no Processed images.

My images are in a page bundle, as illustrated from this example from Hugo website :

content/
├── my-post/
│   ├── index.md
│   └── my-image.jpg

Do you know where it might come from ? Do you know if [imaging] parameters apply to page bundle images ?

Thank you in advance for you help,

Hugo


Solution

  • After a bit of research, it seems that the [imaging] parameter does not apply to images in page bundle.

    However, using image processing features as suggested by @bogdanoff worked nicely.

    To do so, I modified the default render hook for images like so

    File layouts/_default/_markup/render-image.html

    {{ $original := .Destination }}
    {{ $resource := .Page.Resources.GetMatch $original }}
    
    {{ if $resource }}
      {{ $optimized := $resource.Resize "800x webp q75" }}
      <img src="{{ $optimized.RelPermalink }}" alt="{{ .Text }}">
    {{ else }}
      <img src="{{ $original }}" alt="{{ .Text }}">
    {{ end }}
    

    This allow to automatically resize the images that come from page bundles, and to display other images (urls, /static) without resizing.