finished docs;
This commit is contained in:
MinamiFunakoshiTR
parent
e9dff42de1
commit
4c8883552b
4 changed files with 72 additions and 71 deletions
|
|
@ -11,7 +11,7 @@ The `BeforeAfter` component shows a before-and-after comparison of an image.
|
|||
```svelte
|
||||
<script>
|
||||
import { BeforeAfter } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths'; // If using in the Graphics Kit
|
||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||
</script>
|
||||
|
||||
<BeforeAfter
|
||||
|
|
|
|||
|
|
@ -57,60 +57,61 @@ You can define as many layouts for as many images as you like.
|
|||
|
||||
<Canvas of={PhotoPackStories.Demo} />
|
||||
|
||||
## ArchieML
|
||||
## Using with ArchieML docs
|
||||
|
||||
With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
[blocks]
|
||||
# ...
|
||||
|
||||
type: photo-pack
|
||||
id: my-photo-pack
|
||||
class: mb-2
|
||||
width: wide
|
||||
textWidth: normal
|
||||
gap: 10
|
||||
[.images]
|
||||
src: images/my-img-1.jpg
|
||||
altText: Alt text
|
||||
caption: Lorem ipsum. REUTERS/Photog
|
||||
id: my-photo-pack # Optional
|
||||
class: mb-2 # Optional
|
||||
width: wide # Optional
|
||||
textWidth: normal # Optional
|
||||
gap: 10 # Optional; must be a number.
|
||||
|
||||
src: images/my-img-2.jpg
|
||||
altText: Alt text
|
||||
caption: Lorem ipsum. REUTERS/Photog
|
||||
# Array of image metadata
|
||||
[.images]
|
||||
src: images/my-img-1.jpg
|
||||
altText: Alt text
|
||||
caption: Lorem ipsum. REUTERS/Photog
|
||||
|
||||
src: images/my-img-3.jpg
|
||||
altText: Alt text
|
||||
caption: Lorem ipsum. REUTERS/Photog
|
||||
src: images/my-img-2.jpg
|
||||
altText: Alt text
|
||||
caption: Lorem ipsum. REUTERS/Photog
|
||||
|
||||
src: images/my-img-4.jpg
|
||||
altText: Alt text
|
||||
caption: Lorem ipsum. REUTERS/Photog
|
||||
...
|
||||
[]
|
||||
|
||||
src: images/my-img-5.jpg
|
||||
altText: Alt text
|
||||
caption: Lorem ipsum. REUTERS/Photog
|
||||
[]
|
||||
|
||||
# ...
|
||||
[]
|
||||
```
|
||||
|
||||
... which you'll parse out of a ArchieML block object before passing to the `PhotoPack` component.
|
||||
|
||||
> **Important ❗**: The prop `gap` must be a number. ArchieML renders all values -- including numbers -- as strings, so convert the `prop` value to a number before passing it to `PhotoPack`.
|
||||
|
||||
```svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { PhotoPack } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||
import { fixSrcPathArray } from '$utils/paths'; // 👈 If using in the Graphics Kit...
|
||||
|
||||
import content from '$locales/en/content.json';
|
||||
</script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
{#if block.type === 'text'}
|
||||
<!-- ... -->
|
||||
{:else if block.type === 'photo-pack'}
|
||||
{#if block.type === 'photo-pack'}
|
||||
<!-- Pass `assets` into the image source in Graphics Kit -->
|
||||
<!-- @TODO - Update this doc once the util to derive `images` with `assets` in the image src path is written and tested. See ticket https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164 -->
|
||||
<PhotoPack
|
||||
id={block.id}
|
||||
class={block.class}
|
||||
width={block.width}
|
||||
textWidth={block.textWidth}
|
||||
images={block.images.map((img) => ({
|
||||
src: `${assets}/${img.src}`,
|
||||
altText: img.altText,
|
||||
caption: img.caption,
|
||||
}))}
|
||||
gap={Number(block.gap)}
|
||||
images={fixSrcPathArray(block.images)}
|
||||
layouts={[
|
||||
{ breakpoint: 750, rows: [2, 3] },
|
||||
{ breakpoint: 450, rows: [1, 2, 2] },
|
||||
|
|
@ -122,6 +123,4 @@ gap: 10
|
|||
{/each}
|
||||
```
|
||||
|
||||
## Misisng alt text
|
||||
|
||||
If any of your images is missing `altText` a small warning will overlay the photo.
|
||||
<Canvas of={PhotoPackStories.ArchieML} />
|
||||
|
|
|
|||
|
|
@ -51,36 +51,49 @@
|
|||
{ breakpoint: 750, rows: [1, 3] },
|
||||
];
|
||||
|
||||
const archieMLImages = [
|
||||
{
|
||||
src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194630Z_544493697_UP1E.jpeg',
|
||||
caption:
|
||||
"Spain's Sergio Busquets and Aymeric Laporte react before a Germany goal is disallowed following a VAR review.",
|
||||
altText: 'alt text',
|
||||
},
|
||||
{
|
||||
src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_2007900040_UP1.jpeg',
|
||||
caption:
|
||||
"Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
|
||||
altText: 'alt text',
|
||||
},
|
||||
{
|
||||
src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_635809122_UP1E.jpeg',
|
||||
caption:
|
||||
"Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
|
||||
altText: 'alt text',
|
||||
},
|
||||
{
|
||||
src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T191015Z_1293757566_UP1.jpeg',
|
||||
caption:
|
||||
"Spain's Sergio Busquets in action with Germany's Thomas Muller.",
|
||||
altText: 'alt text',
|
||||
},
|
||||
{
|
||||
src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203612Z_1399473226_UP1.jpeg',
|
||||
caption: "Spain's Alvaro Morata celebrates scoring their first goal.",
|
||||
altText: 'alt text',
|
||||
},
|
||||
];
|
||||
const archieMLBlock = {
|
||||
type: 'photo-pack',
|
||||
id: 'my-photo-pack',
|
||||
class: 'mb-2',
|
||||
width: 'wide',
|
||||
textWidth: 'normal',
|
||||
gap: '15',
|
||||
images: defaultImages,
|
||||
gap: Number('15'),
|
||||
images: archieMLImages,
|
||||
layouts: [
|
||||
{ breakpoint: 750, rows: [2, 3] },
|
||||
{ breakpoint: 450, rows: [1, 2, 2] },
|
||||
],
|
||||
};
|
||||
|
||||
const altTextImages = [
|
||||
{
|
||||
altText: 'alt text',
|
||||
src: 'https://via.placeholder.com/1024x768.jpg',
|
||||
caption:
|
||||
'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
|
||||
maxHeight: 400,
|
||||
},
|
||||
{
|
||||
src: 'https://via.placeholder.com/1640x1180.jpg',
|
||||
altText: '',
|
||||
caption:
|
||||
'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
|
||||
},
|
||||
];
|
||||
const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
|
||||
</script>
|
||||
|
||||
<Story
|
||||
|
|
@ -92,14 +105,4 @@
|
|||
layouts: defaultLayouts,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Missing altText"
|
||||
exportName="MissingAltText"
|
||||
args={{
|
||||
width: 'wide',
|
||||
textWidth: 'normal',
|
||||
images: altTextImages,
|
||||
layouts: altTextLayouts,
|
||||
}}
|
||||
/>
|
||||
<Story name="ArchieML" args={archieMLBlock} />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
// Utils
|
||||
import { random4 } from '../../utils';
|
||||
import { groupRows } from './utils';
|
||||
// import { groupRows } from './utils';
|
||||
|
||||
// Types
|
||||
export interface Image {
|
||||
|
|
|
|||
Loading…
Reference in a new issue