From 8d5c2045a642aefa1b45bbe34d250e5a6d1b3ea5 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 22 Nov 2025 04:56:21 +0800
Subject: [PATCH] fix: author image stretch when zooming

fix this issue by using square image for data-zoom-src
---
 layouts/partials/author-extra.html    |  5 ++++-
 layouts/partials/author.html          | 12 +++++++++---
 layouts/partials/home/background.html |  5 ++++-
 layouts/partials/home/hero.html       |  5 ++++-
 layouts/partials/home/profile.html    |  5 ++++-
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/layouts/partials/author-extra.html b/layouts/partials/author-extra.html
index de97e797..508383a5 100644
--- a/layouts/partials/author-extra.html
+++ b/layouts/partials/author-extra.html
@@ -9,15 +9,18 @@
     {{ 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="{{ $authorImage.RelPermalink }}">
+        data-zoom-src="{{ $squareImage.RelPermalink }}">
     {{ end }}
   {{ end }}
   <div class="place-self-center">
diff --git a/layouts/partials/author.html b/layouts/partials/author.html
index 57d8088c..ab0fe327 100644
--- a/layouts/partials/author.html
+++ b/layouts/partials/author.html
@@ -9,8 +9,11 @@
     {{ 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"
@@ -18,20 +21,23 @@
         height="96"
         alt="{{ $.Site.Params.Author.name | default " Author" }}"
         src="{{ $final.RelPermalink }}"
-        data-zoom-src="{{ $authorImage.RelPermalink }}">
+        data-zoom-src="{{ $squareImage.RelPermalink }}">
     {{ else }}
       {{ $authorImage := resources.GetRemote . }}
       {{ $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"
         alt="{{ $.Site.Params.Author.name | default " Author" }}"
-        src="{{ $authorImage.RelPermalink }}"
-        data-zoom-src="{{ $authorImage.RelPermalink }}">
+        src="{{ $final.RelPermalink }}"
+        data-zoom-src="{{ $squareImage.RelPermalink }}">
     {{ end }}
   {{ end }}
   <div class="place-self-center">
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index 5afa4647..a46b5d92 100644
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -51,8 +51,11 @@
             {{ end }}
             {{ if $authorImage }}
               {{ $final := $authorImage }}
+              {{ $squareImage := $authorImage }}
               {{ if not $disableImageOptimization }}
                 {{ $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 }}
               <img
                 class="mb-2 h-36 w-36 rounded-full"
@@ -60,7 +63,7 @@
                 height="144"
                 alt="{{ $.Site.Params.Author.name | default `Author` }}"
                 src="{{ $final.RelPermalink }}"
-                data-zoom-src="{{ $authorImage.RelPermalink }}">
+                data-zoom-src="{{ $squareImage.RelPermalink }}">
             {{ end }}
           {{ end }}
           <h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
diff --git a/layouts/partials/home/hero.html b/layouts/partials/home/hero.html
index 0652c5e7..ed6d81ae 100644
--- a/layouts/partials/home/hero.html
+++ b/layouts/partials/home/hero.html
@@ -54,8 +54,11 @@
             {{ end }}
             {{ if $authorImage }}
               {{ $final := $authorImage }}
+              {{ $squareImage := $authorImage }}
               {{ if not $disableImageOptimization }}
                 {{ $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 }}
               <img
                 class="mb-2 h-36 w-36 rounded-full"
@@ -63,7 +66,7 @@
                 height="144"
                 alt="{{ $.Site.Params.Author.name | default `Author` }}"
                 src="{{ $final.RelPermalink }}"
-                data-zoom-src="{{ $authorImage.RelPermalink }}">
+                data-zoom-src="{{ $squareImage.RelPermalink }}">
             {{ end }}
           {{ end }}
           {{ if not $disableHeroImageFilter }}
diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html
index 7866f9c4..2d27bf68 100644
--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@@ -13,8 +13,11 @@
       {{ end }}
       {{ if $authorImage }}
         {{ $final := $authorImage }}
+        {{ $squareImage := $authorImage }}
         {{ if not $disableImageOptimization }}
           {{ $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 }}
         <img
           class="mb-2 h-36 w-36 rounded-full"
@@ -22,7 +25,7 @@
           height="144"
           alt="{{ $.Site.Params.Author.name | default `Author` }}"
           src="{{ $final.RelPermalink }}"
-          data-zoom-src="{{ $authorImage.RelPermalink }}">
+          data-zoom-src="{{ $squareImage.RelPermalink }}">
       {{ end }}
     {{ end }}
     <h1 class="text-4xl font-extrabold">