updates docs on asset handling
This commit is contained in:
parent
81aedad0b6
commit
3dad5cf08f
2 changed files with 4 additions and 11 deletions
|
|
@ -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}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ||
|
||||
|
|
|
|||
Loading…
Reference in a new issue