feat: better way to show images

dappforce · Jan 16, 2024 · 9bb6e20 · 9bb6e20
1 parent 914e7ce
commit 9bb6e20
Showing 1 changed file with 33 additions and 9 deletions.
diff --git a/src/components/posts/view-post/helpers.tsx b/src/components/posts/view-post/helpers.tsx
@@ -203,18 +203,42 @@ export const PostImage = React.memo(
       setShouldImageBeCropped(isTallerThan16By9)
     }
 
-    const wrapperClassName = clsx(className, {
+    const wrapperClassName = clsx(className, 'w-100 d-flex', {
       DfPostImagePreviewWrapperCropped: shouldImageBeCropped,
-      DfPostImagePreviewWrapper: true,
     })
     return (
-      <Image
-        src={resolveIpfsUrl(image)}
-        className='DfPostImagePreview'
-        preview={withPreview ? { mask: null } : false}
-        wrapperClassName={wrapperClassName}
-        onLoad={onImgLoad}
-      />
+      <div
+        className='position-relative DfPostImagePreviewWrapper'
+        style={{ overflow: 'hidden', borderRadius: '5px' }}
+      >
+        <Image
+          src={resolveIpfsUrl(image)}
+          className='DfPostImagePreview'
+          wrapperStyle={{
+            position: 'absolute',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            filter: 'blur(10px)',
+            transform: 'scale(1.1)',
+            transformOrigin: 'center',
+          }}
+          style={{
+            objectFit: 'cover',
+          }}
+          preview={withPreview ? { mask: null } : false}
+          wrapperClassName={wrapperClassName}
+          onLoad={onImgLoad}
+        />
+        <Image
+          src={resolveIpfsUrl(image)}
+          className='DfPostImagePreview'
+          style={{ objectFit: 'contain' }}
+          preview={withPreview ? { mask: null } : false}
+          wrapperClassName={wrapperClassName}
+          onLoad={onImgLoad}
+        />
+      </div>
     )
   },
 )