{{- $page := .page -}}
{{- $image := .image -}}

{{- $data := partial "components/image/process.html" (dict "image" .image "page" .page) -}}

{{- with $data -}}
  <div class="image grid-item">
    <a
      href="{{- $page.RelPermalink -}}"
      data-pswp-src="{{- $data.full.RelPermalink -}}"
      data-pswp-width="{{- $data.full.Width -}}"
      data-pswp-height="{{- $data.full.Height -}}"
      class="pswp-image"
    >
      <img
        src="{{- $data.thumb.RelPermalink -}}"
        width="{{- $data.thumb.Width -}}"
        height="{{- $data.thumb.Height -}}"
        loading="lazy"
        {{ with $data.title }}title="{{- . -}}"{{ end }}
        {{ with $data.alt }}alt="{{- . -}}"{{ end }}
      />
    </a>
    <div class="pswp-caption-content">
      <div>
        {{ $page.Title }}
        {{ partial "components/meta/index.html" $page }}
      </div>
    </div>
  </div>
{{- end -}}