Images
Add a local or a remote image with Markdown, or use the image partial in a template. Images are lazyloaded, blurred up, and responsive.
Hyas now uses
@hyas/images
. This page will be updated soon!See also the Markdown Guide: Images
Processing
- Render hook:
./layouts/_default/_markup/render-image.html
. - Image partial:
./layouts/partials/content/image.html
. - An
<img>
element is generated for small images, a<figure>
element for large images.
Settings
Set smallLimit
, defaultImage
, and fillImage
in ./config/_default/params.toml
:
smallLimit = "320"
### Image partial
defaultImage = "default-image.png" # put in `./assets/images/`
fillImage = "1280x720 Center" # normalize image size
See also: Images
Shortcode
Image in page bundle
{{< figure link="https://www.jit.io/" src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" >}}

Add a local image
Place your local images in a page bundle:
..
├── blog/
│ ├── say-hello-to-doks/
│ │ ├── index.md
│ │ └── say-hello-to-doks.png
│ └── _index.md
└── _index.md
See also the Hugo docs: Page Bundles
Example

Will be processed into:
Add a remote image
Example

Will be processed into:
Use the image partial
Example
Add {{ partial "content/image.html" . }}
to ./layouts/blog/single.html
:
{{ define "main" }}
<div class="row justify-content-center">
<div class="col-lg-7">
<article>
<h1>{{ .Title }}</h1>
{{ partial "content/image.html" . }}
{{ .Content }}
</article>
</div>
</div>
{{ end }}