hero blur image responsive works, correct all responsive image sizes

Author: nemanjam

docs/working-notes/todo4.md

@@ -128,6 +128,9 @@ eventi ne moze na <img /> ali moze na <div /> okolo, <Image /> ide u slot // no
 bolje props od getImage()
 -----
 must use <img /> tag for srcset and sizes to be in dom instead of const img = new Image();
+
+loading... div bottom indicator
+set min-height blank gallery
 ```
 
 

src/components/Gallery.astro

@@ -1,34 +1,16 @@
 ---
-import ReactGallery from '@/components/react/Gallery';
 import NewReactGallery from '@/components/react/NewGallery';
-import { getGalleryImages, getImagesProps } from '@/libs/gallery/images';
-import { sliceToMod4 } from '@/utils/array';
-import { allImagesMetadata, imageMetadataToReactImageProps } from '@/utils/image';
+import { getGalleryImages } from '@/libs/gallery/images';
 import { randomizeArray } from '@/utils/objects';
-import { cn } from '@/utils/styles';
 
 export interface Props extends astroHTML.JSX.HTMLAttributes {}
 
-const allImagesMetadataMod4 = sliceToMod4(allImagesMetadata);
-
-const _reactImages = await Promise.all(
-  allImagesMetadataMod4.map((metadata) => imageMetadataToReactImageProps(metadata))
-);
-
-const reactImages = await getGalleryImages();
-
-console.log('reactImages', JSON.stringify(reactImages[0], null, 2));
-
-// const reactImages = await getImagesProps();
-
-const randomizedReactImages = randomizeArray(reactImages);
-
-// console.log('reactImages', reactImages);
+const galleryImages = await getGalleryImages();
+const randomizedGalleryImages = randomizeArray(galleryImages);
 
 const { class: className } = Astro.props;
 ---
 
-<div class={cn('', className)}>
-  <!-- <ReactGallery client:only="react" images={randomizedReactImages} /> -->
-  <NewReactGallery client:only="react" images={randomizedReactImages} />
+<div class={className}>
+  <NewReactGallery client:only="react" images={randomizedGalleryImages} />
 </div>

src/components/ImageRandom.astro

@@ -1,12 +1,12 @@
 ---
 import ImageRandomReact from '@/components/react/ImageRandom';
 import { IMAGE_SIZES } from '@/constants/image';
-import { getImagesProps } from '@/libs/gallery/images';
+import { getHeroImages } from '@/libs/gallery/images';
 import { cn } from '@/utils/styles';
 
 const { class: className, ...props } = Astro.props;
 
-const galleryImages = await getImagesProps();
+const galleryImages = await getHeroImages();
 
 // add 'px' suffix or styles will fail
 const { width, height } = Object.fromEntries(

src/components/PostCardMore.astro

@@ -19,7 +19,7 @@ const { title, heroImage, heroAlt, description, draft } = data;
 
 <div>
   <Image
-    {...IMAGE_SIZES.RESPONSIVE.POST_CARD}
+    {...IMAGE_SIZES.RESPONSIVE.POST_CARD_MORE}
     src={heroImage}
     alt={heroAlt}
     class="max-h-40 object-cover rounded-t-box"

src/components/react/ImageBlurPreloader.tsx

@@ -3,67 +3,78 @@ import { useEffect, useState } from 'react';
 import usePrevious from '@/components/react/hooks/usePrevious';
 import { cn } from '@/utils/styles';
 
-import type { FC, ImgHTMLAttributes } from 'react';
+import type { ImgAttributes } from '@/libs/gallery/images';
+import type { FC } from 'react';
 
-interface Props extends ImgHTMLAttributes<HTMLImageElement> {
-  blurSrc: string;
+interface Props {
+  blurAttributes: ImgAttributes;
+  mainAttributes: ImgAttributes;
   className?: string;
   divClassName?: string;
-  onSrcLoaded?: () => void;
+  onMainLoaded?: () => void;
 }
 
-const initialSrc = '' as const;
+const initialAttributes: ImgAttributes = { src: '' } as const;
 
 const ImageBlurPreloader: FC<Props> = ({
-  blurSrc = initialSrc,
-  src = initialSrc,
-  onSrcLoaded,
+  blurAttributes = initialAttributes,
+  mainAttributes = initialAttributes,
+  onMainLoaded,
   className,
   divClassName,
-  width,
-  height,
-  ...props
 }) => {
   const [hasLoaded, setHasLoaded] = useState(false);
-  const prevSrc = usePrevious(src);
+  const prevMainAttributes = usePrevious(mainAttributes);
 
-  // reset hasLoaded on src change
+  // reset hasLoaded on main image change
   useEffect(() => {
-    if (prevSrc !== src) {
+    if (prevMainAttributes !== mainAttributes) {
       setHasLoaded(false);
     }
-  }, [prevSrc, src, setHasLoaded]);
+  }, [prevMainAttributes, mainAttributes, setHasLoaded]);
 
-  // handle blur -> xl image switch
-  useEffect(() => {
-    if (!src) return;
-
-    const img = new Image();
-    img.src = src;
+  // important: main image must be in DOM for onLoad to work
+  // unmount and display: none will fail
+  const handleLoad = () => {
+    setHasLoaded(true);
+    onMainLoaded?.();
+  };
 
-    img.onload = () => {
-      setHasLoaded(true);
-      onSrcLoaded?.();
-    };
-    // src important dependency
-  }, [src, setHasLoaded]);
+  const commonAttributes = {
+    // blur image must use size from main image
+    width: mainAttributes.width,
+    height: mainAttributes.height,
+  };
 
-  const imageSrc = hasLoaded ? src : blurSrc;
+  const hasImage = hasLoaded
+    ? mainAttributes.src || mainAttributes.srcSet
+    : blurAttributes.src || blurAttributes.srcSet;
 
   return (
-    <>
-      {imageSrc ? (
-        <img
-          {...props}
-          src={imageSrc}
-          width={width}
-          height={height}
-          className={cn('object-cover', className)}
-        />
-      ) : (
-        <div className={divClassName} />
+    <div className={cn('relative size-full', divClassName)}>
+      {hasImage && (
+        <>
+          {/* blur image */}
+          <img
+            {...blurAttributes}
+            {...commonAttributes}
+            className={cn('object-cover absolute top-0 left-0 size-full', className)}
+          />
+
+          {/* main image */}
+          <img
+            {...mainAttributes}
+            {...commonAttributes}
+            onLoad={handleLoad}
+            className={cn(
+              'object-cover absolute top-0 left-0 size-full',
+              hasLoaded ? 'opacity-100' : 'opacity-0',
+              className
+            )}
+          />
+        </>
       )}
-    </>
+    </div>
   );
 };
 

src/components/react/ImageRandom.tsx

@@ -4,33 +4,30 @@ import ImageBlurPreloader from '@/components/react/ImageBlurPreloader';
 import { getRandomElementFromArray } from '@/utils/array';
 import { cn } from '@/utils/styles';
 
-import type { ImageAttributes, ImageProps } from '@/libs/gallery/transform';
+import type { HeroImage, ImgAttributes } from '@/libs/gallery/images';
 import type { FC, ImgHTMLAttributes } from 'react';
 
 interface Props extends ImgHTMLAttributes<HTMLImageElement> {
   // Important: must pass all allImagesSrc from the server or they wont be included on client
-  galleryImages: ImageProps[];
+  galleryImages: HeroImage[];
   divClassName?: string;
 }
 
-const imageAttributes: ImageAttributes = {
+const imageAttributes: ImgAttributes = {
   src: '',
   width: 0,
   height: 0,
 };
 
-const initialImage: ImageProps = {
+const initialImage: HeroImage = {
   blur: { ...imageAttributes },
-  xs: { ...imageAttributes },
-  md: { ...imageAttributes },
-  xl: { ...imageAttributes },
+  hero: { ...imageAttributes },
 };
 
 const ImageRandomReact: FC<Props> = ({ galleryImages, className, divClassName, ...props }) => {
   const randomImage = useMemo(() => getRandomElementFromArray(galleryImages), [galleryImages]);
 
   const [image, setImage] = useState(initialImage);
-  const [hasLoaded, setHasLoaded] = useState(false);
 
   // initial image, on mount
   useEffect(() => {
@@ -40,23 +37,25 @@ const ImageRandomReact: FC<Props> = ({ galleryImages, className, divClassName, .
   const handleClick = async () => {
     const randomImage = getRandomElementFromArray(galleryImages);
     setImage(randomImage);
-    setHasLoaded(false);
   };
 
-  const imageAlt = hasLoaded ? 'Hero image' : 'Blur image';
+  const moreBlurAttributes = {
+    alt: 'Blur image',
+    onClick: handleClick,
+  };
+
+  const moreMainAttributes = {
+    alt: 'Hero image',
+    onClick: handleClick,
+  };
 
   return (
     <ImageBlurPreloader
       {...props}
-      blurSrc={image.blur.src}
-      src={image.xl.src}
-      width={image.xl.width}
-      height={image.xl.height}
-      onSrcLoaded={() => setHasLoaded(true)}
-      alt={imageAlt}
-      onClick={handleClick}
-      className={cn('cursor-pointer w-full h-full my-0', className)}
-      divClassName={cn('w-full h-full', divClassName)}
+      blurAttributes={{ ...image.blur, ...moreBlurAttributes }}
+      mainAttributes={{ ...image.hero, ...moreMainAttributes }}
+      className={cn('cursor-pointer my-0', className)}
+      divClassName={divClassName}
     />
   );
 };

src/components/react/NewGallery.tsx

@@ -3,7 +3,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash.debounce';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 
-import type { ImageProps } from '@/libs/gallery/transform';
 import type { FC } from 'react';
 
 import 'photoswipe/style.css';

src/constants/image.ts

@@ -58,20 +58,24 @@ export const IMAGE_SIZES = {
   },
   RESPONSIVE: {
     POST_CARD: {
-      widths: [TW_SCREENS.XXS, TW_SCREENS.SM],
-      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, ${TW_SCREENS.SM}px`,
+      widths: [TW_SCREENS.XXS, TW_SCREENS.XS, TW_SCREENS.SM, TW_SCREENS.MD],
+      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XS}px, (max-width: ${TW_SCREENS.SM}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.MD}px, ${TW_SCREENS.XXS}px`,
+    },
+    POST_CARD_MORE: {
+      widths: [TW_SCREENS.XXS, TW_SCREENS.XS, TW_SCREENS.SM],
+      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XS}px, (max-width: ${TW_SCREENS.SM}px) ${TW_SCREENS.SM}px, ${TW_SCREENS.XXS}px`,
     },
     POST_HERO: {
-      widths: [TW_SCREENS.XXS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG],
-      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.XL}px) ${TW_SCREENS.MD}px, ${TW_SCREENS.LG}px`,
+      widths: [TW_SCREENS.XS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG],
+      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XS}px, (max-width: ${TW_SCREENS.SM}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.MD}px, ${TW_SCREENS.LG}px`,
     },
     PROJECT_CARD: {
-      widths: [TW_SCREENS.XXS, TW_SCREENS.SM],
-      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, ${TW_SCREENS.SM}px`,
+      widths: [TW_SCREENS.XXS, TW_SCREENS.XS, TW_SCREENS.SM],
+      sizes: `(max-width: ${TW_SCREENS.SM}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.XS}px, ${TW_SCREENS.XXS}px`,
     },
     MDX_EXPAND_LG: {
-      widths: [TW_SCREENS.XXS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG, TW_SCREENS.XL],
-      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.XL}px) ${TW_SCREENS.LG}px, ${TW_SCREENS.XL}px`,
+      widths: [TW_SCREENS.XS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG, TW_SCREENS.XL],
+      sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XS}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.MD}px, (max-width: ${TW_SCREENS.LG}px) ${TW_SCREENS.LG}px, ${TW_SCREENS.XL}px`,
       // for debugging
       // class: `border-8 border-blue-500 [@media(max-width:475px)]:!border-yellow-300 [@media(max-width:768px)]:border-orange-500 [@media(max-width:1280px)]:border-red-500`,
     },

src/content/project/2014/02-13-example-project-1/index.mdx

@@ -15,4 +15,4 @@ import FlowersImage from '../../../../content/project/2014/02-13-example-project
 
 # This is the first project
 
-<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={FlowersImage} class="shadow-lg shadow-base-300" alt="" />
+<Image {...IMAGE_SIZES.RESPONSIVE.POST_HERO} src={FlowersImage} class="shadow-lg shadow-base-300" alt="" />

src/content/project/2014/03-15-example-project-2/index.mdx

@@ -17,4 +17,4 @@ import BicycleImage from '../../../../content/project/2014/03-15-example-project
 
 # This is the second project
 
-<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={BicycleImage} class="shadow-lg shadow-base-300" alt="" />
+<Image {...IMAGE_SIZES.RESPONSIVE.POST_HERO} src={BicycleImage} class="shadow-lg shadow-base-300" alt="" />