diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts index 8b7408d8..1fdd2141 100644 --- a/src/components/@types/global.ts +++ b/src/components/@types/global.ts @@ -50,17 +50,13 @@ export interface ScrollerStep { } export interface PhotoCarouselImage { - /** - * Image src - */ + /** Image source */ src: string; - /** - * Image alt text - */ + /** Image alt text */ altText: string; - /** Optional caption as a string */ + /** Optional caption */ caption?: string; - /** Optional credit as string */ + /** Optional credit */ credit?: string; /** Optional object-fit rule */ objectFit?: string; diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx index 3055be1a..d51f7356 100644 --- a/src/components/BodyText/BodyText.mdx +++ b/src/components/BodyText/BodyText.mdx @@ -49,6 +49,11 @@ text: Bacon ipsum ... ```svelte + + {#each content.blocks as block} {#if block.type === 'text'} diff --git a/src/components/PhotoCarousel/PhotoCarousel.mdx b/src/components/PhotoCarousel/PhotoCarousel.mdx index 44188191..d2ef465f 100644 --- a/src/components/PhotoCarousel/PhotoCarousel.mdx +++ b/src/components/PhotoCarousel/PhotoCarousel.mdx @@ -6,7 +6,7 @@ import * as PhotoCarouselStories from './PhotoCarousel.stories.svelte'; # PhotoCarousel -The `PhotoCarousel` component creates a simple, accessible photo carousel with lazy-loading and mobile swipe built in. +The `PhotoCarousel` component creates a simple and accessible photo carousel with built-in lazy-loading and mobile swipe. ```svelte @@ -30,16 +29,82 @@ The `PhotoCarousel` component creates a simple, accessible photo carousel with l -## Custom text +## Using with ArchieML docs -Use named slots to style your own custom credits and/or captions. +With the Graphics Kit, you'll likely get your text value from an ArchieML doc... + +```yaml +# ArchieML doc +[blocks] +type: photo-carousel + +# List of photo data +[.images] + # Photo 1 + src: 'images/myImage.jpg', # The source path can be a URL or a local path + altText: 'A picture of...', + caption: 'My caption...', // Optional + credit: 'REUTERS/Jane Doe', // Optional + objectFit: 'contain', // Optional + objectPosition: '50% 50%', // Optional + + # Photo 2 + src: 'images/myImage2.jpg', + altText: 'A picture of...', + caption: 'My caption...', // Optional + credit: 'REUTERS/Jane Doe', // Optional + objectFit: 'contain', // Optional + objectPosition: '50% 50%', // Optional + ... +[] +[] +``` + +... which you'll parse out of a ArchieML block object before passing to the `PhotoCarousel` component. + +> **Note:** If you're using local images files stored in your Graphics Kit project, prefix `assets` to the image source path, as in the example below. ```svelte - -

{credit}

-

{caption}

+ + + +{#each content.blocks as block} + {#if block.type === 'photo-carousel'} + ({ + ...img, + src: `${assets}/${img.src}`, + }))} + /> + {/if} +{/each} +``` + + + +## Custom text + +To customise the credit and/or caption style, use the `credit` and `caption` [snippets](https://svelte.dev/docs/svelte/snippet) and pass `photo` as an argument. + +```svelte + + + {#snippet credit(image)} +

{image.credit}

+ {/snippet} + + + {#snippet caption(image)} +

{image.caption}

+ {/snippet} +