Help:Shortcode Img

# tree of ./content/en/docs/tutorial/create_account
...
├── tutorial/
│   ├── create_account/
│   │   ├── index.md
│   │   ├── element-create-account-recaptcha.png
│   │   ├── element-create-account-accept-terms.png
│   │   ├── element-create-account-email.png
│   │   ├── element-create-account-filled.png
│   │   ├── element-create-account-github-sso.png
│   │   ├── element-create-account-google-sso.png
│   │   ├── element-create-account-registration-successful.png
│   │   ├── element-create-account-verification-mail.png
│   │   ├── element-create-account.png
│   │   ├── element-initial-view.png
│   │   ├── element-sign-in-filled.png
│   │   ├── element-sign-in.png
│   │   └── element-welcome.png
│   └── _index.md
└── _index.md

{{< img src="image.svg" width="50" >}}
{{< img src="image.svg" width="100" alt="Our logo" caption="<em>The Matrix+Python Logo</em>" >}}
{{< img src="image.svg" >}}

<!--

  Img Shortcode
  =============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/img.html
  STYLE:  /assets/scss/components/_shortcode_img.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Img.md
  LIB:    medium-zoom
  SCRIPT: /assets/js/medium-zoom.js

  Description
  -----------

  Use the img shortcode to create an image. Optionally with an HTML figure.

  Changelog
  =========

  Version 1
  ---------

  Initial release

  Version 2
  ---------

  Rewrite to add more class hooks and make use of the medium-zoom library and
  allow using vector images.

-->

{{- $image_src := .Get "src" -}}
{{- $image := .Page.Resources.GetMatch (printf "*%s*" $image_src) -}}
{{- $is_vector := eq (path.Ext $image) ".svg" -}}

{{- if eq $image nil -}}
  {{ errorf "Failed to process img shortcode: %s. %s does not exist next to \"%s\"." $.Position $image_src .Page.Path }}
{{- end -}}

{{/*
<!--
if (isset $image "Width")  produces an non fatal error in the new version of
hugo. Basically every image excep vector images should have a slice. So the
workaround is checking, if the image is not an vector image.
Same for the other two: $image.Height and $image.Resize
-->
*/}}

{{- $width := false -}}
{{- if (not $is_vector) -}}
  {{- $width = $image.Width -}}
{{- end -}}
{{- with (.Get "width") -}}
  {{- $width = . -}}
{{- end -}}

{{- $height := false -}}
{{- if (not $is_vector) -}}
  {{- $height = .Get "height" | default $image.Height -}}
{{- end -}}
{{- with (.Get "height") -}}
  {{- $height = . -}}
{{- end -}}

{{- $lqip := false -}}
{{- if (not $is_vector) -}}
  {{- $w := printf "%dx webp q%d %s %s" $.Site.Params.lqipWidth $.Site.Params.quality $.Site.Params.hint $.Site.Params.resampleFilter -}}
  {{- $lqip = $image.Resize $w -}}
{{- end -}}

{{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}}

{{- if (not $is_vector) -}}
  {{ $widths := $.Site.Params.landscapePhotoWidths -}}
  {{ if gt $image.Height $image.Width -}}
    {{ $widths = $.Site.Params.portraitPhotoWidths -}}
  {{ end -}}

  {{ range $widths -}}
    {{ $srcUrl := (printf "%dx webp q%d %s %s" . $.Site.Params.quality $.Site.Params.hint $.Site.Params.resampleFilter | $image.Resize).Permalink -}}
    {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
    {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
  {{ end -}}
  {{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
{{ end -}}

<figure {{ with .Get "figure_class" -}}class="{{- . -}}"{{- end -}}>
  {{- if and (eq .Site.Params.options.lazySizes true) (not $is_vector) -}}
  <img
    class="img-fluid lazyload blur-up rounded mx-auto d-block {{ with .Get "img_class" -}}{{- . -}}{{- end -}}"
    id="zoom-default"
    data-sizes="auto"
    {{ with $lqip -}}src="{{- .RelPermalink -}}"{{- end }}
    data-srcset="{{ $imgSrcSet }}"
    {{ with $width -}}width="{{- . -}}"{{- end }}
    {{ with $height -}}height="{{- . -}}"{{- end }}
    {{ with .Get "alt" }}alt="{{.}}"{{ end }}
  >
  </img>
  {{- else -}}
    <img
      class="img-fluid zoom-default rounded mx-auto d-block {{ with .Get "img_class" -}}{{- . -}}{{- end -}}"
      id="zoom-default"
      sizes="100vw"
      {{ with $imgSrcSet -}}srcset="{{- . -}}"{{- end }}
      src="{{ $image.RelPermalink }}"
      {{ with $width -}}width="{{- . -}}"{{- end }}
      {{ with $height -}}height="{{- . -}}"{{- end }}
      {{ with .Get "alt" -}}alt="{{- . -}}"{{- end }}
  >
  </img>
  {{ end -}}
  <noscript>
    <img
      class="img-fluid rounded mx-auto d-block {{ with .Get "img_class" -}}{{- . -}}{{- end -}}"
      sizes="100vw"
      srcset="{{ $imgSrcSet }}"
      src="{{ $image.RelPermalink }}"
      {{ with $width -}}width="{{- . -}}"{{- end }}
      {{ with $height -}}height="{{- . -}}"{{- end }}
      {{ with .Get "alt" -}}alt="{{- . -}}"{{- end }}
    >
    </img>
</noscript>
{{- with .Get "caption" -}}<figcaption class="figure-caption">{{- . | safeHTML -}}</figcaption>{{- end -}}
</figure>

/*

  Img Shortcode
  =============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/img.html
  STYLE:  /assets/scss/components/_shortcode_img.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Img.md
  LIB:    medium-zoom
  SCRIPT: /assets/js/medium-zoom.js

  Figure Shortcode
  ================

  LAYOUT: /layouts/shortcodes/figure.html
  STYLE:  /assets/scss/components/_shortcode_img.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Figure.md

*/

figure {
  margin: 2rem 0;
}

.figure-caption {
  margin: 0.25rem 0 0.75rem;
  text-align: center;
}

figure.wide {
  margin: 2rem -1.5rem;
}

figure.wide .figure-caption {
  margin: 0.25rem 1.5rem 0.75rem;
}

@include media-breakpoint-up(md) {
  figure.wide {
    margin: 2rem -2.5rem;
  }

  figure.wide .figure-caption {
    margin: 0.25rem 2.5rem 0.75rem;
  }
}

@include media-breakpoint-up(lg) {
  figure.wide {
    margin: 2rem -5rem;
  }

  figure.wide .figure-caption {
    margin: 0.25rem 5rem 0.75rem;
  }
}

.blur-up {
  filter: blur(5px);
}

.blur-up.lazyloaded {
  filter: unset;
}

.img-simple {
  margin-top: 0.375rem;
  margin-bottom: 1.25rem;
}

/*

  Img Shortcode
  =============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/img.html
  STYLE:  /assets/scss/components/_shortcode_img.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Img.md
  LIB:    medium-zoom
  SCRIPT: /assets/js/medium-zoom.js

*/

import mediumZoom from 'medium-zoom'


document.addEventListener('lazybeforeunveil', () => {
    mediumZoom('#zoom-default', {
        margin: 70,
        background: 'rgba(00, 00, 00, .3)',
        scrollOffset: 0,
    })
})