Images Images

Images

Images is the official images integration for the Thulite framework.

Features

  • Render hook for Markdown images.
  • Shortcodes for picture, img, and figure elements.
  • Partials for picture, img, and figure elements.
  • Store your images as a page resource, global resource, or remote resource.
  • Set defaults for loading, decoding, fetchpriority, and more.
  • Override defaults locally.
  • Automatic sizes attribute calculation.
  • Show your images with a blurred-up LQIP.

Sensible defaults

Images comes with sensible defaults, but you can customize them in your params.toml file.

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

Configurable

Images is highly configurable. You can set defaults for all images, override them locally, and even use the process parameter to manipulate your images.

Full documentation

Step-by-step instructions to get started with Images can be found in the documentation.


← Back to projects