From 3dad5cf08f6c30d565e137cd68bdab935a4ba5fe Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 24 Mar 2025 10:40:48 -0700
Subject: [PATCH] updates docs on asset handling

---
 src/components/PhotoCarousel/PhotoCarousel.mdx    | 7 +++----
 src/components/PhotoCarousel/PhotoCarousel.svelte | 8 +-------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/PhotoCarousel/PhotoCarousel.mdx b/src/components/PhotoCarousel/PhotoCarousel.mdx
index 5b447618..718535df 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.mdx
+++ b/src/components/PhotoCarousel/PhotoCarousel.mdx
@@ -62,8 +62,6 @@ type: photo-carousel
 
 ... which you'll parse out of a ArchieML block object before passing to the `PhotoCarousel` component.
 
-> **Important❗:** If you're using the Graphics Kit and your photos are saved locally in `src/statics` instead of being on the web, pass the Svelte-kit `assets` string to `PhotoCarousel` to get the correct path. You can't mix and match, though -- all photos must be either local or web-hosted.
-
 ```svelte
 <!-- App.svelte -->
 <script>
@@ -71,12 +69,13 @@ type: photo-carousel
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 
   import content from '$locales/en/content.json';
+
+  // @TODO - Update this doc once the util to derive `photos` with `assets` in the image src path is written and tested. See ticket: https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164
 </script>
 
 {#each content.blocks as block}
   {#if block.type === 'photo-carousel'}
-  <!-- Pass `assets` if using photos saved in your Graphics Kit project folder -->
-    <PhotoCarousel {block.photos} {assets} />
+    <PhotoCarousel {block.photos}  />
   {/if}
 {/each}
 
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 4aae06f9..d3331d56 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -20,7 +20,6 @@
   import type { MoveEventDetail } from '@splidejs/svelte-splide/types';
   import type { Snippet } from 'svelte';
   import type { PhotoCarouselImage } from '../@types/global';
-  import src from 'svelte-search/index.js';
 
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
@@ -29,8 +28,6 @@
   interface Props {
     /** Array of photos. */
     photos: PhotoCarouselImage[];
-    /** Pass Svelte-kit `assets`, if using local photo files instead of web-hosted ones*/
-    assets?: string;
     /** Width of the component within the text well: normal, wide, wider, widest, fluid */
     width?: ContainerWidth;
     /**
@@ -60,7 +57,6 @@
   }
 
   let {
-    assets,
     width = 'wider',
     textWidth = 'normal',
     id = '',
@@ -108,8 +104,6 @@
       <div class="image-container">
         <SplideTrack>
           {#each photos as photo}
-            <!-- Set source path if `assets` is passed, i.e the photos are local files -->
-            {@const src = assets ? `${assets}/${photo.src}` : photo.src}
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
@@ -118,7 +112,7 @@
                 >
                   <img
                     class="w-full h-full fmy-0"
-                    data-splide-lazy={src}
+                    data-splide-lazy={photo.src}
                     alt={photo.altText}
                     style:object-fit={photo.objectFit || defaultImageObjectFit}
                     style:object-position={photo.objectPosition ||