34 lines
1.3 KiB
Text
34 lines
1.3 KiB
Text
import { Meta } from '@storybook/blocks';
|
|
import { parameters } from '../utils/docsPage.js';
|
|
import Highlight from '../docs-components/Highlight/Highlight';
|
|
|
|
<Meta
|
|
title="Guides/Using with the Graphics Kit"
|
|
parameters={{ ...parameters }}
|
|
/>
|
|
|
|
# Using with the Graphics Kit
|
|
|
|
Our graphics components are designed to work seemlessly with the [Graphics Kit](https://github.com/reuters-graphics/bluprint_graphics-kit) as well as just about any Svelte-based page builder.
|
|
|
|
**There is, however, one gotcha to watch out for:**
|
|
|
|
When working with multimedia files like images or videos, components expect all paths to be <Highlight>absolute URLs.</Highlight>
|
|
|
|
✅ `https://reuters.com/graphics/.../myImage.jpg`
|
|
|
|
❌ `./myImage.jpg`
|
|
|
|
In the Graphics Kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
|
|
|
|
```svelte
|
|
<script>
|
|
import { FeaturePhoto } from '@reuters-graphics/graphics-components';
|
|
|
|
// Import the assets module if it's not already there.
|
|
import { assets } from '$app/paths';
|
|
</script>
|
|
|
|
<!-- Use the assets module to prefix the path to your image. -->
|
|
<FeautrePhoto src={`${assets}/imgs/myImage.jpg`} />
|
|
```
|