Custom image shortcodes and an example of Hugo’s built-in Youtube video shortcode.

Where shortcodes are built-in links to Hugo documentation are provided.

Large images (wider than 320px)

The img-auto-src shortcode will generate derivative images and HTML code for the HTML image srcset attribute. The output HTML allows responsive lazy-loaded images.

{{<
  img-auto-src
  src="example.jpg"
  link="/an-optional-link/"
  alt="A description of the image"
  class="optional-css-class another-class"
  loadingAttribute="optional loading attribute"
 >}}

Only the src and alt attributes are required, all others are optional.

Available classes currently defined in Jalview theme CSS are: normal, half and wide with widths of 33%, 50% and 100% respectively. You can also have text wrap around the images using a class of right or left (uses css float).

The optional loadingAttribute defaults to lazy for browser native lazy image loading, the other possible value is eager to force immiediate image loading.

Resize your images before use, commit derivates to Git.

I Recommend that very large images are manually resized to a maximum of 2560px wide before adding to the sites codebase. Although Hugo will happily resize larger images it will take time to do so and thus significantly increase build times. Occasionaly this can also cause Hugo to time-out leaving half processed images that need to be manually removed from the generated content folder before rerunning hugo.

You should add and commit any generated image derivatives to Git so that Hugo doesn’t have to regenerate them on every build.

Small images

The img-auto-src shortcode above will not work with images smaller than 320px wide. Use small-img shortcode instead:

{{<
  small-img
  src="example.jpg"
  link="/an-optional-link/"
  alt="A description of the image"
  class="optional css classes"
 >}}

Only the src attribute is required, all others are optional.

This does not generate any image derivatives, but does allow a full range of HTML attributes to be added (unlike Markdown images). It hard codes lazy image loading.

Available classes currently defined in CSS are: icon, small and normal. You can also have text wrap around the images using a class of right or left (uses css float).

Large images with a caption

Use the HTML Figure element via either the Jalview theme’s Custom responsive Figure shortcode below or the Hugo built-in Figure shortcode:

{{<
  figure-imgsrc
  src="example.jpg"
  title="Title of the image"
  caption="A longer caption text associated with the image"
  link="/an-optional-link/"
  alt="A description of the image"
  class="optional-css-class"
  loadingAttribute="optional loading attribute"
 >}}

The title is rendered as HTML <h4>, the caption as a paragraph of text. Otherwise this shortcode has the same options as img-auto-src.

Adding Youtube Video

Use Hugo’s built-in Youtube shortcode

{{< youtube w7Ft2ymGmfc >}}