vmems-website/layouts/shortcodes/fig-img.html

{{/**
    fig-img
    how to use:
        
    {{< fig-img
        src="now.jpg"
        options="500x500"
        alt="The alt"
        caption="The caption"
    >}}

    **/}}
{{- if .Get "single" -}}
<div class="single-figure-container">
{{ end }}
<figure class="figure {{ with .Get "class" }}{{ . }}{{ end }}">
    {{- if .Get "link" -}}
        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end -}}

    {{ $options := or (.Get "options") "500x500 center" }}
    {{ $permalink := "" }}
    {{ if hasPrefix (.Get "src") "https://" }}
        {{ $permalink = .Get "src" }}
    {{ else }}
        {{ $permalink = ((.Page.Resources.GetMatch (.Get "src")).Fill $options).Permalink }}
    {{- end -}}

    <img 
        class="figure-img img-fluid"
        src="{{ $permalink }}"
         {{- if or (.Get "alt") (.Get "caption") }}
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
         {{- end -}}
    /><!-- Closing img tag -->
    {{- if .Get "link" }}</a>{{ end -}}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
        <figcaption class="figure-caption">
            {{ with (.Get "title") -}}
                <h4>{{ . }}</h4>
            {{- end -}}
            {{- if or (.Get "caption") (.Get "attr") -}}<p>
                {{- .Get "caption" | markdownify -}}
                {{- with .Get "attrlink" }}
                    <a href="{{ . }}">
                {{- end -}}
                {{- .Get "attr" | markdownify -}}
                {{- if .Get "attrlink" }}</a>{{ end }}</p>
            {{- end }}
        </figcaption>
    {{- end }}
</figure>
{{- if .Get "single" -}}
</div>
{{ end }}