From 6620e2ae053c98fbd5bbb4b3be62a98157dbc737 Mon Sep 17 00:00:00 2001 From: chriszarate Date: Tue, 3 Jan 2023 13:16:41 -0600 Subject: [PATCH] Update Image component to match next/image updates --- components/Blocks/ImageBlock/ImageBlock.tsx | 6 ++-- components/Image/Image.test.tsx | 8 +++--- components/Image/Image.tsx | 27 +++++++++-------- next.config.js | 3 +- pages/media/index.module.css | 5 ++++ pages/media/index.tsx | 32 +++++---------------- styles/new.css | 7 +++-- 7 files changed, 40 insertions(+), 48 deletions(-) diff --git a/components/Blocks/ImageBlock/ImageBlock.tsx b/components/Blocks/ImageBlock/ImageBlock.tsx index bdb11fa..c2f5db3 100644 --- a/components/Blocks/ImageBlock/ImageBlock.tsx +++ b/components/Blocks/ImageBlock/ImageBlock.tsx @@ -2,10 +2,12 @@ import { BlockProps } from '../index'; import Image from '@/components/Image/Image'; type Props = BlockProps & { - src: string, alt: string, + src: string, }; export default function ImageBlock ( props : Props ) { - return {props.alt} + const { block: _omit, ...imageProps } = props; + + return {props.alt} } diff --git a/components/Image/Image.test.tsx b/components/Image/Image.test.tsx index 3c62caf..4369a11 100644 --- a/components/Image/Image.test.tsx +++ b/components/Image/Image.test.tsx @@ -11,7 +11,7 @@ describe( 'Image', () => { describe( 'with a WordPress image URL', () => { const src = '/wp-content/uploads/you-otter-see-this.jpg'; - it( 'renders an img with a placeholder `src`', () => { + it( 'uses native lazy-loading', () => { render( {altText} { const image = screen.getByRole( 'img' ); expect( image ).toBeInTheDocument(); - expect( image.getAttribute( 'src' ).startsWith( 'data:image/' ) ).toBe( true ); + expect( image.getAttribute( 'loading' ) ).toEqual( 'lazy' ); } ); it( 'has its `src` transformed by the image loader when loaded', () => { @@ -63,7 +63,7 @@ describe( 'Image', () => { describe( 'with a non-WordPress image URL', () => { const src = '/you-otter-see-this.jpg'; - it( 'renders an img with a placeholder `src`', () => { + it( 'uses native lazy-loading', () => { render( {altText} { const image = screen.getByRole( 'img' ); expect( image ).toBeInTheDocument(); - expect( image.getAttribute( 'src' ).startsWith( 'data:image/' ) ).toBe( true ); + expect( image.getAttribute( 'loading' ) ).toEqual( 'lazy' ); } ); it( 'has its `src` transformed by the default Next.js image loader when loaded', () => { diff --git a/components/Image/Image.tsx b/components/Image/Image.tsx index 51f6411..a3bca7a 100644 --- a/components/Image/Image.tsx +++ b/components/Image/Image.tsx @@ -22,20 +22,18 @@ function wpImageLoader ( { quality, src, width }: ImageLoaderProps ): string { } export default function Image ( props: Props ) { - const imageProps = { - ...props, - srcSet: props.srcset || undefined, - src: props.src, - alt: props.alt, - width: props.width || props.originalWidth, - height: props.height || props.originalHeight, - layout: props.layout || (props.width && props.height ? 'fixed' as const : 'intrinsic' as const), - }; + const { originalHeight, originalWidth, ...imageProps } = props; + const height = props.height || originalHeight; + const width = props.width || originalWidth; - if ( VipConfig.images.useHtmlTag && imageProps.srcSet ) { + if ( VipConfig.images.useHtmlTag && props.srcset ) { return ( // eslint-disable-next-line @next/next/no-img-element - {imageProps.alt} + {props.alt} ); } @@ -47,6 +45,11 @@ export default function Image ( props: Props ) { } return ( - + ); } diff --git a/next.config.js b/next.config.js index 5c6bcda..ce2f6ab 100644 --- a/next.config.js +++ b/next.config.js @@ -161,8 +161,7 @@ module.exports = { images: { // If you know the expected device widths of your users, you can specify a // list of device width breakpoints using the deviceSizes property here. - // These widths are used when the next/image component uses layout="responsive" - // or layout="fill" to ensure the correct image is served for user's device. + // These widths are used to help the next/image component generate srcsets. deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], // The reason there are two separate lists is that imageSizes is only used // for images which provide a sizes prop, which indicates that the image diff --git a/pages/media/index.module.css b/pages/media/index.module.css index 6ca1a6b..8526a64 100644 --- a/pages/media/index.module.css +++ b/pages/media/index.module.css @@ -6,9 +6,14 @@ } .image { + object-fit: cover; +} + +.image-link { background-color: #ccc; border: solid 1px #000; display: block; height: 100px; + overflow: hidden; position: relative; } diff --git a/pages/media/index.tsx b/pages/media/index.tsx index 1061052..70ffa66 100644 --- a/pages/media/index.tsx +++ b/pages/media/index.tsx @@ -26,43 +26,25 @@ export default function Media( props: Props ) { const { altText = '', id, - mediaDetails: { - height, - width, - }, sourceUrl, } = mediaItem; // Each image is displayed in a fixed-height box of 100px. If the // actual height of the image is less than 100px, then use - // layout=fill and objectFit to fill the box. return ( - { - height < 100 - ? - {altText} - : - {altText} - } + {altText} ); } ) diff --git a/styles/new.css b/styles/new.css index d253661..c5ef1cc 100644 --- a/styles/new.css +++ b/styles/new.css @@ -173,7 +173,7 @@ header { background: var(--nc-bg-2); border-bottom: 1px solid var(--nc-bg-3); padding: 2rem 1.5rem; - + /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */ margin: -2rem calc(0px - (50vw - 50%)) 2rem; @@ -185,7 +185,7 @@ header { margin-left: calc(0px - (50vw - 50%)); margin-right: calc(0px - (50vw - 50%)); */ - + padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); } @@ -428,5 +428,6 @@ input { } img { + height: auto; max-width: 100%; -} \ No newline at end of file +}