Add custom aspect ratio param to LazyImage

cher-ami · Oct 15, 2024 · 76ed1a3 · 76ed1a3
1 parent f51c519
commit 76ed1a3
Show file tree

Hide file tree

Showing 3 changed files with 214 additions and 161 deletions.
diff --git a/apps/front/src/components/lazyImage/LazyImage.tsx b/apps/front/src/components/lazyImage/LazyImage.tsx
@@ -9,6 +9,7 @@ interface IProps {
   className?: string
   alt?: string
   style?: CSSProperties
+  aspectRatio?: string // ex: "16/9" "4/3"
   width: number
   height: number
   onLoaded?: (img: HTMLImageElement) => void
@@ -18,6 +19,8 @@ export type Lazy = "lazyload" | "lazyloading" | "lazyloaded"
 
 /**
  * @name LazyImage
+ * @description Lazy load image component with srcset and src fallback
+ * @example <LazyImage dataSrcSet="image-600 600w, image-800 800w, image-1024 1024w" src="image-800" alt="image" width={800} height={600} aspectRatio={"4 / 3"} />
  */
 function LazyImage(props: IProps) {
   const imageRef = useRef<HTMLImageElement>(null)
@@ -31,8 +34,7 @@ function LazyImage(props: IProps) {
     new Promise((resolve) => {
       const dataSrc = image.dataset.src
       const dataSrcSet = image.dataset.srcset
-      // create void image tag for start preload
-      // const img = document.createElement("img")
+
       if (dataSrc) image.src = dataSrc
       if (dataSrcSet) image.srcset = dataSrcSet
 
@@ -102,15 +104,19 @@ function LazyImage(props: IProps) {
     <>
       <div
         className={cls(css.imageWrapper, props.className)}
-        style={{ paddingBottom: `${aspectRatioPadding}%` }}
+        style={{
+          paddingBottom: props.aspectRatio
+            ? `calc((2 - ${props.aspectRatio})* 100%)`
+            : `${aspectRatioPadding}%`
+        }}
       >
         <img
           ref={imageRef}
           className={cls(css.image, lazyState)}
           src={"data:,"}
           data-src={props?.dataSrc}
           data-srcset={props?.dataSrcSet}
-          alt={props?.alt}
+          alt={props?.alt ?? ""}
           width={props.width}
           height={props.height}
           style={props.style}

diff --git a/apps/front/src/styles/_ratio.scss b/apps/front/src/styles/_ratio.scss
@@ -43,13 +43,13 @@
     #{$property}: fn.toRem(nth($value1, 1)) fn.toRem(nth($value1, 2));
   } @else if length($value1) == 3 {
     #{$property}: fn.toRem(nth($value1, 1))
-    fn.toRem(nth($value1, 2))
-    fn.toRem(nth($value1, 3));
+      fn.toRem(nth($value1, 2))
+      fn.toRem(nth($value1, 3));
   } @else if length($value1) == 4 {
     #{$property}: fn.toRem(nth($value1, 1))
-    fn.toRem(nth($value1, 2))
-    fn.toRem(nth($value1, 3))
-    fn.toRem(nth($value1, 4));
+      fn.toRem(nth($value1, 2))
+      fn.toRem(nth($value1, 3))
+      fn.toRem(nth($value1, 4));
   }
   @if $value2 != $value1 {
     @media (min-width: breakpoints.$breakpoint-tablet) {
@@ -59,13 +59,13 @@
         #{$property}: fn.toRem(nth($value2, 1)) fn.toRem(nth($value2, 2));
       } @else if length($value2) == 3 {
         #{$property}: fn.toRem(nth($value2, 1))
-        fn.toRem(nth($value2, 2))
-        fn.toRem(nth($value2, 3));
+          fn.toRem(nth($value2, 2))
+          fn.toRem(nth($value2, 3));
       } @else if length($value2) == 4 {
         #{$property}: fn.toRem(nth($value2, 1))
-        fn.toRem(nth($value2, 2))
-        fn.toRem(nth($value2, 3))
-        fn.toRem(nth($value2, 4));
+          fn.toRem(nth($value2, 2))
+          fn.toRem(nth($value2, 3))
+          fn.toRem(nth($value2, 4));
       }
     }
   }
@@ -120,13 +120,13 @@
         #{$property}: fn.toPx(nth($value1, 1)) fn.toPx(nth($value1, 2));
       } @else if length($value1) == 3 {
         #{$property}: fn.toPx(nth($value1, 1))
-        fn.toPx(nth($value1, 2))
-        fn.toPx(nth($value1, 3));
+          fn.toPx(nth($value1, 2))
+          fn.toPx(nth($value1, 3));
       } @else if length($value1) == 4 {
         #{$property}: fn.toPx(nth($value1, 1))
-        fn.toPx(nth($value1, 2))
-        fn.toPx(nth($value1, 3))
-        fn.toPx(nth($value1, 4));
+          fn.toPx(nth($value1, 2))
+          fn.toPx(nth($value1, 3))
+          fn.toPx(nth($value1, 4));
       }
     }
   }