diff --git a/src/hooks/useFetchPreviewMedia.ts b/src/hooks/useFetchPreviewMedia.ts
new file mode 100644
index 000000000..1639d226c
--- /dev/null
+++ b/src/hooks/useFetchPreviewMedia.ts
@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react"
+import { useParams } from "react-router-dom"
+
+import { getImageDetails } from "utils/images"
+
+import { useGetMediaHook } from "./mediaHooks"
+
+export const useFetchPreviewMedia = (imageUrl = ""): string => {
+  const { siteName } = useParams<{ siteName: string }>()
+  const [loadedImageURL, setLoadedImageURL] = useState(imageUrl)
+  const { fileName, imageDirectory } = getImageDetails(imageUrl)
+  const { data: mediaData } = useGetMediaHook({
+    siteName,
+    mediaDirectoryName: imageDirectory || "images",
+    fileName,
+  })
+
+  useEffect(() => {
+    if (mediaData) {
+      setLoadedImageURL(mediaData.mediaUrl)
+    }
+  }, [mediaData])
+
+  return loadedImageURL
+}
diff --git a/src/layouts/EditHomepage/HomepagePreview.tsx b/src/layouts/EditHomepage/HomepagePreview.tsx
index 88528f3e4..aaf401745 100644
--- a/src/layouts/EditHomepage/HomepagePreview.tsx
+++ b/src/layouts/EditHomepage/HomepagePreview.tsx
@@ -103,7 +103,6 @@ export const HomepagePreview = ({
               <TemplateHeroSection
                 key={`section-${sectionIndex}`}
                 hero={section.hero}
-                siteName={siteName}
                 dropdownIsActive={dropdownIsActive}
                 toggleDropdown={toggleDropdown}
                 ref={scrollRefs[sectionIndex]}
@@ -150,7 +149,6 @@ export const HomepagePreview = ({
                   imageAlt={section.infopic.alt}
                   button={section.infopic.button}
                   sectionIndex={sectionIndex}
-                  siteName={siteName}
                   ref={scrollRefs[sectionIndex]}
                 />
               ) : (
@@ -163,7 +161,6 @@ export const HomepagePreview = ({
                   imageAlt={section.infopic.alt}
                   button={section.infopic.button}
                   sectionIndex={sectionIndex}
-                  siteName={siteName}
                   ref={scrollRefs[sectionIndex]}
                 />
               )}
diff --git a/src/templates/homepage/HeroSection.jsx b/src/templates/homepage/HeroSection.jsx
index 6591d95df..ddb5e2c8e 100644
--- a/src/templates/homepage/HeroSection.jsx
+++ b/src/templates/homepage/HeroSection.jsx
@@ -5,14 +5,13 @@
 
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
-import { useQuery } from "react-query"
+
+import { useFetchPreviewMedia } from "hooks/useFetchPreviewMedia"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { fetchImageURL } from "utils"
-
 /* eslint
   react/no-array-index-key: 0
  */
@@ -175,17 +174,10 @@ const KeyHighlights = ({ highlights }) => (
 )
 
 const TemplateHeroSection = (
-  { hero, siteName, dropdownIsActive, toggleDropdown },
+  { hero, dropdownIsActive, toggleDropdown },
   ref
 ) => {
-  const { data: loadedImageURL } = useQuery(
-    `${siteName}/${hero.background}`,
-    () => fetchImageURL(siteName, decodeURI(hero.background)),
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity, // Never automatically refetch image unless query is invalidated
-    }
-  )
+  const loadedImageURL = useFetchPreviewMedia(hero.background)
 
   const heroStyle = {
     // See j08691's answer at https://stackoverflow.com/questions/21388712/background-size-doesnt-work
@@ -331,7 +323,6 @@ TemplateHeroSection.propTypes = {
       })
     ),
   }).isRequired,
-  siteName: PropTypes.string.isRequired,
   dropdownIsActive: PropTypes.bool.isRequired,
   toggleDropdown: PropTypes.func.isRequired,
 }
diff --git a/src/templates/homepage/InfopicLeftSection.jsx b/src/templates/homepage/InfopicLeftSection.jsx
index 3dbc9b127..7d1eb77ca 100644
--- a/src/templates/homepage/InfopicLeftSection.jsx
+++ b/src/templates/homepage/InfopicLeftSection.jsx
@@ -1,41 +1,25 @@
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
-import { useQuery } from "react-query"
+
+import { useFetchPreviewMedia } from "hooks/useFetchPreviewMedia"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { fetchImageURL } from "utils"
 /* eslint
   react/no-array-index-key: 0
  */
 
 const TemplateInfopicLeftSection = (
-  {
-    title,
-    subtitle,
-    description,
-    button,
-    sectionIndex,
-    imageUrl,
-    imageAlt,
-    siteName,
-  },
+  { title, subtitle, description, button, sectionIndex, imageUrl, imageAlt },
   ref
 ) => {
   const addDefaultSrc = (e) => {
     e.target.src = "/placeholder_no_image.png"
   }
 
-  const { data: loadedImageURL } = useQuery(
-    `${siteName}/${imageUrl}`,
-    () => fetchImageURL(siteName, decodeURI(imageUrl)),
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity, // Never automatically refetch image unless query is invalidated
-    }
-  )
+  const loadedImageURL = useFetchPreviewMedia(imageUrl)
 
   return (
     <div ref={ref}>
@@ -262,7 +246,6 @@ TemplateInfopicLeftSection.propTypes = {
   imageUrl: PropTypes.string,
   imageAlt: PropTypes.string,
   sectionIndex: PropTypes.number.isRequired,
-  siteName: PropTypes.string.isRequired,
 }
 
 TemplateInfopicLeftSection.defaultProps = {
diff --git a/src/templates/homepage/InfopicRightSection.jsx b/src/templates/homepage/InfopicRightSection.jsx
index 098eb3c95..b41dec6a0 100644
--- a/src/templates/homepage/InfopicRightSection.jsx
+++ b/src/templates/homepage/InfopicRightSection.jsx
@@ -1,42 +1,25 @@
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
-import { useQuery } from "react-query"
+
+import { useFetchPreviewMedia } from "hooks/useFetchPreviewMedia"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { fetchImageURL } from "utils"
-
 /* eslint
   react/no-array-index-key: 0
  */
 
 const TemplateInfopicRightSection = (
-  {
-    title,
-    subtitle,
-    description,
-    button,
-    sectionIndex,
-    imageUrl,
-    imageAlt,
-    siteName,
-  },
+  { title, subtitle, description, button, sectionIndex, imageUrl, imageAlt },
   ref
 ) => {
   const addDefaultSrc = (e) => {
     e.target.src = "/placeholder_no_image.png"
   }
 
-  const { data: loadedImageURL } = useQuery(
-    `${siteName}/${imageUrl}`,
-    () => fetchImageURL(siteName, decodeURI(imageUrl)),
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity, // Never automatically refetch image unless query is invalidated
-    }
-  )
+  const loadedImageURL = useFetchPreviewMedia(imageUrl)
 
   return (
     <div ref={ref}>
@@ -263,7 +246,6 @@ TemplateInfopicRightSection.propTypes = {
   imageUrl: PropTypes.string,
   imageAlt: PropTypes.string,
   sectionIndex: PropTypes.number.isRequired,
-  siteName: PropTypes.string.isRequired,
 }
 
 TemplateInfopicRightSection.defaultProps = {
diff --git a/src/utils/images.ts b/src/utils/images.ts
new file mode 100644
index 000000000..a9e8bc194
--- /dev/null
+++ b/src/utils/images.ts
@@ -0,0 +1,20 @@
+/**
+ * Util method to retrieve image details from /images folder from the relative file path,
+ * e.g. "/images/album%/picture$.jpg" -> { imageDirectory: "images%2Falbum%25", fileName: "picture%24.jpg" }
+ */
+export const getImageDetails = (
+  imageLink: string
+): { fileName: string; imageDirectory: string } => {
+  const cleanImagePath = decodeURI(imageLink).replace(/^\//, "")
+  const filePathArr = cleanImagePath
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+  const fileName = filePathArr[filePathArr.length - 1]
+  const imageDirectory = filePathArr
+    .slice(0, filePathArr.length - 1)
+    .join("%2F")
+  return {
+    fileName,
+    imageDirectory,
+  }
+}