Thulite Images

Installation

This guide shows how to add Thulite Images to your Thulite project.

Already installed?

If your Thulite template already includes the recommended integrations (SEO and Images), skip installation and continue to Configuration.

Add Thulite Images

Add Thulite Images to your site by running the following command in your project’s root directory:

npm install @thulite/images@latest
pnpm install @thulite/images@latest
yarn add @thulite/images@latest
bun install @thulite/images@latest

This installs the required package.

Update mounts

Add mounts to ./config/_default/module.toml:

module.toml
## assets
[[mounts]]
  source = "node_modules/@thulite/images/assets"
  target = "assets"

[[mounts]]
  source = "assets"
  target = "assets"

## layouts
[[mounts]]
  source = "layouts"
  target = "layouts"

[[mounts]]
  source = "node_modules/@thulite/images/layouts"
  target = "layouts"

Update PostCSS configuration

Add the following CSS class selectors to the safelist array in ./config/postcss.config.js:

postcss.config.js
const purgecss = purgeCSSPlugin({
  content: ['./hugo_stats.json'],
  defaultExtractor: (content) => {
    const els = JSON.parse(content).htmlElements;
    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])];
  },
  dynamicAttributes: [],
  safelist: [
    'img-fluid',
    'blur-up',
    'lazyload',
    'lazyloaded',
  ]
});

Configure Thulite Images

Configure Thulite Images

Update settings and parameters.

Last updated on April 16, 2026
Edit this page on GitHub
Prev
Getting Started
Next
Configuration