Updated home page image dimensions.

Author: moonstar-x

src/app/page.tsx

@@ -20,6 +20,7 @@ const HomePage = async () => {
     <Fragment>
       <ImageGallery
         className="mb-4"
+        maxHeight="400px"
         images={homePage?.data?.attributes?.imageGallery.images}
       />
       <TextCard

src/components/cms/common/imageGallery/ImageGallery.tsx

@@ -8,6 +8,7 @@ import { StrapiImage } from '@components/cms/utils/strapiImage';
 
 interface Props {
   className?: string
+  maxHeight?: string
   images?: Maybe<{
     data: {
       attributes: Maybe<{
@@ -20,7 +21,7 @@ interface Props {
   }>
 }
 
-export const ImageGallery: React.FC<Props> = ({ className, images }) => {
+export const ImageGallery: React.FC<Props> = ({ className, maxHeight, images }) => {
   if (!images || !images.data.length) {
     return null;
   }
@@ -48,8 +49,9 @@ export const ImageGallery: React.FC<Props> = ({ className, images }) => {
           images.data.map((image, idx) => image && (
             <div key={idx} className="w-100">
               <StrapiImage
-                className="w-100 h-100 object-fit-cover"
+                className="w-100 h-100 object-fit-contain"
                 loading={idx === 0 ? 'eager' : 'lazy'}
+                style={{ maxHeight }}
                 {...image.attributes}
               />
             </div>

src/components/cms/common/textImageColumn/TextImageColumn.tsx

@@ -37,7 +37,7 @@ export const TextImageColumn: React.FC<Props> = ({ className, id, text, image, f
       <div className="w-100 d-flex align-items-center justify-content-center">
         {
           image && (
-            <StrapiImage className="w-100 object-fit-cover" {...image.data?.attributes} />
+            <StrapiImage className="w-100 h-auto object-fit-contain" {...image.data?.attributes} />
           )
         }
       </div>

src/components/cms/utils/strapiImage/StrapiImage.tsx

@@ -5,6 +5,7 @@ import { getStrapiMedia } from '@lib/services/strapi/utils/media';
 
 interface Props {
   className?: string
+  style?: React.CSSProperties
   loading?: 'eager' | 'lazy'
 
   url?: string
@@ -13,7 +14,7 @@ interface Props {
   height?: Maybe<number>
 }
 
-export const StrapiImage: React.FC<Props> = ({ className, loading, url, alternativeText, width, height }) => {
+export const StrapiImage: React.FC<Props> = ({ className, style, loading, url, alternativeText, width, height }) => {
   const imageUrl = getStrapiMedia(url);
   const altText = alternativeText || 'image';
 
@@ -27,6 +28,7 @@ export const StrapiImage: React.FC<Props> = ({ className, loading, url, alternat
   return (
     <Image
       className={className}
+      style={style}
       loading={loading}
       src={imageUrl}
       alt={altText}