Img not rendered properly

[papanito]

img are not rendered properly. I have

{{<img src="./bw_enable_ssh_agent.png" caption="Enable SSH Agent">}}

But shows

Any clue why?

[h-enk]

What if you add to assets/scss/common/_custom.scss:

.blur-up {
  filter: blur(5px);
  transition: filter 400ms; }

.blur-up.lazyloaded {
  filter: unset; }

What if you use images with a larger dimension? So, for example 1500x964 (in stead of 750x482).

If it works in development, but not in production, check if the safelist section in config/postcss.config.js contains the image related CSS classes:

module.exports = {
    plugins: [
        purgeCSSPlugin({
            safelist: [
                'img-fluid',
                'blur-up',
                'lazyload',
                'lazyloaded'
            ]
        })
    ]
};

Otherwise, please share your repo?

[papanito]

Ok removed the gif for now so site was built. Still the images show blurred

[h-enk]

Hard to help without seeing the code—can you share the repo?

[papanito]

https://github.com/wyssmann/website/

[h-enk]

Thanks to Claude (it took some thinking time)!

BINGO! That's the problem! The local script-footer.html file is empty, which overrides the one from @thulite/doks-core that would normally load the JavaScript files. This is why no JavaScript is being included, and therefore the lazyload library isn't being initialized to convert the lazyload class to lazyloaded.

So, remove your projects' layouts/_partials/footer/script-footer.html and you're good:

[papanito]

As always many thanks @h-enk I owe you some coffee / sponsoring.