updates docs on asset handling

This commit is contained in:
MinamiFunakoshiTR 2025-03-24 10:40:48 -07:00
parent 81aedad0b6
commit 3dad5cf08f
Failed to extract signature
2 changed files with 4 additions and 11 deletions

View file

@ -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}

View file

@ -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 ||