Resize blog posts images

package.json

@@ -9,6 +9,8 @@
   },
   "scripts": {
     "docusaurus": "docusaurus",
+    "prestart": "node scripts/resize-images.js",
+    "prebuild": "node scripts/resize-images.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"
   }
-}
+}

scripts/resize-images.js

@@ -0,0 +1,49 @@
+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;
+const containerAspectRatio = containerWidth / containerHeight;
+console.log('container Aspect Ratio:', containerAspectRatio);
+
+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, targetHeight
+        let width;
+        if (aspectRatio <= containerAspectRatio) {
+            targetHeight = containerHeight
+            targetWidth = Math.round(targetHeight * aspectRatio);
+        } else {
+            targetWidth = containerWidth*2; /* factor 2 to increase the resolution*/
+            targetHeight = Math.round(targetWidth / aspectRatio);
+        }
+
+        // Check that the image fits within the container
+            if (targetWidth > containerWidth * 2) {
+                targetWidth = containerWidth * 2;
+                targetHeight = Math.round(targetWidth / aspectRatio);
+            }
+            if (targetHeight > containerHeight) {
+                targetHeight = containerHeight;
+                targetWidth = Math.round(targetHeight * aspectRatio);
+            }
+
+        if (/\.(png|jpg)$/i.test(file)) {
+            sharp(inputPath)
+                .resize(targetWidth, targetHeight)
+                .toFile(outputPath)
+        }
+    }
+});

src/components/blog/BlogpostCard.tsx

@@ -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>