title | description | summary | date | lastmod | draft | menu | weight | toc | seo | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Manual Setup |
2023-11-08 12:26:26 +0100 |
2023-11-08 12:26:26 +0100 |
false |
|
120 |
true |
|
The quickest way to get started with Images is using a Hyas theme with Images already installed. If you want to add Images to an existing Hyas project, this guide will explain how.
To follow this guide, you'll need an existing Hyas project.
Images is a Hyas integration. Add it to your site by running the following command in your project's root directory:
{{< tabs "install-images" >}} {{< tab "npm" >}}
npm install @hyas/images@latest
{{< /tab >}} {{< tab "pnpm" >}}
pnpm install @hyas/images@latest
{{< /tab >}} {{< tab "Yarn" >}}
yarn add @hyas/images@latest
{{< /tab >}} {{< /tabs >}}
This will install the required dependencies.
Add mounts to ./config/_default/module.toml
:
## assets
[[mounts]]
source = "node_modules/@hyas/images/assets"
target = "assets"
[[mounts]]
source = "assets"
target = "assets"
## layouts
[[mounts]]
source = "node_modules/@hyas/images/layouts"
target = "layouts"
[[mounts]]
source = "layouts"
target = "layouts"
Add the following parameters to ./config/_default/params.toml
:
# Images (@hyas/images)
[hyas_images]
[hyas_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 in ./config/_default/hugo.toml
:
[imaging]
anchor = "Center"
bgColor = "#ffffff"
hint = "photo"
quality = 85
resampleFilter = "Lanczos"
Add CSS class selectors to ./assets/scss/components/_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;
}
Add CSS class selectors to safelist
in ./config/postcss.config.js
:
..
safelist: [
'img-fluid',
'lazyloaded',
'blur-up',
],
..
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 theimg
,picture
, orfigure
shortcode. - Add images to your
html
pages by using the theimg
,picture
, orfigure
partial.