Add fallback to JPG for gallery

ricktu288 · Oct 19, 2024 · e94711d · e94711d
1 parent 5589a9b
commit e94711d
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 15 deletions.
diff --git a/scripts/buildImages.js b/scripts/buildImages.js
@@ -104,11 +104,22 @@ function exportImageFromCropBox(cropBox, filename, skipLight, callback) {
     // Save the final image as avif
     sharp(canvasFinal.toBuffer())
       .avif()
-      .toFile(filename, (err, info) => {
+      .toFile(filename + '.avif', (err, info) => {
         if (err) {
           throw new Error(`Error processing image: ${err.message}`);
         }
-        callback();
+
+        // Also save the final image as jpg for compatibility, but reduce the size of the image to 50%
+        sharp(canvasFinal.toBuffer())
+          .resize(Math.round(canvasFinal.width / 2), Math.round(canvasFinal.height / 2))
+          .jpeg({ quality: 50 })
+          .toFile(filename + '.jpg', (err, info) => {
+            if (err) {
+              throw new Error(`Error processing image: ${err.message}`);
+            }
+
+            callback();
+          });
       });
   });
 }
@@ -143,7 +154,7 @@ function exportImages(itemId, lang, isThumbnail, callback) {
     const skipLight = lang !== 'en'; // Different languages only differs in text, so we only need to re-render the light layer for the first language in the list.
 
     // Export preview image
-    exportImageFromCropBox(isThumbnail ? cropBoxThumbnail : cropBoxPreview, dirs[lang] + itemId + (isThumbnail ? '-thumbnail.avif' : '.avif'), skipLight, function () {
+    exportImageFromCropBox(isThumbnail ? cropBoxThumbnail : cropBoxPreview, dirs[lang] + itemId + (isThumbnail ? '-thumbnail' : ''), skipLight, function () {
       callback();
     });
   });

diff --git a/src/webpages/cn/gallery/index-template-item.html b/src/webpages/cn/gallery/index-template-item.html
@@ -1,5 +1,8 @@
 <a href="{ID}" class="thumbnail example-container">
-  <img src="{ID}-thumbnail.avif" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <picture>
+    <source srcset="{ID}-thumbnail.avif" type="image/avif">
+    <img src="{ID}-thumbnail.jpg" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  </picture>
   <div class="caption">
     <p class="example-title">{TITLE}</p>
     <p class="example-contributor">{CONTRIBUTORS}</p>

diff --git a/src/webpages/cn/gallery/template.html b/src/webpages/cn/gallery/template.html
@@ -8,7 +8,7 @@
 <meta property="og:title" content="{TITLE} - 射线光学模拟">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://phydemo.app/ray-optics/cn/gallery/{ID}">
-<meta property="og:image" content="https://phydemo.app/ray-optics/cn/gallery/{ID}-thumbnail.avif">
+<meta property="og:image" content="https://phydemo.app/ray-optics/cn/gallery/{ID}.jpg">
   <meta property="og:description" content="自由、开源的网页程序，用于建立及模拟二维几何光学场景。">
 <meta property="og:locale" content="zh-CN">
 <link rel="canonical" href="https://phydemo.app/ray-optics/cn/gallery/{ID}">
@@ -47,7 +47,10 @@ <h1><b><span>{TITLE}</span></b></h1>
 <p>
 <a href="https://phydemo.app/ray-optics/simulator/?zh-CN#../cn/gallery/{ID}" target="_blank" class="btn btn-success btn-lg">在模拟器中打开</a>
 </p>
-<img src="{ID}.avif" alt="{ALT}" style="width:100%">
+<picture>
+  <source srcset="{ID}.avif" type="image/avif">
+  <img src="{ID}.jpg" alt="{ALT}" style="width:100%">
+</picture>
 </center>
 
   <div style="float: right; padding-top: 10px;">

diff --git a/src/webpages/gallery/index-template-item.html b/src/webpages/gallery/index-template-item.html
@@ -1,5 +1,8 @@
 <a href="{ID}" class="thumbnail example-container">
-  <img src="{ID}-thumbnail.avif" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <picture>
+    <source srcset="{ID}-thumbnail.avif" type="image/avif">
+    <img src="{ID}-thumbnail.jpg" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  </picture>
   <div class="caption">
     <p class="example-title">{TITLE}</p>
     <p class="example-contributor">{CONTRIBUTORS}</p>

diff --git a/src/webpages/gallery/template.html b/src/webpages/gallery/template.html
@@ -8,7 +8,7 @@
 <meta property="og:title" content="{TITLE} - Ray Optics Simulation">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://phydemo.app/ray-optics/gallery/{ID}">
-<meta property="og:image" content="https://phydemo.app/ray-optics/gallery/{ID}-thumbnail.avif">
+<meta property="og:image" content="https://phydemo.app/ray-optics/gallery/{ID}.jpg">
 <meta property="og:description" content="A free, open-source web app for creating and simulating 2D geometric optical scenes.">
 <meta property="og:locale" content="en">
 <link rel="canonical" href="https://phydemo.app/ray-optics/gallery/{ID}">
@@ -46,7 +46,10 @@ <h1><b><span>{TITLE}</span></b></h1>
 <p>
 <a href="https://phydemo.app/ray-optics/simulator/#{ID}" target="_blank" class="btn btn-success btn-lg">Open in Simulator</a>
 </p>
-<img src="{ID}.avif" alt="{ALT}" style="width:100%">
+<picture>
+  <source srcset="{ID}.avif" type="image/avif">
+  <img src="{ID}.jpg" alt="{ALT}" style="width:100%">
+</picture>
 </center>
 
   <div style="float: right; padding-top: 10px;">

diff --git a/src/webpages/pl/gallery/index-template-item.html b/src/webpages/pl/gallery/index-template-item.html
@@ -1,5 +1,8 @@
 <a href="{ID}" class="thumbnail example-container">
-  <img src="{ID}-thumbnail.avif" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <picture>
+    <source srcset="{ID}-thumbnail.avif" type="image/avif">
+    <img src="{ID}-thumbnail.jpg" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  </picture>
   <div class="caption">
     <p class="example-title">{TITLE}</p>
     <p class="example-contributor">{CONTRIBUTORS}</p>

diff --git a/src/webpages/pl/gallery/template.html b/src/webpages/pl/gallery/template.html
@@ -8,7 +8,7 @@
 <meta property="og:title" content="{TITLE} - Symulacja promieni optycznych">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://phydemo.app/ray-optics/pl/gallery/{ID}">
-<meta property="og:image" content="https://phydemo.app/ray-optics/pl/gallery/{ID}-thumbnail.avif">
+<meta property="og:image" content="https://phydemo.app/ray-optics/pl/gallery/{ID}.jpg">
 <meta property="og:description" content="Aplikacja internetowa open source umożliwiająca symulację odbicia i załamania światła.">
 <meta property="og:locale" content="pl">
 <link rel="canonical" href="https://phydemo.app/ray-optics/pl/gallery/{ID}">
@@ -46,7 +46,10 @@ <h1><b><span>{TITLE}</span></b></h1>
 <p>
 <a href="https://phydemo.app/ray-optics/simulator/?pl#../pl/gallery/{ID}" target="_blank" class="btn btn-success btn-lg">Otwórz w symulatorze</a>
 </p>
-<img src="{ID}.avif" alt="{ALT}" style="width:100%">
+<picture>
+  <source srcset="{ID}.avif" type="image/avif">
+  <img src="{ID}.jpg" alt="{ALT}" style="width:100%">
+</picture>
 </center>
 
   <div style="float: right; padding-top: 10px;">

diff --git a/src/webpages/tw/gallery/index-template-item.html b/src/webpages/tw/gallery/index-template-item.html
@@ -1,5 +1,8 @@
 <a href="{ID}" class="thumbnail example-container">
-  <img src="{ID}-thumbnail.avif" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <picture>
+    <source srcset="{ID}-thumbnail.avif" type="image/avif">
+    <img src="{ID}-thumbnail.jpg" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  </picture>
   <div class="caption">
     <p class="example-title">{TITLE}</p>
     <p class="example-contributor">{CONTRIBUTORS}</p>

diff --git a/src/webpages/tw/gallery/template.html b/src/webpages/tw/gallery/template.html
@@ -8,7 +8,7 @@
 <meta property="og:title" content="{TITLE} - 線光學模擬">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://phydemo.app/ray-optics/tw/gallery/{ID}">
-<meta property="og:image" content="https://phydemo.app/ray-optics/tw/gallery/{ID}-thumbnail.avif">
+<meta property="og:image" content="https://phydemo.app/ray-optics/tw/gallery/{ID}.jpg">
   <meta property="og:description" content="自由、開源的網頁程式，用於建立及模擬平面幾何光學場景。">
 <meta property="og:locale" content="zh-TW">
 <link rel="canonical" href="https://phydemo.app/ray-optics/tw/gallery/{ID}">
@@ -47,7 +47,10 @@ <h1><b><span>{TITLE}</span></b></h1>
 <p>
 <a href="https://phydemo.app/ray-optics/simulator/?zh-TW#../tw/gallery/{ID}" target="_blank" class="btn btn-success btn-lg">在模擬器中開啟</a>
 </p>
-<img src="{ID}.avif" alt="{ALT}" style="width:100%">
+<picture>
+  <source srcset="{ID}.avif" type="image/avif">
+  <img src="{ID}.jpg" alt="{ALT}" style="width:100%">
+</picture>
 </center>
 
   <div style="float: right; padding-top: 10px;">