Fix image service ratio.

Author: nikoshell

src/image.service.ts

@@ -220,8 +220,9 @@ const service: LocalImageService = {
       inferSize?: boolean;
     }
   ): Promise<{ data: Uint8Array; format: ImageOutputFormat }> {
+    const sharp = (await import("sharp")).default;
     const MAX_WIDTH = 1280;
-    const MAX_HEIGHT = 720;
+    const MAX_HEIGHT = 1280;
     let buffer = inputBuffer;
 
     if (/^https?:\/\//.test(transform.src)) {
@@ -236,30 +237,51 @@ const service: LocalImageService = {
       }
     }
 
-    let width = transform.width
-      ? Math.min(transform.width, MAX_WIDTH)
-      : undefined;
-    let height = transform.height
-      ? Math.min(transform.height, MAX_HEIGHT)
-      : undefined;
+    let width = transform.width;
+    let height = transform.height;
 
-    if (!transform.width || !transform.height) {
-      try {
-        const sharp = (await import("sharp")).default;
-        const metadata = await sharp(buffer).metadata();
-        if (!width && metadata.width) {
-          width = metadata.width;
-        }
-        if (!height && metadata.height) {
-          height = metadata.height;
+    try {
+      const metadata = await sharp(buffer).metadata();
+
+      width = metadata.width;
+      height = metadata.height;
+
+      // Ensure width and height are both defined before calculating aspect ratio
+      if (metadata.width && metadata.height) {
+        const aspectRatio = metadata.width / metadata.height;
+
+        // Resize the image while maintaining the aspect ratio and ensuring it fits within the 1280x1280 square
+        if (width) {
+          // If only width is defined, calculate the height to maintain the aspect ratio
+          height = Math.round(width / aspectRatio);
+          if (height > MAX_HEIGHT) {
+            height = MAX_HEIGHT;
+            width = Math.round(height * aspectRatio);
+          }
+        } else if (height) {
+          // If only height is defined, calculate the width to maintain the aspect ratio
+          width = Math.round(height * aspectRatio);
+          if (width > MAX_WIDTH) {
+            width = MAX_WIDTH;
+            height = Math.round(width / aspectRatio);
+          }
+        } else {
+          // If neither width nor height is defined, ensure the image fits within the max width and height
+          if (metadata.width > metadata.height) {
+            width = Math.min(metadata.width, MAX_WIDTH);
+            height = Math.round(width / aspectRatio);
+          } else {
+            height = Math.min(metadata.height, MAX_HEIGHT);
+            width = Math.round(height * aspectRatio);
+          }
         }
-      } catch (err) {
-        console.warn(`Error inferring image size: ${err}`);
       }
+    } catch (err) {
+      console.warn(`Error inferring image size: ${err}`);
     }
 
+    // Proceed with resizing and transformation
     try {
-      const sharp = (await import("sharp")).default;
       let image = sharp(buffer, { failOn: "none" });
       image = image.resize(width, height);
 
@@ -277,6 +299,7 @@ const service: LocalImageService = {
     } catch (err) {
       console.warn(`⚠️ Error processing image: ${transform.src}`, err);
 
+      // Handle fallback
       try {
         const placeholderBuffer = await createPlaceholderImage(
           transform.width || 400,

src/pages/speaker/[slug].astro

@@ -16,13 +16,12 @@ export async function getStaticPaths() {
 }
 
 const {entry} = Astro.props;
-console.log(entry.data.avatar);
 
 let avatar: any;
 
 if (entry.data.avatar){
   try {
-    avatar = getImage({ src: entry.data.avatar, alt: 'User avatar' });
+    avatar = await getImage({ src: entry.data.avatar, inferSize: true, format: "webp", alt: 'User avatar' });
   } catch (e) {
     //TODO: improve placeholders and offline
     //avatar = await getImage({ src: 'https://placehold.co/600x400?text=x', width: '600', height:'400', alt: 'Default avatar' });
@@ -91,7 +90,7 @@ function ensureHttps(str: string): string {
       (entry.data.avatar &&
         <div class="border-4 border-white rounded-lg shadow-lg inline-block mb-10">
           <Picture
-            src={avatar}
+            src={avatar.src}
             alt={entry.data.name}
             inferSize={true}
             widths={[400, 800, 1200]}