This guide shows how to add Thulite Images to your Thulite project.
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:
This installs the required package.
Update mounts
Add mounts to ./config/_default/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:
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.