Img Sizes

triptvn · Nov 5, 2020 · c419c3f · c419c3f
1 parent 3b5ac2d
commit c419c3f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
@@ -14,6 +14,7 @@ interface Props {
   imgWidth: number | string
   imgHeight: number | string
   priority?: boolean
+  imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
 }
 
 const ProductCard: FC<Props> = ({
@@ -22,6 +23,7 @@ const ProductCard: FC<Props> = ({
   variant,
   imgWidth,
   imgHeight,
+  imgLayout = 'responsive',
   priority,
 }) => {
   const src = p.images.edges?.[0]?.node?.urlOriginal!
@@ -50,6 +52,7 @@ const ProductCard: FC<Props> = ({
               height={imgHeight}
               priority={priority}
               quality="85"
+              layout={imgLayout}
             />
           </div>
         ) : (

diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css
@@ -8,7 +8,7 @@
 
   & > * {
     @apply flex-1 px-16 py-4;
-    width: 450px;
+    width: 430px;
   }
 }
 

diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    sizes: [320, 480, 820, 1200, 1600],
+    imagesSizes: [320, 480, 820, 1200, 1600],
     domains: ['cdn11.bigcommerce.com'],
   },
   i18n: {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -97,6 +97,7 @@ export default function Home({
             variant="slim"
             imgWidth={320}
             imgHeight={320}
+            imgLayout="fixed"
           />
         ))}
       </Marquee>
@@ -129,6 +130,7 @@ export default function Home({
             variant="slim"
             imgWidth={320}
             imgHeight={320}
+            imgLayout="fixed"
           />
         ))}
       </Marquee>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
       & > * {
         @apply flex-1 px-16 py-4;
-        width: 450px;
+        width: 430px;
       }
     }
@@ Expand Down @@