150 lines
8.1 KiB
JavaScript
150 lines
8.1 KiB
JavaScript
import{j as n}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as a,C as t}from"./index-Z-6k0Xrj.js";import{P as r,D as c,A as l}from"./PhotoPack.stories-BdYLyS8k.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./index-CX1x869l.js";function s(o){const e={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...i(),...o.components};return n.jsxs(n.Fragment,{children:[n.jsx(a,{of:r}),`
|
|
`,n.jsx(e.h1,{id:"photopack",children:"PhotoPack"}),`
|
|
`,n.jsxs(e.p,{children:["The ",n.jsx(e.code,{children:"PhotoPack"})," component makes simple photo grids with custom layouts at various breakpoints."]}),`
|
|
`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"images"})," are defined with their src, alt text, captions and an optional ",n.jsx(e.code,{children:"maxHeight"}),", which ensures that an image is no taller than that height in any layout."]}),`
|
|
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-javascript",children:`const images = [
|
|
{
|
|
src: 'https://...',
|
|
altText: 'Alt text',
|
|
caption: 'Lorem ipsum. REUTERS/Photog',
|
|
// Optional max-height of images across all layouts
|
|
maxHeight: 800,
|
|
},
|
|
// ...
|
|
];
|
|
`})}),`
|
|
`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"layouts"})," optionally define how images are laid out at different breakpoints. You can customise the layouts and group images into ",n.jsx(e.code,{children:"rows"})," above a certain ",n.jsx(e.code,{children:"breakpoint"})," by specifying the number of images that should go in that row. For example:"]}),`
|
|
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-javascript",children:`const layouts = [
|
|
{
|
|
breakpoint: 450,
|
|
rows: [1, 2, 1],
|
|
},
|
|
];
|
|
`})}),`
|
|
`,n.jsxs(e.p,{children:["... tells the component that when the ",n.jsx(e.code,{children:"PhotoPack"})," container is 450 pixels or wider, it should group the 4 images in 3 rows: 1 in the first, 2 in the second and 1 in the last."]}),`
|
|
`,n.jsx(e.p,{children:"If you don't specify any layouts, the component will use a default responsive layout based on the number of images in your pack."}),`
|
|
`,n.jsx(e.p,{children:"You can define as many layouts for as many images as you like."}),`
|
|
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<script>
|
|
import { PhotoPack } from '@reuters-graphics/graphics-components';
|
|
|
|
/** Array of photo metadata */
|
|
const images = [
|
|
{
|
|
src: 'https://...',
|
|
altText: 'Alt text',
|
|
caption: 'Lorem ipsum. REUTERS/Photog',
|
|
// Optional max-height of images across all layouts
|
|
maxHeight: 800,
|
|
},
|
|
// ...
|
|
];
|
|
|
|
/** Set the number of photos in each row at various breakpoints */
|
|
const layouts = [
|
|
{
|
|
breakpoint: 450, // Applies to containers wider than 450px
|
|
rows: [1, 2, 1], // Number of photos in each row
|
|
},
|
|
// Another layout for containers wider than 750px
|
|
{ breakpoint: 750, rows: [1, 3] },
|
|
];
|
|
<\/script>
|
|
|
|
<PhotoPack {images} {layouts} />
|
|
`})}),`
|
|
`,n.jsx(t,{of:c}),`
|
|
`,n.jsx(e.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
|
|
`,n.jsx(e.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
|
|
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-yaml",children:`# ArchieML doc
|
|
[blocks]
|
|
type: photo-pack
|
|
id: my-photo-pack # Optional
|
|
class: mb-2 # Optional
|
|
width: wide # Optional
|
|
textWidth: normal # Optional
|
|
gap: 10 # Optional; must be a number.
|
|
|
|
# Array of image metadata
|
|
[.images]
|
|
src: images/my-img-1.jpg
|
|
altText: Alt text
|
|
caption: Lorem ipsum. REUTERS/Photog
|
|
|
|
src: images/my-img-2.jpg
|
|
altText: Alt text
|
|
caption: Lorem ipsum. REUTERS/Photog
|
|
|
|
...
|
|
[]
|
|
|
|
[]
|
|
`})}),`
|
|
`,n.jsxs(e.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",n.jsx(e.code,{children:"PhotoPack"})," component."]}),`
|
|
`,n.jsxs(e.blockquote,{children:[`
|
|
`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Important ❗"}),": The prop ",n.jsx(e.code,{children:"gap"})," must be a number. ArchieML renders all values -- including numbers -- as strings, so convert the ",n.jsx(e.code,{children:"prop"})," value to a number before passing it to ",n.jsx(e.code,{children:"PhotoPack"}),"."]}),`
|
|
`]}),`
|
|
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
<script>
|
|
import { PhotoPack } from '@reuters-graphics/graphics-components';
|
|
import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
|
|
|
|
import content from '$locales/en/content.json';
|
|
<\/script>
|
|
|
|
{#each content.blocks as block}
|
|
{#if block.type === 'photo-pack'}
|
|
<!-- Pass \`assets\` into the image source in graphics kit -->
|
|
<PhotoPack
|
|
id={block.id}
|
|
class={block.class}
|
|
width={block.width}
|
|
textWidth={block.textWidth}
|
|
gap={Number(block.gap)}
|
|
images={block.images.map((img) => ({
|
|
...img,
|
|
src: \`\${assets}/\${img.src}\`,
|
|
}))}
|
|
layouts={[
|
|
{ breakpoint: 750, rows: [2, 3] },
|
|
{ breakpoint: 450, rows: [1, 2, 2] },
|
|
]}
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
`})}),`
|
|
`,n.jsx(t,{of:l}),`
|
|
`,n.jsx(e.h2,{id:"smart-default-layouts",children:"Smart default layouts"}),`
|
|
`,n.jsxs(e.p,{children:["If you don't specify the ",n.jsx(e.code,{children:"layouts"})," prop, ",n.jsx(e.code,{children:"PhotoPack"})," will automatically generate responsive layouts based on the number of images and the container width."]}),`
|
|
`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"How it works:"})}),`
|
|
`,n.jsxs(e.ul,{children:[`
|
|
`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Desktop"})," (1024px+): Number of images per row depends on container width:",`
|
|
`,n.jsxs(e.ul,{children:[`
|
|
`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"normal"}),": max 2 per row"]}),`
|
|
`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"wide"})," / ",n.jsx(e.code,{children:"wider"}),": max 3 per row"]}),`
|
|
`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"widest"})," / ",n.jsx(e.code,{children:"fluid"}),": max 4 per row"]}),`
|
|
`]}),`
|
|
`]}),`
|
|
`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Tablet"})," (768px+): Always max 2 per row"]}),`
|
|
`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Mobile"})," (below 768px): 1 per row"]}),`
|
|
`]}),`
|
|
`,n.jsxs(e.p,{children:["The smart defaults use a ",n.jsx(e.strong,{children:"bottom-heavy distribution"}),", meaning earlier rows have fewer images (making them larger and more prominent), while later rows have more images."]}),`
|
|
`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Examples:"})}),`
|
|
`,n.jsxs(e.ul,{children:[`
|
|
`,n.jsxs(e.li,{children:["5 images, ",n.jsx(e.code,{children:"wide"})," container, desktop: ",n.jsx(e.code,{children:"[2, 3]"})," (2 in first row, 3 in second)"]}),`
|
|
`,n.jsxs(e.li,{children:["7 images, ",n.jsx(e.code,{children:"widest"})," container, desktop: ",n.jsx(e.code,{children:"[3, 4]"})," (3 in first row, 4 in second)"]}),`
|
|
`,n.jsxs(e.li,{children:["4 images, any container, desktop: ",n.jsx(e.code,{children:"[2, 2]"})," (evenly distributed)"]}),`
|
|
`]}),`
|
|
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<script>
|
|
import { PhotoPack } from '@reuters-graphics/graphics-components';
|
|
|
|
const images = [
|
|
{ src: \`\${assets}/image1.jpg\`, altText: 'Photo 1', caption: 'Caption 1' },
|
|
{ src: \`\${assets}/image2.jpg\`, altText: 'Photo 2', caption: 'Caption 2' },
|
|
{ src: \`\${assets}/image3.jpg\`, altText: 'Photo 3', caption: 'Caption 3' },
|
|
{ src: \`\${assets}/image4.jpg\`, altText: 'Photo 4', caption: 'Caption 4' },
|
|
];
|
|
<\/script>
|
|
|
|
<!-- No layouts prop = smart defaults! -->
|
|
<PhotoPack {images} width="wide" />
|
|
`})})]})}function $(o={}){const{wrapper:e}={...i(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(s,{...o})}):s(o)}export{$ as default};
|