Hugo Magnific Popup figure shortcode with fallback image

figure.html

<!-- use either src or link-thumb for thumbnail image -->
{{ $src := .Get "src" }}
{{ $url := (.Get "link" | default (.Get "src")) }}
<!-- Allow local and remote images -->
{{ if and $src (not (findRE "^(/|http(s?)://)" $src)) }}
  {{ $src = ($.Page.Resources.GetMatch (.Get "src")).RelPermalink }}
{{ end }}
{{ if not (findRE "^(/|http(s?)://)" $url) }}
  {{ $url = ($.Page.Resources.GetMatch $url).RelPermalink }}
{{ end }}
{{- $thumb := $src | default (printf "%s." (.Get "thumb") | replace $url ".") }}

<div class="box" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
      <!-- There's no fallback for thumbnails -->
      {{- $attr := .Get "attr" }}
      <img
        class="image-popup img-fluid"
        itemprop="thumbnail"
        src="{{ $thumb | relURL }}"
        {{ with .Get "alt" | default (.Get "caption") }}
          alt="{{.}}"
        {{ end }}
        {{if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
          title="{{- with .Get `title` }}<h5 style='display:inline-block;'>{{.}} - </h5>{{ end -}}{{ with .Get `caption` }}<span> {{.}}</span>{{end}}{{- with .Get `attrlink` }} <a href='{{.}}'>{{ $attr }}</a>{{ else }}{{ $attr }}{{ end -}}"
        {{ end }}
        data-mfp-src="{{ $url }}"
        {{ if .Get "fallback"}}
          onerror="this.onerror=null;this.src='{{ .Get `fallback` }}';data-mfp-src='{{ .Get `fallback` }}'"
        {{ end }}>
    </div>
    {{ with $url | default $src }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
      <figcaption>
        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
      </figcaption>
    {{- end }}
  </figure>
</div>

script.js

jQuery(function ($) {
	"use strict";
  
  /* ========================================================================= */
	/*	Magnific popup
	/* =========================================================================  */
  $('.image-popup').magnificPopup({
    type: 'image',
    removalDelay: 160, // Delay removal by X to allow out-animation.
    closeOnContentClick: false,
    image: {
        titleSrc: 'title',
        markup: '<div class="mfp-figure">'+
                  '<div class="mfp-close"></div>'+
                  '<div class="mfp-top-bar"></div>'+
                  '<div class="mfp-img"></div>'+
                  '<div class="mfp-bottom-bar">'+
                    '<div class="mfp-title"></div>'+
                    '<div class="mfp-counter"></div>'+
                  '</div>'+
                '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button
    },
    callbacks: {
        beforeOpen: function () {
  				// Just a hack that adds mfp-anim class to markup.
  				this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
  				this.st.mainClass = this.st.el.attr('data-effect');
  			}
    },
    gallery: {
        enabled: true
    },
    zoom: {
  		enabled: false,
  		duration: 300, // don't foget to change the duration also in CSS
  		opener: function(element) {
  			return element.find('img');
  		}
  	}
  });
  
});

usage.md

{{< figure src="path/to/image.webp" fallback="path/to/image.jpg" >}}

{{< figure link="https://www.remote-images.com/image.webp" fallback="https://www.remote-images.com/image.jpg" >}}

{{< figure link="path/to/image.jpg" thumb="-thumb" title="Thumbnail" caption="Thumbnails have no fallback." >}}

{{< figure src="path/to/image-small.jpg" link="path/to/image.webp" fallback="path/to/image.jpg" title="Fancy" caption="Can add attribution link behind caption or without capion and title" attr="Olaf Haag" attrlink="https://www.olafhaag.com">}}