Images do not scale after hugo build

[mdehollander]

I exploring the hyas project and I am using the hyas-images to create responsive and optimized images. They do scale well in development mode running npn run dev, but not after npm run build and npm run preview

How to reproduce

• npm create hyas@latest
• choose bootstrap
• add to layouts/index.html:

  
  <div class="container text-center">
  <div class="row">
  <div class="col">
    {{ partial "lazyimg" "images/alps.jpg" }}
  </div>
  <div class="col">
    {{ partial "lazyimg" "images/alps.jpg" }}
  </div>
  <div class="col">
    {{ partial "lazyimg" "images/alps.jpg" }}
  </div>
  </div>
  </div>

## What I expect
Also after `npm run build` scaling images that respect the container size, like with `npm run dev':

![image](https://user-images.githubusercontent.com/262872/208514314-1a0fa146-3ab7-47b2-8e8a-b45bc38d93bd.png)

Which loads http://localhost:1313/alps-620x.webp

## What do I get
When running `npm run build` and `npm run preview` the images are not scaling anymore:

![image](https://user-images.githubusercontent.com/262872/208514534-9167da4d-14b5-4ada-a97e-7353eb5cdfbf.png)

And a much larger images is loaded that does not fit in the container: http://127.0.0.1:8080/alps-1366x.webp

[h-enk]

Confirmed. Thanks for reporting this!

The render options in config/_default/params.toml:

  # Renderer options:
  class = "img-fluid"

are/can not processed by PostCSS.

So, we'll have to add:

        'img-fluid',

to the safelist of config/postcss.config.js for the templates with @hyas/images.

See also: https://github.com/gethyas/create-hyas/issues/4

[h-enk]

This repo will also need to be updated (for manual installation):

• Add example config/postcss.config.js
• Update README

[mdehollander]

Thanks for the quick reply. Adding img-fluid to config/postcss.config.js in my installation fixed it. Super!

[h-enk]

Closing...