Dev af astro

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hat-ring-components",
-	"version": "2.14.3",
+	"version": "2.14.4",
 	"description": "Head App Template - RING components",
 	"license": "MIT",
 	"repository": {},

src/components/common/RingImage.astro

@@ -7,7 +7,6 @@ import styles from "../../../styles/common/RingImage.module.scss";
 import {UtilsHelper_getExtension} from "../../helpers/UtilsHelper";
 import {AcceleratorImagesHelper_getUrl, TransformType} from "../../helpers/AcceleratorImagesHelper";
 import {RingImagePreload} from "./RingImagePreload";
-import {Astro} from "astro/env";
 
 export interface RingImageProps extends ImgHTMLAttributes<any> {
     transform?: TransformType,
@@ -43,6 +42,6 @@ if (isResizeable && transform !== TransformType.None) {
 ---
 {src &&
 <picture>
-    <Image {...props} loading={loading} fetchpriority={fetchpriority} src={src} class={['RingImage', styles.RingImage, props.class].join(' ')}/>
+    <Image {...props} alt={props.alt || ""} loading={loading} fetchpriority={fetchpriority} src={src} class={['RingImage', styles.RingImage, props.class].join(' ')}/>
 </picture>}
 {loading === 'eager' && <RingImagePreload src={src}/>}

src/components/widgets/Story/StoryMainImage/StoryMainImage.astro

@@ -5,45 +5,79 @@ import {StoryMainImage_getData} from "./StoryMainImageGetData";
 import React from 'react';
 import _ from 'lodash';
 import {StoryMainImageParams, StoryMainImageResponse} from "./types";
-import {RingImage} from "../../../common/RingImage";
+import RingImage from "../../../common/RingImage.astro";
 import {StoryMainImageCaption} from "./StoryMainImageCaption";
-import { StoryMainImageDescription } from "./StoryMainImageDescription";
+import {StoryMainImageDescription} from "./StoryMainImageDescription";
 import {
     WidgetHelper_getWidgetCssClasses
 } from "../../../../helpers/WidgetHelper";
 import {ImageHelper_getImageDimensionsFromObject} from "../../../../helpers/ImageHelper";
+import {UtilsHelper_convertToInt} from "../../../../helpers/UtilsHelper";
 
 const response = await StoryMainImage_getData({widgetConfig, context});
+
 const imageDimensions = ImageHelper_getImageDimensionsFromObject(widgetConfig, context);
-const imgSrc = _.get(response, 'data.story.image.url');
-const caption = _.get(response, 'data.story.image.caption');
+const croppedSrc = _.get(response, 'data.story.image.url');
+const originalSrc = _.get(response, 'data.story.image.image.url');
+const isCropped = !!_.get(response, 'data.story.image.crop');
+const imgSrc = isCropped ? croppedSrc : originalSrc;
+
+const caption = _.get(response, 'data.story.image.caption', "");
 const description = _.get(response, 'data.story.image.image.description');
+const keepAspectRatio = _.get(widgetConfig, 'keepAspectRatio', false);
+
+const maxImageWidth = UtilsHelper_convertToInt(imageDimensions.width);
+const maxImageHeight = UtilsHelper_convertToInt(imageDimensions.height);
+const originalImageWidth = UtilsHelper_convertToInt(response.data.story.image.image.width);
+const originalImageHeight = UtilsHelper_convertToInt(response.data.story.image.image.height);
+let imageWidth = originalImageWidth;
+let imageHeight = originalImageHeight;
+
+if (keepAspectRatio && imageWidth !== 0 && imageHeight !== 0) {
+    // Adjust height to maintain aspect ratio if max width is set and less than current width.
+    if (maxImageWidth && maxImageWidth < imageWidth) {
+        imageHeight = maxImageWidth * imageHeight / imageWidth;
+        imageWidth = maxImageWidth;
+    }
+
+    // Adjust width to maintain aspect ratio if max height is set and less than current height.
+    if (maxImageHeight && maxImageHeight < imageHeight) {
+        imageWidth = maxImageHeight * imageWidth / imageHeight;
+        imageHeight = maxImageHeight;
+    }
+} else {
+    imageWidth = maxImageWidth;
+    imageHeight = maxImageHeight;
+}
 ---
 
 <div class={WidgetHelper_getWidgetCssClasses('StoryMainImage', widgetConfig, context)}>
     {imgSrc && (
             <>
                 {widgetConfig.showLinkToImage ? (
-                        <a href={imgSrc} target="_blank" data-pswp-src={imgSrc} data-pswp-width={parseInt(imageDimensions.width as string) * 3} data-pswp-height={parseInt(imageDimensions.height as string) * 3}>
+                        <a href={imgSrc} target="_blank" data-pswp-src={imgSrc} data-pswp-width={originalImageWidth}
+                           data-pswp-height={originalImageHeight}>
                             <RingImage
                                     priority={true}
                                     src={imgSrc}
                                     alt={caption}
                                     transform={TransformType.ResizeCropAuto}
-                                    width={imageDimensions.width}
-                                    height={imageDimensions.height}/>
+                                    width={imageWidth}
+                                    height={imageHeight}/>
                         </a>
                 ) : (
                         <RingImage
                                 priority={true}
                                 src={imgSrc}
                                 alt={caption}
                                 transform={TransformType.ResizeCropAuto}
-                                width={imageDimensions.width}
-                                height={imageDimensions.height}/>
+                                width={imageWidth}
+                                height={imageHeight}/>
                 )}
-                {caption && <StoryMainImageCaption caption={caption}/>}
-                {description && <StoryMainImageDescription description={description}/>}
+                {caption &&
+                        <StoryMainImageCaption caption={caption}/>}
+                {description &&
+                        <StoryMainImageDescription description={description}/>}
             </>
     )}
 </div>

src/components/widgets/Story/StoryMainImage/StoryMainImageGetData.tsx

@@ -5,13 +5,19 @@ import {ImageHelper_getImageDimensionsFromObject} from "../../../../helpers/Imag
 
 export async function StoryMainImage_getData({widgetConfig, context}: StoryMainImageParams) {
     const query = gql`
-        query($storyId: UUID, $imageWidth:Int!, $imageHeight:Int!){
+        query($storyId: UUID){
             story(id:$storyId){
-                image{
-                    url(transforms:{resizeCropAuto:{width:$imageWidth,height:$imageHeight}}),
+                image {
+                url
                     caption
+                    crop {
+                        x
+                    }
                     image {
+                        url
                         description
+                        width
+                        height
                     }
                 }
             }

src/components/widgets/Story/StoryMainImage/StoryMainImageWebsitesConfig.ts

@@ -17,6 +17,7 @@ export let StoryMainImageWebsitesConfig
                 "standardImageSize": "920x500",
                 "imageSizeMobile": "450x253",
                 "showLinkToImage": "false",
+                "keepAspectRatio": "false",
                 "widgetType": "detailMainImage"
             },
             "paramsDescription": {
@@ -36,6 +37,11 @@ export let StoryMainImageWebsitesConfig
                     "type": "checkbox",
                     "description": "When checked, the image will link to the image page or open in a lightbox after proper configuration"
                 },
+                "keepAspectRatio": {
+                    "name": "Keep aspect ratio",
+                    "type": "checkbox",
+                    "description": "When checked, this ensures that the image maintains its original aspect ratio while fitting within the specified maximum dimensions"
+                },
                 "cacheTTL": {
                     "name": "Cache TTL",
                     "description": "Cache TTL in seconds",

src/components/widgets/Story/StoryMainImage/types.ts

@@ -4,10 +4,15 @@ export interface StoryMainImageResponse {
     "data": {
         "story": {
             "image": {
-                "url": string,
                 "caption": string | null
+                "crop": {
+                    x: number
+                },
                 "image": {
+                    "url": string,
                     "description": string | null
+                    "width": number
+                    "height": number
                 }
             }
         }