Image container variable considering image sizing

Owned by de Sousa Santos, Rodrigo
Last updated: May 02, 2023
2 min read

Questions:

  •  N/D

Technical Refinement

Description

  • intl-whitelabel-app

    • Task 1—Create feature flag

      • enable-resize-hero-component

    • Task 2—Create a method to resize hero component image

      • path: intl-whitelabel-app/workspaces/frontend/src/components/features/components/hero/hero-container.tsx

      • We will change the attribute objectFitContain on Picture component

      • before:

        const image = sanityImage && ( <Picture image={sanityImage} alt={imageAlt} objectFitContain /> );

      • after:

        const image = sanityImage && ( <Picture image={sanityImage} alt={imageAlt} objectFitContain={false} /> );

      • On file: intl-whitelabel-app/workspaces/frontend/src/components/picture/index.tsx, we will create a method to resize from hero image

        const resizeByHeight = useCallback( (img: ISanityImage | IImageFragment, sizeImage: { width: number; height: number }) => { const { dimensions } = parseAssetID(img?.asset?._id); const renderWidth = sizeImage.width; const renderHeight = Math.ceil(sizeImage.width * (dimensions.height / dimensions.width)); setSize({ width: renderWidth, height: renderHeight }); }, [] );

      • And on component return

      • before:

      • after:

      •  

  • ctg-components-library

    • Task 3—Create a new CSS attributes

      • path: ctg-components-library/src/components/hero/hero.styled.ts

        • Validate the value height on attribute ImageWrapper;

        • Validate the value height on @media ${mediaQuery.tablet};

        • Validate value height on @media ${mediaQuery.desktopLarge};

POC

  • N/A

Impact Analysis

  • Hero component

Dependencies

  • N/A

Unit Test

  • N/A

Useful Links