Images

Manual Setup

The quickest way to get started with Images is using a Thulite theme with Images already installed. If you want to add Images to an existing Thulite project, this guide will explain how.

Set up Images

To follow this guide, you’ll need an existing Thulite project.

Add the Images integration

Images is a Thulite integration. Add it 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

This will install the required dependencies.

Configure the integration

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 = "node_modules/@thulite/images/layouts"
  target = "layouts"

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

Add parameters

Add the following parameters to ./config/_default/params.toml:

params.toml
# Images (@thulite/images)
[thulite_images]
  [thulite_images.defaults]
    decoding = "async" # sync, async, or auto (default)
    fetchpriority = "auto" # high, low, or auto (default)
    loading = "lazy" # eager or lazy (default)
    widths = [480, 576, 768, 1025, 1200, 1440] # [640, 768, 1024, 1366, 1600, 1920] for example
    sizes = "auto" # 100vw (default), 75vw, or auto for example
    process = "" # "fill 1600x900" or "fill 2100x900" for example
    lqip = "16x webp q20" # "16x webp q20" or "21x webp q20" for example

Set processing options

Set processing options in ./config/_default/hugo.toml:

hugo.toml
[imaging]
  anchor = "Center"
  bgColor = "#ffffff"
  hint = "photo"
  quality = 85
  resampleFilter = "Lanczos"

Add CSS

Add CSS class selectors to ./assets/scss/components/_images.scss:

_images.scss
img {
  height: auto;
  max-width: 100%;
}

img, picture {
  font-size: 0;
}

img[data-sizes="auto"] {
  display: block;
}

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

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

figcaption {
  font-size: 1rem;
  margin-top: 0.5rem;
  font-style: italic;
}

Update PostCSS settings

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

..
      safelist: [
        'img-fluid',
        'lazyloaded',
        'blur-up',
      ],
..

Add images

Images is now set up and it’s time to add some images!

  • Add images to your .md pages by using Markdown or by using the img, picture, or figure shortcode.
  • Add images to your html pages by using the the img, picture, or figure partial.

Next steps

Edit this page on GitHub
Prev
Getting Started
Next
Resource Locations