From f7791850660009beb19d5258f891d6ddba20a82f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 25 Apr 2023 12:17:24 +0800
Subject: [PATCH] Do not enlarge small images, fallback to original src if
 proxy URL fails

---
 .../components/templates/article/Article.tsx  | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 8204bc7d1..411b43b84 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -159,6 +159,44 @@ export function Article(props: ArticleProps): JSX.Element {
     })
   }, [])
 
+  useEffect(() => {
+    // Get all images with initial sizes, if they are small
+    // make sure they get displayed small
+    const sizedImages = Array.from(
+      document.querySelectorAll('img[data-omnivore-width]')
+    )
+
+    sizedImages.forEach((element) => {
+      const img = element as HTMLImageElement
+      const width = Number(img.getAttribute('data-omnivore-width'))
+      const height = Number(img.getAttribute('data-omnivore-height'))
+      console.log('width and height: ', width, height)
+
+      if (!isNaN(width) && !isNaN(height) && width < 100 && height < 100) {
+        img.style.setProperty('width', `${width}px`)
+        img.style.setProperty('height', `${height}px`)
+        img.style.setProperty('max-width', 'unset')
+      }
+    })
+
+    const fallbackImages = Array.from(
+      document.querySelectorAll('img[data-omnivore-original-src]')
+    )
+
+    fallbackImages.forEach((element) => {
+      const img = element as HTMLImageElement
+      const fallbackSrc = img.getAttribute('data-omnivore-original-src')
+      if (fallbackSrc) {
+        img.onerror = () => {
+          console.log('image falling back to original: ', fallbackSrc)
+          // If the image fails to load fallback to the original
+          img.onerror = null
+          img.src = fallbackSrc
+        }
+      }
+    })
+  }, [props.content])
+
   return (
     <>
       <link