Merge pull request #412 from WebDevStudios/hotfix/fix-image-error

hotfix/fix-image-error
WebDevStudios · Jun 1, 2021 · 296d829 · 296d829 · vercel · Jun 1, 2021
2 parents 8b9690e + 2090538
commit 296d829
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/components/molecules/ImageGallery/ImageGallery.js b/components/molecules/ImageGallery/ImageGallery.js
@@ -1,4 +1,4 @@
-import Image from '@/components/atoms/Image'
+import DisplayImage from '@/components/atoms/Image'
 import RichText from '@/components/atoms/RichText'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
@@ -31,11 +31,13 @@ export default function ImageGallery({
           <div className={cn(styles.wrap, styles[`columns-${columns}`])}>
             {images.map((image, index) => {
               return (
-                <Image
+                <DisplayImage
+                  className={styles.imageWrap}
                   key={index}
-                  url={image.url}
                   alt={image.alt}
                   id={image.id}
+                  imageMeta={{mediaItemUrl: image.url, altText: image.alt}}
+                  nextImageFill={true}
                 />
               )
             })}

diff --git a/components/molecules/ImageGallery/ImageGallery.module.css b/components/molecules/ImageGallery/ImageGallery.module.css
@@ -19,7 +19,7 @@
     }
 
     &.columns-3 {
-      @apply grid-cols-4;
+      @apply grid-cols-3;
     }
 
     &.columns-4 {
@@ -37,6 +37,16 @@
     & > div {
       @apply self-center;
     }
+
+    & .imageWrap {
+      @apply relative h-0 w-full;
+
+      padding-top: 67.58%; /* Aspect ratio box - https://css-tricks.com/aspect-ratio-boxes */
+    }
+
+    & img {
+      @apply absolute top-0 left-0 w-full h-full object-cover;
+    }
   }
 
   & .caption {

diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
@@ -1,5 +1,5 @@
 import Button from '@/components/atoms/Button'
-import Image from '@/components/atoms/Image'
+import DisplayImage from '@/components/atoms/Image'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React, {useEffect} from 'react'
@@ -65,9 +65,12 @@ export default function MediaText({
       </div>
       <div className={styles.media}>
         {image && image.url && (
-          <div className={styles.imageWrap}>
-            <Image url={image.url} alt={image.alt} />
-          </div>
+          <DisplayImage
+            className={styles.imageWrap}
+            alt={image.alt}
+            imageMeta={{mediaItemUrl: image.url, altText: image.alt}}
+            nextImageFill={true}
+          />
         )}
       </div>
     </section>