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.
|
... 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
|
```svelte
|
||||||
<!-- App.svelte -->
|
<!-- App.svelte -->
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -71,12 +69,13 @@ type: photo-carousel
|
||||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||||
|
|
||||||
import content from '$locales/en/content.json';
|
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>
|
</script>
|
||||||
|
|
||||||
{#each content.blocks as block}
|
{#each content.blocks as block}
|
||||||
{#if block.type === 'photo-carousel'}
|
{#if block.type === 'photo-carousel'}
|
||||||
<!-- Pass `assets` if using photos saved in your Graphics Kit project folder -->
|
<PhotoCarousel {block.photos} />
|
||||||
<PhotoCarousel {block.photos} {assets} />
|
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,6 @@
|
||||||
import type { MoveEventDetail } from '@splidejs/svelte-splide/types';
|
import type { MoveEventDetail } from '@splidejs/svelte-splide/types';
|
||||||
import type { Snippet } from 'svelte';
|
import type { Snippet } from 'svelte';
|
||||||
import type { PhotoCarouselImage } from '../@types/global';
|
import type { PhotoCarouselImage } from '../@types/global';
|
||||||
import src from 'svelte-search/index.js';
|
|
||||||
|
|
||||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||||
|
|
||||||
|
|
@ -29,8 +28,6 @@
|
||||||
interface Props {
|
interface Props {
|
||||||
/** Array of photos. */
|
/** Array of photos. */
|
||||||
photos: PhotoCarouselImage[];
|
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 of the component within the text well: normal, wide, wider, widest, fluid */
|
||||||
width?: ContainerWidth;
|
width?: ContainerWidth;
|
||||||
/**
|
/**
|
||||||
|
|
@ -60,7 +57,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
assets,
|
|
||||||
width = 'wider',
|
width = 'wider',
|
||||||
textWidth = 'normal',
|
textWidth = 'normal',
|
||||||
id = '',
|
id = '',
|
||||||
|
|
@ -108,8 +104,6 @@
|
||||||
<div class="image-container">
|
<div class="image-container">
|
||||||
<SplideTrack>
|
<SplideTrack>
|
||||||
{#each photos as photo}
|
{#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>
|
<SplideSlide>
|
||||||
<div class="photo-slide w-full h-full relative">
|
<div class="photo-slide w-full h-full relative">
|
||||||
<figure
|
<figure
|
||||||
|
|
@ -118,7 +112,7 @@
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="w-full h-full fmy-0"
|
class="w-full h-full fmy-0"
|
||||||
data-splide-lazy={src}
|
data-splide-lazy={photo.src}
|
||||||
alt={photo.altText}
|
alt={photo.altText}
|
||||||
style:object-fit={photo.objectFit || defaultImageObjectFit}
|
style:object-fit={photo.objectFit || defaultImageObjectFit}
|
||||||
style:object-position={photo.objectPosition ||
|
style:object-position={photo.objectPosition ||
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue