import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as o}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{p as n}from"./docsPage-CT2vyZOj.js";import{H as a}from"./Highlight-rHebhLku.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";function r(s){const t={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Using with the graphics kit",parameters:{...n}}),`
`,e.jsx(t.h1,{id:"using-with-the-graphics-kit",children:"Using with the graphics kit"}),`
`,e.jsxs(t.p,{children:["Our graphics components are designed to work seemlessly with the ",e.jsx(t.a,{href:"https://reuters-graphics.github.io/bluprint_graphics-kit/",rel:"nofollow",children:"graphics kit"})," as well as just about any Svelte-based page builder."]}),`
`,e.jsx(t.p,{children:e.jsx(t.strong,{children:"There is, however, one gotcha to watch out for:"})}),`
`,e.jsxs(t.p,{children:["When working with multimedia files like images or videos, components expect all paths to be ",e.jsx(a,{children:"absolute URLs."})]}),`
`,e.jsxs(t.p,{children:["✅ ",e.jsx(t.code,{children:"https://reuters.com/graphics/.../myImage.jpg"})]}),`
`,e.jsxs(t.p,{children:["❌ ",e.jsx(t.code,{children:"./myImage.jpg"})]}),`
`,e.jsxs(t.p,{children:["In the graphics kit, that means you'll need to prefix relative paths with the special ",e.jsx(t.a,{href:"https://svelte.dev/docs/kit/$app-paths#assets",rel:"nofollow",children:e.jsx(t.code,{children:"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!"]}),`
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<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" />
`})})]})}function j(s={}){const{wrapper:t}={...o(),...s.components};return t?e.jsx(t,{...s,children:e.jsx(r,{...s})}):r(s)}export{j as default};