Files
blowfish/layouts/partials/author-extra.html
ZhenShuo Leo 8d5c2045a6 fix: author image stretch when zooming
fix this issue by using square image for data-zoom-src
2025-11-22 05:34:28 +08:00

62 lines
2.2 KiB
HTML

{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
<div class="flex author author-extra mt-4">
{{ with .data.image }}
{{ $authorImage := "" }}
{{ if or (hasPrefix . "http://") (hasPrefix . "https://") }}
{{ $authorImage = resources.GetRemote . }}
{{ else }}
{{ $authorImage = resources.Get . }}
{{ end }}
{{ if $authorImage }}
{{ $final := $authorImage }}
{{ $squareImage := $authorImage }}
{{ if not $disableImageOptimization }}
{{ $final = $authorImage.Fill "192x192" }}
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
{{ end }}
<img
class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
width="96"
height="96"
src="{{ $final.RelPermalink }}"
data-zoom-src="{{ $squareImage.RelPermalink }}">
{{ end }}
{{ end }}
<div class="place-self-center">
{{ $link := .link }}
{{ with .data.name | markdownify | emojify }}
<div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
{{ i18n "author.byline_title" | markdownify }}
</div>
<a
{{ if $link }}href="{{ $link }}"{{ end }}
class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
{{ . }}
</a>
{{ end }}
{{ with .data.bio | markdownify }}
<div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div>
{{ end }}
<div class="text-2xl sm:text-lg">
<div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
{{ range .data.social }}
{{ range $name, $link := . }}
<a
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
href="{{ $link }}"
target="_blank"
aria-label="{{ $name | title }}"
title="{{ $name | title }}"
rel="me noopener noreferrer">
<span class="inline-block align-text-bottom">
{{ partial "icon.html" $name }}
</span>
</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
</div>