People: update the gallery to make photos responsive

content/people/gallery.md

@@ -14,11 +14,14 @@ Below are some of our group photos:star:
 <!-- Vertical timeline gallery -->
 <div class="people-gallery-timeline">
 <div class="people-gallery-item">
-		{{< figure src="/media/group-photos/group-2025-1.png" >}}
-		{{< figure src="/media/group-photos/group-2025-2.png" caption="December 2025, by Sun Changsheng" >}}
+		{{< responsive-figure src="media/group-photos/group-2025-1.jpg" >}}
+		{{< responsive-figure src="media/group-photos/group-2025-2.jpg" caption="December 2025, by <a href=\"https://sunchangsheng.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Sun Changsheng</a>" >}}
 </div>
 <div class="people-gallery-item">
-		{{< figure src="/media/group-photos/group-2024-1.jpg" >}}
-		{{< figure src="/media/group-photos/group-2024-2.jpg" caption="2024, by Sun Changsheng" >}}
+		{{< responsive-figure src="media/group-photos/group-2024-1.jpg" >}}
+		{{< responsive-figure src="media/group-photos/group-2024-2.jpg" caption="October 2024, by <a href=\"https://sunchangsheng.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Sun Changsheng</a>" >}}
+</div>
+<div class="people-gallery-item">
+		{{< responsive-figure src="media/group-photos/group-2022.jpg" caption="2022" >}}
 </div>
 </div>

layouts/shortcodes/responsive-figure.html

@@ -0,0 +1,44 @@
+{{/* Responsive figure shortcode with Hugo image processing */}}
+{{- $src := .Get "src" -}}
+{{- $caption := .Get "caption" -}}
+{{- $alt := .Get "alt" | default $caption -}}
+
+{{- $image := resources.Get $src -}}
+
+{{- if $image -}}
+  {{/* Generate multiple sizes for responsive images */}}
+  {{- $small := $image.Resize "400x q80" -}}
+  {{- $medium := $image.Resize "800x q80" -}}
+  {{- $large := $image.Resize "1200x q85" -}}
+  {{- $xlarge := $image.Resize "1600x q85" -}}
+
+  <figure class="responsive-figure">
+    <a href="{{ $image.RelPermalink }}" target="_blank" rel="noopener" class="responsive-figure-link">
+      <img 
+        src="{{ $medium.RelPermalink }}"
+        srcset="{{ $small.RelPermalink }} 400w,
+                {{ $medium.RelPermalink }} 800w,
+                {{ $large.RelPermalink }} 1200w,
+                {{ $xlarge.RelPermalink }} 1600w"
+        sizes="(max-width: 480px) 400px,
+               (max-width: 768px) 800px,
+               (max-width: 1200px) 1200px,
+               1600px"
+        alt="{{ $alt }}"
+        loading="lazy"
+        decoding="async"
+      >
+    </a>
+    {{- if $caption -}}
+    <figcaption>{{ $caption | safeHTML }}</figcaption>
+    {{- end -}}
+  </figure>
+{{- else -}}
+  {{/* Fallback if image not found in assets */}}
+  <figure class="responsive-figure">
+    <img src="{{ $src }}" alt="{{ $alt }}" loading="lazy">
+    {{- if $caption -}}
+    <figcaption>{{ $caption | safeHTML }}</figcaption>
+    {{- end -}}
+  </figure>
+{{- end -}}

static/css/gallery.css

@@ -95,6 +95,45 @@
   }
 }
 
+/* Responsive figure shortcode styles */
+.responsive-figure {
+  margin: 0 0 1rem 0;
+}
+
+.responsive-figure-link {
+  display: block;
+  cursor: zoom-in;
+}
+
+.responsive-figure img {
+  border-radius: 0.5rem;
+  width: 100%;
+  height: auto;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.responsive-figure img:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.responsive-figure figcaption {
+  text-align: center;
+  margin-top: 0.5rem;
+  font-size: 0.95rem;
+  color: #555;
+}
+
+.responsive-figure figcaption a {
+  color: #3182ce;
+  text-decoration: none;
+}
+
+.responsive-figure figcaption a:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 768px) {
   .people-gallery-timeline { padding-left: 1.3rem; }
   .people-gallery-item:before { left: -0.85rem; }