Images and Figures

Use the image shortcode to display a responsive image with optional caption.

  Important

Hinode uses render hooks since release v0.26.0  to parse markdown images. Be sure to set Parser.wrapStandAloneImageWithinParagraph  to false to correctly render images and figures.

Hinode uses Hugo’s Image Processing  to preprocess responsive images on the server side. By taking advantage of so-called Image Sets  , the client’s browser can decide which image to download whilst reducing the download size. You also utilize external image processors, see Digital Asset Managers for more details.

Images  

As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio. The Image Shortcode Documentation provides more details.

  Important

Be sure to store your local images in the assets folder to take advantage of the image processing features. Images stored in the static folder are not processed.

markdown

{{< image src="img/flowers.jpg" ratio="21x9" class="rounded" >}}

You can also reference remote images by specifying an URL. Hinode downloads the image to the server and stores the processed images in the local resources folder (during debugging) or public folder (during build).

markdown

{{< image src="https://picsum.photos/id/56/2880/1920" ratio="1x1" class="rounded" wrapper="mx-auto w-25" >}}

You can also use native Markdown to include an image since release v0.26.0  .

markdown

![Flowers](/img/flowers.jpg)
{class="rounded col-6 col-md-3" ratio="4x3" portrait=true wrapper="text-center"}

Figures  

Similar to the Images Support, you can add a caption to display below the image. Add the argument caption to include a figure caption.

markdown

{{< image src="img/coffee.jpg" ratio="21x9" caption="Figure caption" class="rounded" >}}

You can also use native Markdown to include a figure since release v0.26.0  .

markdown

![Flowers](/img/flowers.jpg "Figure caption")
{class="rounded col-6 col-md-3" ratio="4x3" portrait=true wrapper="text-center"}