feat: add supports for responsive image (#172)

适配 Halo 2.19，支持响应式图片。 /kind feature ```release-note 适配 Halo 2.19，支持响应式图片。 ```
halo-dev · Sep 4, 2024 · 65fbbee · 65fbbee
1 parent 118d19e
commit 65fbbee
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 1 deletion.
diff --git a/templates/modules/featured-post-card.html b/templates/modules/featured-post-card.html
@@ -7,6 +7,11 @@
       <img
         th:src="${post.spec.cover}"
         th:alt="${post.spec.title}"
+        th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w,
+                    ${thumbnail.gen(post.spec.cover, 'm')} 800w,
+                    ${thumbnail.gen(post.spec.cover, 'l')} 1200w,
+                    ${thumbnail.gen(post.spec.cover, 'xl')} 1600w|"
+        sizes="(max-width: 1600px) 100vw, 1600px"
         class="size-full object-cover transition-all duration-500"
       />
     </a>

diff --git a/templates/modules/post-card.html b/templates/modules/post-card.html
@@ -12,6 +12,10 @@
       <img
         th:src="${post.spec.cover}"
         th:alt="${post.spec.title}"
+        th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w,
+                    ${thumbnail.gen(post.spec.cover, 'm')} 800w,
+                    ${thumbnail.gen(post.spec.cover, 'l')} 1200w|"
+        sizes="(max-width: 1200px) 100vw, 1200px"
         class="size-full object-cover transition-all duration-500"
         th:classappend="${animation} ? 'group-hover:scale-105'"
       />

diff --git a/templates/moments.html b/templates/moments.html
@@ -58,6 +58,10 @@ <h1 class="mb-9 text-2xl font-medium dark:text-slate-50">瞬间</h1>
                     th:if="${#strings.equals(media.type,'PHOTO')}"
                     class="transform-gpu rounded-lg object-cover"
                     th:src="${media.url}"
+                    th:srcset="|${thumbnail.gen(media.url, 's')} 400w,
+                                ${thumbnail.gen(media.url, 'm')} 800w,
+                                ${thumbnail.gen(media.url, 'l')} 1200w|"
+                    sizes="(max-width: 1200px) 100vw, 1200px"
                   />
                   <div
                     th:if="${#strings.equals(media.type,'VIDEO')}"

diff --git a/templates/photos.html b/templates/photos.html
@@ -34,6 +34,10 @@ <h1 class="mb-9 text-2xl font-medium dark:text-slate-50">图库</h1>
           <img
             class="animated fadeIn transform-gpu rounded-lg transition-all"
             th:src="${photo.spec.url}"
+            th:srcset="|${thumbnail.gen(photo.spec.url, 's')} 400w,
+                        ${thumbnail.gen(photo.spec.url, 'm')} 800w,
+                        ${thumbnail.gen(photo.spec.url, 'l')} 1200w|"
+            sizes="(max-width: 1200px) 100vw, 1200px"
             th:alt="${photo.spec.displayName}"
           />
         </div>

diff --git a/theme.yaml b/theme.yaml
@@ -19,7 +19,7 @@ spec:
   settingName: "theme-earth-setting"
   configMapName: "theme-earth-configMap"
   version: 1.9.1
-  requires: ">=2.8.0"
+  requires: ">=2.19.0"
   license:
     - name: "GPL-3.0"
       url: "https://github.com/halo-dev/theme-earth/blob/main/LICENSE"