🎨 layout shift on news image

Author: BorghildSelle

web/core/Picture/Picture.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { SanityImageObject } from '@sanity/image-url'
 import type { ImageProps } from 'next/image'
 import { forwardRef } from 'react'
@@ -20,6 +21,11 @@ type PictureProps = {
    */
   mobileAspectRatio?: ImageRatioKeys
   figCaptionClassName?: string
+  figureClassName?: string
+  /** if figure caption should have the default px layouts
+   * @default true
+   */
+  withLayoutPx?: boolean
 } & Omit<ImageProps, 'src' | 'alt'>
 
 export const Picture = forwardRef<HTMLElement, PictureProps>(function Picture(
@@ -30,7 +36,9 @@ export const Picture = forwardRef<HTMLElement, PictureProps>(function Picture(
     caption,
     attribution,
     className = '',
+    figureClassName = '',
     figCaptionClassName = '',
+    withLayoutPx = true,
   },
   ref,
 ) {
@@ -47,16 +55,6 @@ export const Picture = forwardRef<HTMLElement, PictureProps>(function Picture(
   })
   console.log('desktopUrl', desktopUrl)
 
-  // Get props for the desktop image source
-  /*     const {
-      props: { srcSet: desktopSrcSet },
-    } = getImageProps({
-      alt: 'alt' in image && image.alt ? image.alt : '',
-      width,
-      height,
-      src: desktopUrl as string,
-    }) */
-
   const pictureElement = (
     <picture ref={ref} className={twMerge(`relative h-full w-full`, className)}>
       <source media='(min-width: 768px)' srcSet={desktopUrl} />
@@ -73,10 +71,10 @@ export const Picture = forwardRef<HTMLElement, PictureProps>(function Picture(
   )
 
   return caption || attribution ? (
-    <figure>
+    <figure className={figureClassName}>
       {pictureElement}
       <FigureCaption
-        withLayoutPx
+        withLayoutPx={withLayoutPx}
         className={figCaptionClassName}
         caption={caption}
         attribution={attribution}

web/sections/Hero/DefaultHero.tsx

@@ -1,6 +1,8 @@
+'use client'
 import type { PortableTextBlock } from '@portabletext/types'
 import type { HTMLAttributes, ReactNode } from 'react'
-import { Image, type ImageRatioKeys } from '@/core/Image/Image'
+import type { ImageRatioKeys } from '@/core/Image/Image'
+import { Picture } from '@/core/Picture/Picture'
 import { Typography } from '@/core/Typography'
 import { twMerge } from '@/lib/twMerge/twMerge'
 import Blocks from '@/portableText/Blocks'
@@ -85,7 +87,19 @@ export const DefaultHero = ({
         </div>
       </div>
       {figure && (
-        <Image
+        <Picture
+          image={figure.image}
+          desktopAspectRatio={ratio}
+          figCaptionClassName={figCaptionClassName}
+          caption={figure?.caption}
+          attribution={figure?.attribution}
+          figureClassName={twMerge(
+            `${isColorBg ? 'lg:-mt-news-banner-vertical' : ''} lg:px-layout-md`,
+            imageWrapperClassName,
+          )}
+          withLayoutPx={false}
+        />
+        /*         <Image
           grid='sm'
           loading='eager'
           className={twMerge(
@@ -98,7 +112,7 @@ export const DefaultHero = ({
           attribution={figure.attribution}
           imageClassName={twMerge(``, imageClassName)}
           figCaptionClassName={figCaptionClassName}
-        />
+        /> */
       )}
       {magazineTags && magazineTags?.length > 0 && (
         <MagazineTagBar tags={magazineTags} />

web/templates/news/News.tsx

@@ -107,7 +107,7 @@ const NewsPage = async ({
             ratio='21:9'
             subTitle={publishedInformation}
             imageWrapperClassName='lg:px-layout-md'
-            figCaptionClassName='light px-layout-sm lg:px-layout-lg'
+            figCaptionClassName='light'
           />
           {ingress && ingress.length > 0 && (
             <Blocks