🐛 NICE-87 next/image w/h for quote [b] (#2287)

One image in particular was generating a warning on dev, and minified react error on prod.
JeromeFitz · Feb 29, 2024 · 39a3674 · 39a3674
1 parent 6328729
commit 39a3674
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/packages/shared/src/components/Notion/Blocks/Image.client.tsx b/packages/shared/src/components/Notion/Blocks/Image.client.tsx
@@ -33,8 +33,8 @@ function Image({ ...props }) {
     ...img,
   }
 
-  // // console.dir(`imageProps`)
-  // // console.dir(imageProps)
+  // console.dir(`imageProps`)
+  // console.dir(imageProps)
 
   // const testProps = {
   //   alt: imageProps.alt,
@@ -52,7 +52,7 @@ function Image({ ...props }) {
   return (
     <>
       <NextImage
-        className="flex w-full justify-center rounded-[var(--radius-3)]"
+        className="h-auto w-full rounded-[var(--radius-3)]"
         placeholder="blur"
         {...imageProps}
       />

diff --git a/sites/jeromefitzgerald.com/src/app/_components/Page.Home.tsx b/sites/jeromefitzgerald.com/src/app/_components/Page.Home.tsx
@@ -24,11 +24,12 @@ const image = {
   alt: 'Jerome is wearing a black suit, with a paper mâché head of Charles Entertainment Cheese Junior. A blue duct-tap cap with a yellow “C” resides between two giant rat (mouse?) ears with a cut-out for his face. He is standing pointing an accusatory finger at two poor seated schlubs about to incur his wrath. Due to his stance and finger pointing you cannot see his face under the paper mâché rat head and just see his right ear and side cheek. There is an empty pizza box on a chair behind him.',
   blurDataURL:
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAIAAABPmPnhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA1UlEQVR4nFWOwUrDQABEZ3az2e3awC6VpI3NHxS00KOXtpdKSiSo6bkKBW+evfgNlebuRezJP9EP6K94qJiK4LsNMzAP/I8gAcRJ//GpvsgXYJMPkPC+U17drZ+3m83reJz/FT+jLM2qavn5sasuyyTOJtPqt9bGAGjZdjG/qdd12nHvL2/Xi3sczoy1JI+i6HQwnA3Pi3m+/9qvbh+gtQYgVUDSO3fcPfFJ2ku73ruzwQham1ApIYWQsmWNixPrHNjYkBAUKgxFIAmqMLBRW0jJRpbkNwFLHj/O9IP8AAAAAElFTkSuQmCC',
-  className: 'rounded-[var(--radius-3)]',
+  // className: 'rounded-[var(--radius-3)]',
   height: 960,
   order: 0,
-  quality: 90,
-  // sizes: '(max-width: 768px) (max-width: 1280px) 61vw, 75vw',
+  // quality: 90,
+  sizes:
+    '(max-width: 768px) 90vw, (max-width: 1280px) 50vw, (max-width: 2560px) 61vw, 50vw',
   src: 'https://cdn.jeromefitzgerald.com/images/2020/01/jfle--2020--cec-jr--bob-shields.jpg',
   url: 'https://cdn.jeromefitzgerald.com/images/2020/01/jfle--2020--cec-jr--bob-shields.jpg',
   width: 1280,

diff --git a/sites/jeromefitzgerald.com/src/components/Quote/Quote.tsx b/sites/jeromefitzgerald.com/src/components/Quote/Quote.tsx
@@ -58,7 +58,7 @@ function Quote({ item }) {
               >
                 <Image
                   alt={`Logo for ${item.where}`}
-                  className="rounded-[var(--radius-full)]"
+                  className="h-auto w-[36px] rounded-[var(--radius-full)]"
                   height="36"
                   src={item.image}
                   width="36"