Merge branch 'bose/2290' into staging

equinor · Jun 18, 2024 · 9c06465 · 9c06465
2 parents bd53b56 + 0023639
commit 9c06465
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/sanityv3/schemas/documents/header/sharedHeaderFields.ts b/sanityv3/schemas/documents/header/sharedHeaderFields.ts
@@ -111,9 +111,9 @@ const heroRatio = {
   type: 'string',
   options: {
     list: [
-      { title: '2:1', value: '0.5' },
+      { title: 'Tall', value: 'tall' },
+      { title: '2:1(deprecated)', value: '0.5' },
       { title: 'Narrow', value: 'narrow' },
-      { title: 'Full screen', value: 'fullScreen' },
     ],
   },
   hidden: ({ parent }: DocumentType) => {

diff --git a/web/pageComponents/shared/Hero/FullImageHero.tsx b/web/pageComponents/shared/Hero/FullImageHero.tsx
@@ -19,14 +19,14 @@ const imageSizes = '100vw'
 const FullScreenHero = ({ figure }: FullImageHeroType) => {
   return (
     <ImgWrapper>
-      <Image maxWidth={4096} image={figure.image} fill sizes={imageSizes} priority />
+      <Image maxWidth={2560} image={figure.image} fill sizes={imageSizes} priority />
     </ImgWrapper>
   )
 }
 
 const NarrowHero = ({ figure }: FullImageHeroType) => {
   // 4:3 for small screens and 10:3 for large screens
-  const desktopUrl = useSanityLoader(figure.image, 4096, Ratios.THREE_TO_TEN)
+  const desktopUrl = useSanityLoader(figure.image, 2560, Ratios.THREE_TO_TEN)
 
   // Using picture with mobile and dekstop source to avoid initial load layout shift between aspect ratio
   return (
@@ -36,11 +36,18 @@ const NarrowHero = ({ figure }: FullImageHeroType) => {
     </picture>
   )
 }
+const TallHero = ({ figure }: FullImageHeroType) => {
+  return (
+    <div className="relative w-full h-[53dvh] lg:h-[65dvh] 4xl:h-[67dvh]">
+      <Image maxWidth={2560} fill aspectRatio={Ratios.FOUR_TO_FIVE} image={figure.image} sizes={imageSizes} priority />
+    </div>
+  )
+}
 
 const RatioHero = ({ ratio, figure }: FullImageHeroType) => {
   return (
     <Image
-      maxWidth={4096}
+      maxWidth={2560}
       aspectRatio={Number(ratio) || Ratios.ONE_TO_TWO}
       image={figure.image}
       sizes={imageSizes}
@@ -57,6 +64,8 @@ export const FullImageHero = ({ ratio, figure, hideImageCaption, captionBg }: He
           return <FullScreenHero figure={figure} />
         case 'narrow':
           return <NarrowHero figure={figure} />
+        case 'tall':
+          return <TallHero figure={figure} />
         default:
           return <RatioHero figure={figure} ratio={ratio} />
       }

diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
@@ -33,6 +33,7 @@ module.exports = {
     extend: {
       screens: {
         '3xl': '1600px',
+        '4xl': '1920px',
       },
       colors: ({ theme }) => ({
         current: 'currentColor',