image-definition.html

{{/* 
    Copyright © 2022 - 2025 The Hinode Team / Mark Dumay. All rights reserved.
    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
    Visit gethinode.com/license for more details.
*/}}

{{- $error := false -}}

{{/* Initialize arguments */}}
{{- $args := partial "utilities/InitArgs.html" (dict "structure" "image-definition" "args" . "group" "partial") -}}
{{- if or $args.err $args.warnmsg -}}
    {{- partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
        "partial" "assets/helpers/image-definition.html" 
        "warnid"  "warn-invalid-arguments"
        "msg"     "Invalid arguments"
        "details" ($args.errmsg | append $args.warnmsg)
        "file"    page.File
    )}}
    {{- $error = $args.err -}}
{{- end -}}

{{/* Initialize local arguments */}}
{{- $src := $args.src -}}
{{- $wrapper := $args.wrapper -}}
{{- $alt := or $args.title $args.caption (T "image") -}}
{{- $modes := $args.modes -}}

{{/* Split url into base and anchor when applicable (only relevant for vector images) */}}
{{- $fileAnchor := "" -}}
{{- $segments := split $src "#" -}}
{{- if gt (len $segments) 2 -}}
    {{- errorf "Invalid path or url: %q" $src -}}
{{- else if eq (len $segments) 2 -}}
    {{- $src = index $segments 0 -}}
    {{- $fileAnchor = index $segments 1 -}}
{{- end -}}

{{/* Obtain fallback URL and imageset definition */}}
{{- $target := partial "assets/helpers/image-dimension.html" (dict 
    "page"     $args.page
    "src"      $src
    "ratio"    $args.ratio
    "portrait" $args.portrait
    "plain"    $args.plain 
    "imageset" true
    "anchor"   $args.anchor
) -}}
{{- $fallbackURL := index $target "target" -}}
{{- $imgset := index $target "set" -}}
{{- $height := index $target "height" -}}
{{- $width := index $target "width" -}}
{{- $data := index $target "data" -}}

{{/* Add color modes */}}
{{- range $none := $modes -}}
    {{- if ne $none $args.colorMode -}}
        {{- $wrapper = printf "%s d-none-%s" (or $wrapper "") $none -}}
    {{- end -}}
{{- end -}}

{{/* Generate image definition */}}
{{- if not $args.err -}}
    {{- if $args.caption -}}
        <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
    {{- else -}}
        {{- with $wrapper }}<div class="{{ . }}">{{ end }}
    {{- end -}}
    {{- if $data -}}
        {{- if site.Params.debugging.includeSVGOrigin -}}
            {{- printf "{{/* <svg src=\"%s\"> */}}" $.url | safeHTML -}}
        {{- end -}}
        {{- $data = replace $data "<svg" (printf "<svg class=\"%s\"" $args.class) -}}
        {{- $data | safeHTML -}}
    {{- else if not $fileAnchor -}}
        <img class="img-fluid {{ $args.class }}"
            src="{{ $fallbackURL }}"
            {{ if eq $args.loading "lazy" }} loading="lazy"{{ end -}}
            {{ with $args.priority }} fetchpriority="{{ . }}"{{ end -}}
            {{ with $imgset }} srcset="{{ . }}" sizes="{{ $args.sizes }}"{{ end -}}
            {{ with $height }} height="{{ . }}"{{ end -}}
            {{ with $width }} width="{{ . }}"{{ end -}}
            {{ with $alt }} alt="{{ . }}"{{ end }}>
    {{- else -}}
        <svg class="{{ $args.class }}">
            <use href="{{ $fallbackURL }}#{{ $fileAnchor }}"></use>
        </svg>
    {{- end -}}
    {{- if $args.caption -}}
            <figcaption class="figure-caption{{ with $args.figclass }} {{ . }}{{ end }}">{{ $args.caption | safeHTML }}</figcaption>
        </figure>
    {{- else if $wrapper -}}
        </div>
    {{- end -}}
{{- end -}}