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"
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"
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"
Call it, as a partial in your theme.
Available parameters:
Src
: image sourceAlt
: image alt textSize
: image size (example: "100x100")Class
: image classResize
: image resize option | default: trueWebp
: generate webp version | default: trueContext
: image context | default: .Command
: image resizing command | default: "Resize"Placeholder
: image placeholder | default: falseDisplayXL
: 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 ) }}
Call it, as a partial in your theme.
Available parameters:
Src
: background-image sourceSize
: background-image resize (example: "100x100")Perspective
: background-size | default: "cover"Webp
: generate webp version | default: trueContext
: image context | default: .Position
: background-position | default: "center center"Repeat
: background-repeat | default: "no-repeat"Placeholder
: IfPlaceholder
is true, thenlazy
class is required to this element. | default: false
{{ partial `bg-image.html` (dict `Src` .background_image ) | safeHTMLAttr }}
Available parameters:
src
: image sourcecaption
: image captionalt
: image alt textheight
: image heightwidth
: image widthposition
: image position | available: "center", "left", "right", "float-left", "float-right"command
: image resizing command | available: "Fit", "Fill", "Resize" | default: "Resize"option
: image resizing optionclass
: image custom classtitle
: image titlewebp
: generate webp version | default: true
{{< image src="images/image.png" >}}