Add a script to resize the pictures for the blogposts page. Add the script in the package.json as prestart and prebuild. Update blogpostsDetails.json and BlogpostCard.tsx.

Author: HaudinFlorence

package-lock.json

@@ -9,6 +9,8 @@
   },
   "scripts": {
     "docusaurus": "docusaurus",
+    "prestart": "node scripts/resize-images.js",
+    "prebuild": "node scripts/resize-images.js.js",
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
@@ -33,7 +35,7 @@
     "clsx": "^2.0.0",
     "curl": "^0.1.4",
     "fs": "^0.0.1-security",
-    "image-size": "^1.1.1",
+    "image-size": "^1.2.1",
     "jimp": "^0.22.12",
     "js-yaml": "^4.1.0",
     "nodejs": "^0.0.0",
@@ -48,6 +50,7 @@
     "react-slick": "^0.30.2",
     "reactjs-popup": "^2.0.6",
     "request": "^2.88.2",
+    "sharp": "^0.34.2",
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
@@ -72,4 +75,4 @@
   "engines": {
     "node": "18.x"
   }
-}
+}

package.json

@@ -0,0 +1,33 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+const sizeOf = require('image-size');
+const inputDir = path.join(__dirname, '../static', 'img', 'blogposts', 'full-size-images');
+const outputDir = path.join(__dirname, '../static', 'img', 'blogposts', 'resized-images');
+const containerHeight = 180;
+const containerWidth = 273;
+
+if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+}
+
+fs.readdirSync(inputDir).forEach((file) => {
+    const inputPath = path.join(inputDir, file);
+    if (fs.existsSync(inputPath)) {
+        const dimensions = sizeOf(inputPath);
+
+        const aspectRatio = dimensions.width / dimensions.height;
+        const outputPath = path.join(outputDir, file);
+        let targetWidth;
+        if (aspectRatio <= 1.0) {
+            targetWidth = Math.round(containerHeight * aspectRatio);
+        } else {
+            targetWidth = Math.round(containerWidth) * 2;
+        }
+        if (/\.(png|jpg)$/i.test(file)) {
+            sharp(inputPath)
+                .resize({ width: targetWidth })
+                .toFile(outputPath)
+        }
+    }
+});

scripts/resize-images.js

@@ -32,8 +32,6 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
               <img
                 src={useBaseUrl(blogpost.image)}
                 id={blogpost.imageID}
-                width={blogpost.imageRenderedWidth}
-                height={blogpost.imageRenderedHeight}
                 alt={"Illustration for the blog post."}
               />
             </div>