fix: author image stretch when zooming

fix this issue by using square image for data-zoom-src
This commit is contained in:
ZhenShuo Leo
2025-11-22 04:56:21 +08:00
parent c9595934ea
commit 8d5c2045a6
5 changed files with 25 additions and 7 deletions
+4 -1
View File
@@ -9,15 +9,18 @@
{{ end }} {{ end }}
{{ if $authorImage }} {{ if $authorImage }}
{{ $final := $authorImage }} {{ $final := $authorImage }}
{{ $squareImage := $authorImage }}
{{ if not $disableImageOptimization }} {{ if not $disableImageOptimization }}
{{ $final = $authorImage.Fill "192x192" }} {{ $final = $authorImage.Fill "192x192" }}
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
{{ end }} {{ end }}
<img <img
class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4" class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
width="96" width="96"
height="96" height="96"
src="{{ $final.RelPermalink }}" src="{{ $final.RelPermalink }}"
data-zoom-src="{{ $authorImage.RelPermalink }}"> data-zoom-src="{{ $squareImage.RelPermalink }}">
{{ end }} {{ end }}
{{ end }} {{ end }}
<div class="place-self-center"> <div class="place-self-center">
+9 -3
View File
@@ -9,8 +9,11 @@
{{ end }} {{ end }}
{{ if $authorImage }} {{ if $authorImage }}
{{ $final := $authorImage }} {{ $final := $authorImage }}
{{ $squareImage := $authorImage }}
{{ if not $disableImageOptimization }} {{ if not $disableImageOptimization }}
{{ $final = $authorImage.Fill "192x192" }} {{ $final = $authorImage.Fill "192x192" }}
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
{{ end }} {{ end }}
<img <img
class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4" class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
@@ -18,20 +21,23 @@
height="96" height="96"
alt="{{ $.Site.Params.Author.name | default " Author" }}" alt="{{ $.Site.Params.Author.name | default " Author" }}"
src="{{ $final.RelPermalink }}" src="{{ $final.RelPermalink }}"
data-zoom-src="{{ $authorImage.RelPermalink }}"> data-zoom-src="{{ $squareImage.RelPermalink }}">
{{ else }} {{ else }}
{{ $authorImage := resources.GetRemote . }} {{ $authorImage := resources.GetRemote . }}
{{ $final := $authorImage }} {{ $final := $authorImage }}
{{ $squareImage := $authorImage }}
{{ if not $disableImageOptimization }} {{ if not $disableImageOptimization }}
{{ $final = $authorImage.Fill "192x192" }} {{ $final = $authorImage.Fill "192x192" }}
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
{{ end }} {{ end }}
<img <img
class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4" class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
width="96" width="96"
height="96" height="96"
alt="{{ $.Site.Params.Author.name | default " Author" }}" alt="{{ $.Site.Params.Author.name | default " Author" }}"
src="{{ $authorImage.RelPermalink }}" src="{{ $final.RelPermalink }}"
data-zoom-src="{{ $authorImage.RelPermalink }}"> data-zoom-src="{{ $squareImage.RelPermalink }}">
{{ end }} {{ end }}
{{ end }} {{ end }}
<div class="place-self-center"> <div class="place-self-center">
+4 -1
View File
@@ -51,8 +51,11 @@
{{ end }} {{ end }}
{{ if $authorImage }} {{ if $authorImage }}
{{ $final := $authorImage }} {{ $final := $authorImage }}
{{ $squareImage := $authorImage }}
{{ if not $disableImageOptimization }} {{ if not $disableImageOptimization }}
{{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }} {{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
{{ end }} {{ end }}
<img <img
class="mb-2 h-36 w-36 rounded-full" class="mb-2 h-36 w-36 rounded-full"
@@ -60,7 +63,7 @@
height="144" height="144"
alt="{{ $.Site.Params.Author.name | default `Author` }}" alt="{{ $.Site.Params.Author.name | default `Author` }}"
src="{{ $final.RelPermalink }}" src="{{ $final.RelPermalink }}"
data-zoom-src="{{ $authorImage.RelPermalink }}"> data-zoom-src="{{ $squareImage.RelPermalink }}">
{{ end }} {{ end }}
{{ end }} {{ end }}
<h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200"> <h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
+4 -1
View File
@@ -54,8 +54,11 @@
{{ end }} {{ end }}
{{ if $authorImage }} {{ if $authorImage }}
{{ $final := $authorImage }} {{ $final := $authorImage }}
{{ $squareImage := $authorImage }}
{{ if not $disableImageOptimization }} {{ if not $disableImageOptimization }}
{{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }} {{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
{{ end }} {{ end }}
<img <img
class="mb-2 h-36 w-36 rounded-full" class="mb-2 h-36 w-36 rounded-full"
@@ -63,7 +66,7 @@
height="144" height="144"
alt="{{ $.Site.Params.Author.name | default `Author` }}" alt="{{ $.Site.Params.Author.name | default `Author` }}"
src="{{ $final.RelPermalink }}" src="{{ $final.RelPermalink }}"
data-zoom-src="{{ $authorImage.RelPermalink }}"> data-zoom-src="{{ $squareImage.RelPermalink }}">
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if not $disableHeroImageFilter }} {{ if not $disableHeroImageFilter }}
+4 -1
View File
@@ -13,8 +13,11 @@
{{ end }} {{ end }}
{{ if $authorImage }} {{ if $authorImage }}
{{ $final := $authorImage }} {{ $final := $authorImage }}
{{ $squareImage := $authorImage }}
{{ if not $disableImageOptimization }} {{ if not $disableImageOptimization }}
{{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }} {{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
{{ end }} {{ end }}
<img <img
class="mb-2 h-36 w-36 rounded-full" class="mb-2 h-36 w-36 rounded-full"
@@ -22,7 +25,7 @@
height="144" height="144"
alt="{{ $.Site.Params.Author.name | default `Author` }}" alt="{{ $.Site.Params.Author.name | default `Author` }}"
src="{{ $final.RelPermalink }}" src="{{ $final.RelPermalink }}"
data-zoom-src="{{ $authorImage.RelPermalink }}"> data-zoom-src="{{ $squareImage.RelPermalink }}">
{{ end }} {{ end }}
{{ end }} {{ end }}
<h1 class="text-4xl font-extrabold"> <h1 class="text-4xl font-extrabold">