Skip to content

Files

Latest commit

 

History

History

images

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Image components

Install Module

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

[[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]]
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" >}}