docs/layouts/_default/_markup/render-image.html

54 lines
1.5 KiB
HTML

{{- $u := urls.Parse .Destination -}}
{{- $src := $u.String -}}
{{ if not (or $u.IsAbs (strings.HasPrefix $u.String "/")) }}
{{ $base := urls.Parse .Page.Permalink }}
{{ if strings.HasSuffix .Page.File.BaseFileName "index" }}
{{ $src = $base.JoinPath $u.Path -}}
{{ else }}
{{ $src = $base.JoinPath "../" $u.Path -}}
{{ end }}
{{ end }}
{{ $params := $u.Query }}
{{ $width := $params.Get "w" }}
{{ $height := $params.Get "h" }}
{{ $border := $params.Has "border" }}
<figure
x-data="{ zoom: false }"
@click="zoom = ! zoom"
class="cursor-pointer hover:opacity-90"
>
<img
loading="lazy"
src="{{ $src }}"
alt="{{ .Text }}"
{{ with $width }} width="{{ . }}" {{ end }}
{{ with $height }} height="{{ . }}" {{ end }}
class="rounded mx-auto{{ with $border }} border border-divider-light dark:border-divider-dark{{end}}"
/>
{{ with .Title }}
<figcaption class="text-gray-light dark:text-gray-dark">{{ . }}</figcaption>
{{ end }}
<template x-teleport="body">
<div
x-show="zoom"
@click="zoom = false"
x-transition.opacity.duration.250ms
class="fixed z-20 inset-0 flex items-center justify-center bg-black/70 p-6"
>
<button
class="text-white fixed z-30 top-6 right-8 icon-svg"
>
{{ partialCached "icon" "close" "close" }}
</button>
<img
loading="lazy"
class="rounded max-w-full max-h-full"
src="{{ $src }}"
alt="{{ .Text }}"
/>
</div>
</template>
</figure>