images - fitizens/hugo-modules GitHub Wiki

Image components

Install Module

Add the following code to your module list in the config/_default/module.toml file.

[imports](/fitizens/hugo-modules/wiki/imports)
path = "github.com/gethugothemes/hugo-modules/images"

Add the following code to your assets/scss/main.scss or assets/scss/style.scss file.

@import 'images';

If you want to enable placeholder/lazy-loader, then add the following code to your js plugins list in the config.toml file.

[params.plugins.js](/fitizens/hugo-modules/wiki/params.plugins.js)
link = "plugins/lazy-loader.js"

Logo Implementation

Call it, as a partial in your theme.

<!-- logo -->
{{ partial "logo.html" }}

Define the logo in the config/_default/params.toml file.

# logo
logo = "images/logo.png"

# logo_darkmode only used when theme has a dark mode
logo_darkmode = "images/logo_darkmode.png"

# use `px` or `x` with logo_width, example: "100px".
# Note: logo_width is not work with .svg file
logo_width = "100px"

# default logo height is the image height that you provided
logo_height = "80px"

# if logo_webp set false, it will not generate WEBP version of logo
logo_webp = true # default is true

# logo text will only show when logo is missing.
logo_text = "Boilerplate"

Favicon Implementation

Call it, as a partial in your theme.

<!-- favicon -->
{{ partialCached "favicon" . }}

Define the logo in the config/_default/params.toml file.

# favicon
favicon = "images/favicon.png"

Image Implementation

Call it, as a partial in your theme.

Available parameters:

  • Src: image source
  • Alt: image alt text
  • Size: image size (example: "100x100")
  • Class: image class
  • Resize: image resize option | default: true
  • Webp: generate webp version | default: true
  • Context: image context | default: .
  • Command: image resizing command | default: "Resize"
  • Placeholder: image placeholder | default: false
  • DisplayXL: image size for extra large screen | default: "1110px"
  • DisplayLG: image size for large screen | default: "700px"
  • DisplayMD: image size for medium screen | default: "600px"
  • DisplaySM: image size for small screen | default: "545px"
<!-- simple image call -->
{{ partial "image.html" (dict "Src" .Params.image ) }}

<!-- for content folder image, use .Context -->
{{ partial "image.html" (dict "Src" .Params.image "Context" .Page ) }}

Background-Image Implementation

Call it, as a partial in your theme.

Available parameters:

  • Src: background-image source
  • Size: background-image resize (example: "100x100")
  • Perspective: background-size | default: "cover"
  • Webp: generate webp version | default: true
  • Context: image context | default: .
  • Position: background-position | default: "center center"
  • Repeat: background-repeat | default: "no-repeat"
  • Placeholder: If Placeholder is true, then lazy class is required to this element. | default: false
{{ partial `bg-image.html` (dict `Src` .background_image ) | safeHTMLAttr }}

Shortcode Implementation

Available parameters:

  • src: image source
  • caption: image caption
  • alt: image alt text
  • height: image height
  • width: image width
  • position: image position | available: "center", "left", "right", "float-left", "float-right"
  • command: image resizing command | available: "Fit", "Fill", "Resize" | default: "Resize"
  • option: image resizing option
  • class: image custom class
  • title: image title
  • webp: generate webp version | default: true
{{< image src="images/image.png" >}}