Merge pull request #588 from gethinode/develop

Fix alignment of featured image in full cover mode

assets/scss/components/_navbar.scss

@@ -119,3 +119,75 @@
 }
 
 // stylelint-enable annotation-no-unknown
+
+:root {
+    --dropdown-horizontal-bg: var(--#{$prefix}light);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
+    }
+}
+
+$dropdown-transition: opacity .15s ease-in-out !default;
+
+.dropdown-horizontal {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        @include media-breakpoint-up($next) {
+            &#{$infix} { 
+                position: static !important; 
+            } 
+    
+            &#{$infix} > .dropdown-menu {
+                opacity: 0;
+                display: block;
+                visibility: hidden;
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+                width: 100%;
+                height: auto;
+                text-align: center;
+                border-radius: 0;
+                border: 0;
+                margin-top: calc((-1.5 * $spacer) - 2px);
+                padding-top: calc(1 * $spacer + 2px);
+                padding-bottom: 1 * $spacer;
+                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
+            
+                @include transition($dropdown-transition);
+            }
+    
+            &#{$infix} > .dropdown-menu.show {
+                visibility: visible;
+                opacity: 1;
+            }
+    
+            &#{$infix} > .dropdown-menu > li {
+                display: inline-block;
+                padding-left: $spacer;
+                padding-right: $spacer;
+            }
+    
+            &#{$infix} > .dropdown-menu > li > a {
+                padding-left: .25 * $spacer;
+                padding-right: .25 * $spacer;
+
+                &.active,
+                &:hover,
+                &:focus {
+                    color: var(--bs-body-color);
+                    border-bottom: solid 1px var(--bs-navbar-hover-color);
+                    margin-bottom: -1px;
+                    background-color: transparent;
+                }
+            }
+            
+            &#{$infix} > .nav-link.show {
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+            }            
+        }
+    }
+}

config/_default/params.toml

@@ -7,6 +7,7 @@
     canonifyAssetsURLs = false
     endorse = true
     footerBelowFold = false
+    loading = "lazy"
     [main.externalLinks]
         cue = false
         tab = false
@@ -61,6 +62,7 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    horizontal = false
     offset = "5.5rem"
     search = true
     searchModal = false

exampleSite/config/_default/params.toml

@@ -5,6 +5,7 @@
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
     footerBelowFold = false
+    loading = "lazy"
     [main.externalLinks]
         cue = true
         tab = true
@@ -48,6 +49,7 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    horizontal = false
     offset = "5.5rem"
     search = true
     searchModal = false

exampleSite/hugo_stats.json

@@ -59,6 +59,7 @@
       "align-items-start",
       "align-middle",
       "align-self-center",
+      "align-self-end",
       "anchor",
       "badge",
       "bg-body",
@@ -208,6 +209,8 @@
       "form-control",
       "fs-3",
       "fs-5",
+      "fullcover",
+      "fullscreen",
       "fw-30",
       "fw-bold",
       "fw-semibold",

layouts/_default/baseof.html

@@ -39,11 +39,14 @@
     {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
 {{- end -}}
 
-{{- /* Define section headings */ -}}
-{{ $sections := partial "utilities/GetSections.html" . }}
-{{- $.Scratch.Set "sections" $sections -}}
-
 {{- $fullCover := or (or (and .IsHome .Site.Params.home.fullCover) .Page.Params.fullCover) .Site.Params.main.footerBelowFold }}
+{{- $.Scratch.Set "fullCover" $fullCover -}}
+
+{{- /* Define section headings */ -}}
+{{- $loading := "" -}}
+{{- if $fullCover }}{{ $loading = .Site.Params.main.loading }}{{ end -}}
+{{ $sections := partial "utilities/GetSections.html" (dict "page" . "loading" $loading) }}
+{{- $.Scratch.Set "sections" $sections -}}
 
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">

layouts/_default/list.html

@@ -40,9 +40,10 @@
 {{- define "main" -}}
     {{- $page := . -}}
     {{- $sections := $.Scratch.Get "sections" -}}
+    {{- $fullCover := $.Scratch.Get "fullCover" -}}
     {{- $layout := $page.Params.layout -}}
 
-    <div class="container-xxl flex-fill px-4 px-xxl-0">
+    <div class="container-xxl px-4 px-xxl-0">
         {{- if ne $layout "featured" -}}
             {{ if and (not $page.IsHome) site.Params.navigation.breadcrumb }}
                 <div>{{ partial "assets/breadcrumb.html" $page }}</div>
@@ -57,7 +58,11 @@
                 {{ if ($page.Params.menu) }}
                     {{- partial "assets/section-menu.html" $page -}}
                 {{- end -}}
-                {{- $content := partial "utilities/ProcessContent" (dict "page" $page "raw" $page.RawContent) -}}
+                {{- $loading := "" -}}
+                {{- if or (eq $layout "featured") $page.IsHome -}}
+                    {{- if $fullCover}}{{ $loading = site.Params.main.loading }}{{ end }}
+                {{ end }}
+                {{- $content := partial "utilities/ProcessContent" (dict "page" $page "raw" $page.RawContent "loading" $loading) -}}
                 {{ $content | safeHTML }}
                 {{ if and (and $sections (eq (len $sections) 1)) (not $content) }}
                     <p class="pt-4">{{- T "emptyList" }}.</p>
@@ -85,4 +90,7 @@
     {{ range $sections }}
         {{ .content | safeHTML }}
     {{ end }}
+
+    {{/* Fill remaining space to push footer to viewport bottom */}}
+    <div class="container-fluid flex-fill"></div>
 {{- end -}}

layouts/partials/assets/card-group.html

@@ -144,6 +144,14 @@
 {{- $ratio := .ratio -}}
 {{- $wrapper := .wrapper | default "p-0" -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 {{- if and (eq $cols 1) (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
 
 <div class="container-fluid {{ $wrapper }}">
@@ -157,6 +165,7 @@
                 "footer" $footer
                 "orientation" $orientation
                 "ratio" $ratio
+                "loading" $loading
             ) -}}
             {{- $params = merge $params $element }}
 

layouts/partials/assets/card.html

@@ -146,13 +146,21 @@
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/card.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 {{ if ne $gutter "0" }}<div class="g-{{ $gutter }}">{{ end }}
 {{- if hasPrefix $orientation "horizontal" -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         <div class="row g-0 row-cols-1 h-100">
             <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ end }}">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
                 {{- else if $icon -}}
                     <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
                         {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid fa-fw" $icon)) -}}
@@ -173,7 +181,7 @@
 {{- else -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         {{- if $thumbnail -}}
-            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" (or $alt $title)) -}}
+            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
             <div class="card-icon  p-{{ $padding }}">
                 {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x" $icon)) -}}

layouts/partials/assets/carousel-item.html

@@ -5,8 +5,16 @@
 {{- $ratio := .ratio -}}
 {{- $portrait := .portrait -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/carousel-item.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 <div class="carousel-item{{ if $active }} active{{ end }}">
-    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "innerClass" "d-block w-100" "portrait" $portrait) }}
+    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "innerClass" "d-block w-100" "portrait" $portrait "loading" $loading) }}
     <div class="carousel-caption gradient"></div>
     {{ with $caption }}
         <div class="carousel-caption d-none d-md-block">

layouts/partials/assets/image.html

@@ -21,6 +21,10 @@
                     applicable to vector graphics.
     "portrait":     Optional flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only
                     the crop area is adjusted. Not applicable to vector graphics.
+    "loading":      Optional loading behavior of the image, either "eager" (default) or "lazy". The loading of lazily
+                    loaded images is deferred until the image is within scrolling range of the viewport. This should
+                    reduce the initial loading time of the website. It is recommended to lazily load only those images
+                    that are below the page fold.
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
     "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
@@ -51,6 +55,14 @@
 {{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
 {{- $page := .page -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/image.html] - Invalid value for param 'loading'" -}}
+    {{ end -}}
+{{- end -}}
+{{- $lazy := eq $loading "lazy" -}}
 
 {{- define "partials/image-portrait.html" -}}
     {{- $dimensions := slice }}
@@ -182,6 +194,7 @@
     {{- $imgset := "" -}}
     {{- $mode := .mode -}}
     {{- $modes := .modes -}}
+    {{- $lazy := .lazy -}}
     {{- $page := .page -}}
     {{- $isVector := false -}}
 
@@ -236,7 +249,8 @@
         {{- if not $anchor -}}
             <img class="img-fluid {{ $innerClass }}"
                 src="{{ $fallbackURL }}"
-                {{ with $imgset -}} srcset="{{ . }}" sizes="100vw"{{- end }}
+                {{ if $lazy }}loading="lazy"{{ end }}
+                {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }}
                 {{ with $height }}height="{{ . }}"{{ end }}
                 {{ with $width }}width="{{ . }}"{{ end }}
                 {{ with $title }}alt="{{ . }}"{{ end }}>
@@ -262,6 +276,7 @@
     "innerClass" $innerClass
     "title" $title
     "caption" $caption
+    "lazy" $lazy
     "page" $page)
 -}}
 

layouts/partials/assets/list.html

@@ -28,7 +28,8 @@
     {{- $thumbnail := .thumbnail -}}
     {{- $style := .style -}}
     {{- $mode := .mode -}}
-    {{- partial "assets/image.html" (dict "url" $thumbnail "outerClass" $style "mode" $mode) -}}
+    {{- $loading := .loading -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "outerClass" $style "mode" $mode "loading" $loading) -}}
 {{- end -}}
 
 {{- $page := .page -}}
@@ -49,6 +50,14 @@
 {{ $vertical := false }}
 {{ $type := "pills" }}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/list.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 <div class="d-none d-md-block p-0">
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
@@ -61,7 +70,7 @@
                         {{- $style = "reveal fade-bottom-n5 rotate-n5 ps-3" -}}
                         {{- if $odd }}{{ $style = "reveal fade-bottom-5 rotate-5 pe-3" }}{{ end }}
                     {{ end }}
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "style" $style "mode" $item.Params.colormode) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "style" $style "mode" $item.Params.colormode "loading" $loading) }}
                 </div>
                 <div class="col-6{{ if $odd }} order-first{{ end }} psw-lg-5 p-5">
                     {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
@@ -78,7 +87,7 @@
         <div class="container d-flex flex-column">
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-12 text-center">
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "mode" $item.Params.colormode) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "mode" $item.Params.colormode "loading" $loading) }}
                 </div>
                 <div class="col-12 p-3">
                     {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (partial "utilities/GetDescription.html" $item)) }}

layouts/partials/assets/nav.html

@@ -78,6 +78,14 @@
     {{ end -}}
 {{ end -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/nav.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 <div class="{{ if eq $width 50 }}col-sm-12 col-md-10 col-lg-8 col-xl-6{{ else }}col-12{{ end }} mx-auto pt-5 pb-5">
     {{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
     <div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
@@ -104,6 +112,7 @@
                     "color" $color
                     "content" (partial "utilities/GetDescription.html" $item)
                     "thumbnail" $thumbnail
+                    "loading" $loading
                 ) -}}
                 {{- else -}}
                     {{- (or $item.Description $item.Content) -}}

layouts/partials/assets/navbar.html

@@ -14,7 +14,7 @@
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
-    "class":        Optional class attribute of the navbar container.
+    "class"         Optional class attribute of the navbar container.
 -->
 
 <!-- Inline partial to render the color mode switcher -->
@@ -156,7 +156,6 @@
 {{- end -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
 
-
 {{- $enableDarkMode := default false site.Params.main.enableDarkMode -}}
 {{- with .mode -}}
     {{- $darkModeParam := . -}}
@@ -175,6 +174,8 @@
 
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
+{{- $horizontal := default false site.Params.navigation.horizontal -}}
+
 {{- $logo := site.Params.navigation.logo -}}
 {{- $logoLight := "" -}}
 {{- $logoDark := "" -}}
@@ -223,7 +224,7 @@
 
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
-    <nav class="navbar {{ if $fixed }}navbar-fixed-top{{ end }}  navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+    <nav class="navbar {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
         <div class="container-xxl p-0">
             <!-- Insert sidebar toggler when applicable -->
             <div class="d-flex">
@@ -270,10 +271,10 @@
                 <!-- Render top-menu items (maximum depth of 2) -->
                 <ul class="navbar-nav ms-auto">
                     {{- range $menu := $menus -}}
-                        <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+                        <li class="nav-item{{ if .HasChildren }} dropdown{{ if $horizontal }} dropdown-horizontal-{{ $size }}{{ end }}{{ end }}">
                             {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
                             {{- if .HasChildren -}}
-                                <ul class="dropdown-menu dropdown-menu-end">
+                                <ul class="dropdown-menu">
                                     {{- range .Children -}}
                                         <li>{{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}</li>
                                     {{- end -}}
@@ -359,8 +360,8 @@
                     </div>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ T "close" }}"></button>
                 </div>
-                <div class="modal-body p-2">
-                    <div class="search-suggestions bg-body" data-no-results="{{ T "ui_no_results" }}"></div>
+                <div class="modal-body p-2 search-background">
+                    <div class="search-suggestions" data-no-results="{{ T "ui_no_results" }}"></div>
                 </div>
             </div>
         </div>

layouts/partials/assets/persona.html

@@ -56,12 +56,20 @@
 
 {{- $class := .class -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/persona.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 <div class="d-none d-md-block">
     <div class="persona position-relative row mt-5 align-middle p-3">
         <div class="col-2">
             <div class="position-absolute top-50 start-0 translate-middle-y col-4 ps-3">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>
@@ -81,7 +89,7 @@
         <div class="col-12">
             <div class="position-absolute top-25 start-50 translate-middle col-6">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>

layouts/partials/assets/section-list.html

@@ -36,6 +36,7 @@
 {{- $width := 100 -}}
 {{- $ratio := "" -}}
 {{- $wrap := false -}}
+{{- $loading := .loading -}}
 
 {{- with (index site.Params.sections $section) -}}
     {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
@@ -121,12 +122,13 @@
         "content" $content
         "class" $style
         "color" $color
+        "loading" $loading
         )
     -}}
     {{- $partial := "" -}}
 
     <div class="container-fluid {{ with $background }} bg-{{ . }}{{ end }} p-0">
-        <div class="container-xxl flex-fill p-4 px-xxl-0 pb-5">
+        <div class="container-xxl p-4 px-xxl-0 pb-5">
             {{- partial "assets/section-header.html" $params -}}
             
             {{ if eq $layout "card" }}

layouts/partials/list/featured.html

@@ -79,7 +79,7 @@
                 <div class="col col-12 col-md-{{ $width }} order-1 order-md-0 my-md-auto">
                     {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions "align" $align) }}
                 </div>
-                <div class="col col-12 col-md-{{ if gt $width 6 }}{{ sub 12 $width }}{{ else }}{{ $width }}{{ end }} order-0 order-md-1 text-center my-md-auto">
+                <div class="col col-12 col-md-{{ if gt $width 6 }}{{ sub 12 $width }}{{ else }}{{ $width }}{{ end }} order-0 order-md-1 text-center my-md-auto align-self-end">
                     {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4 pb-md-0") }}
                 </div>
             </div>

layouts/partials/utilities/GetSections.html

@@ -1,4 +1,5 @@
-{{- $page := . -}}
+{{- $page := .page -}}
+{{- $loading := .loading -}}
 
 {{/* Add title for current page */}}
 {{- $items := slice -}}
@@ -65,7 +66,8 @@
         "icon" $icon
         "content" $content
         "moreTitle" $moreTitle
-        "sectionURL" $sectionURL)) " \r\n"
+        "sectionURL" $sectionURL
+        "loading" $loading)) " \r\n"
     -}}
 
     {{ if $sectionContent }}

layouts/shortcodes/image.html

@@ -8,6 +8,10 @@
                     original aspect ratio of the image.
     "portrait":     Optional flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only
                     the crop area is adjusted.
+    "loading":      Optional loading behavior of the image, either "eager" (default) or "lazy". The loading of lazily
+                    loaded images is deferred until the image is within scrolling range of the viewport. This should
+                    reduce the initial loading time of the website. It is recommended to lazily load only those images
+                    that are below the page fold.
     "wrapper":      Optional class attributes of the wrapper element, e.g. "mx-auto".
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
@@ -16,19 +20,33 @@
 -->
 
 {{- if isset .Params "src" -}}
+    {{ $error := false -}}
     {{ $url := .Get "src" | default "" -}}
     {{- $validRatios := slice "1x1" "3x2" "4x3" "16x9" "21x9" -}}
     {{ $ratio := .Get "ratio" | default "" -}}
     {{ if $ratio -}}
         {{ if not (in $validRatios $ratio) -}}
             {{ errorf "Invalid value for param 'ratio': %s" .Position -}}
+            {{ $error = true -}}
         {{ end -}}
     {{ end -}}
     
     {{- $class := .Get "class" | default "" -}}
     {{- $wrapper := .Get "wrapper" | default "" -}}
+
+    {{- $loading := .Get "loading" | default "" -}}
+    {{- $validSettings := slice "lazy" "eager" -}}
+    {{- if $loading -}}
+        {{ if not (in $validSettings $loading) -}}
+            {{ errorf "Invalid value for param 'loading': %s" .Position -}}
+            {{ $error = true -}}
+        {{ end -}}
+    {{- end -}}
+    {{- $lazy := eq $loading "lazy" -}}
+    
     {{ $title := .Get "title" | default "" -}}
     {{ $caption := .Get "caption" | default "" -}}
+
     {{ $supportedFlags := slice "true" "false" -}}
     {{ $modeParam := "false" -}}
     {{ $mode := false -}}
@@ -37,7 +55,9 @@
         {{ if eq $modeParam "true" }}{{ $mode = true }}{{ else }}{{ $mode = false }}{{ end -}}
     {{ else -}}
         {{ errorf "Invalid value for param 'mode': %s" $modeParam -}}
+        {{ $error = true -}}
     {{ end -}}
+
     {{ $portraitParam := "false" -}}
     {{ $portrait := false -}}
     {{ with .Get "portrait" }}{{ $portraitParam = . }}{{ end -}}
@@ -45,19 +65,23 @@
         {{ if eq $portraitParam "true" }}{{ $portrait = true }}{{ else }}{{ $portrait = false }}{{ end -}}
     {{ else -}}
         {{ errorf "Invalid value for param 'portrait': %s" $portraitParam -}}
+        {{ $error = true -}}
     {{ end -}}
     
-    {{- partial "assets/image.html" (dict 
-        "url" $url
-        "ratio" $ratio
-        "outerClass" $wrapper
-        "innerClass" $class
-        "title" $title
-        "caption" $caption
-        "mode" $mode
-        "portrait" $portrait
-        "page" .Page)
-    -}} 
+    {{- if not $error -}}
+        {{- partial "assets/image.html" (dict 
+            "url" $url
+            "ratio" $ratio
+            "outerClass" $wrapper
+            "innerClass" $class
+            "title" $title
+            "caption" $caption
+            "mode" $mode
+            "portrait" $portrait
+            "loading" $loading
+            "page" .Page)
+        -}} 
+    {{- end -}}
 {{ else -}}
     {{ errorf "Missing value for param 'src': %s" .Position -}}
 {{ end -}}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.21.0-beta6",
+  "version": "0.21.0-beta7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.21.0-beta6",
+      "version": "0.21.0-beta7",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.21.0-beta6",
+  "version": "0.21.0-beta7",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",