{{ .Page.Scratch.Add "hasImages" "true" }}
{{- $width := .Get "width" -}}
{{- $height := .Get "height" -}}
{{/* First image */}}
{{- $img := .Get "src1" -}}
{{- $isRemote := strings.HasPrefix $img "http" -}}
{{- $originalImg := "" -}}
{{- $isResized := false -}}
{{- if not $isRemote -}}
{{- $img = .Page.Resources.GetMatch $img -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir $img }}
{{- $img = resources.Get $path -}}
{{- end -}}
{{- $originalImg = $img -}}
{{- if or $width $height }}
{{- $isResized = true -}}
{{- if and $width $height -}}
{{- $img = ($img.Resize (print $width "x" $height)).RelPermalink -}}
{{- else if $width -}}
{{- $img = ($img.Resize (print $width "x")).RelPermalink -}}
{{- else if $height -}}
{{- $img = ($img.Resize (print "x" $height)).RelPermalink -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{/* Second image */}}
{{- $img2 := .Get "src2" -}}
{{- $isRemote2 := strings.HasPrefix $img2 "http" -}}
{{- $originalImg2 := "" -}}
{{- $isResized2 := false -}}
{{- if not $isRemote2 -}}
{{- $img2 = .Page.Resources.GetMatch $img2 -}}
{{- if and (not $img2) .Page.File -}}
{{ $path := path.Join .Page.File.Dir $img2 }}
{{- $img2 = resources.Get $path -}}
{{- end -}}
{{- $originalImg2 = $img2 -}}
{{- if or $width $height }}
{{- $isResized2 = true -}}
{{- if and $width $height -}}
{{- $img2 = ($img2.Resize (print $width "x" $height)).RelPermalink -}}
{{- else if $width -}}
{{- $img2 = ($img2.Resize (print $width "x")).RelPermalink -}}
{{- else if $height -}}
{{- $img2 = ($img2.Resize (print "x" $height)).RelPermalink -}}
{{- end -}}
{{- end -}}
{{- end -}}
<div class="img-comp-container">
    <img class="lazyload img-comp-img img-comp-background"
         alt=""
         data-src="{{ $img }}"
         draggable="false" ondragstart="return false;"
         {{- with $width }} width="{{ . }}px" {{ end -}}
         {{- with $height }} height="{{ . }}px" {{ end -}}
         {{- if and $height (not $width) }} style="height: {{ $height }}px;"{{ end -}}
         {{- if and (not $isRemote) $isResized }}
         hsrc="{{ $originalImg.RelPermalink }}"
         hwidth="{{ $originalImg.Width }}"
         hheight="{{ $originalImg.Height }}"
         {{ end -}} />
    <div class="img-comp-img">
        <img class="lazyload img-comp-overlay"
             alt=""
             data-src="{{ $img2 }}"
             draggable="false" ondragstart="return false;"
             {{- with $width }} width="{{ . }}px" {{ end -}}
             {{- with $height }} height="{{ . }}px" {{ end -}}
             {{- if and $height (not $width) }} style="height: {{ $height }}px;"{{ end -}}
             {{- if and (not $isRemote2) $isResized2 }}
             hsrc="{{ $originalImg2.RelPermalink }}"
             hwidth="{{ $originalImg2.Width }}"
             hheight="{{ $originalImg2.Height }}"
             {{ end -}} />
    </div>
    <div class="img-comp-controls">{{- if eq "true" (default "true" (.Get "overlay")) -}}<div class="img-comp-expand" title="Expand">{{ partial "inline-svg" "expand-alt" }}</div>{{- end -}}</div>
</div>
{{- if or (.Get "title") (.Get "caption") -}}
<figcaption>
    {{ with (.Get "title") -}}
    <h4>{{ . }}</h4>
    {{- end -}}
    {{ with (.Get "caption") -}}
    <p>{{ . }}</p>
    {{- end -}}
</figcaption>
{{- end -}}