# FeaturePhoto

A full-width feature image with an optional caption and lazy-loading; flags a warning when alt text is missing.

**Category:** Components/Multimedia/FeaturePhoto

**Import:** `import { FeaturePhoto } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `src` | `string` | — | ✓ | Photo source |
| `altText` | `string` | — | ✓ | Photo altText |
| `id` | `string` | `''` |  | Add an id to target with custom CSS. |
| `class` | `string` | `''` |  | Add classes to target with custom CSS. |
| `caption` | `string` | — |  | Photo caption |
| `height` | `number` | `100` |  | Height of the photo placeholder when lazy-loading |
| `width` | `ContainerWidth` | `'normal'` |  | Width of the container: normal, wide, wider, widest or fluid Options: `normal`, `wide`, `wider`, `widest`, `fluid` |
| `textWidth` | `ContainerWidth` | `'normal'` |  | Set a different width for the text vs the photo. For example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`. Options: `normal`, `wide`, `wider`, `widest`, `fluid` |
| `lazy` | `boolean` | `true` |  | Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) |
| `top` | `number` | `0` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading. |
| `bottom` | `number` | `0` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading. |
| `left` | `number` | `0` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading. |
| `right` | `number` | `0` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading. |

## Examples

### Demo

```svelte
<FeaturePhoto src={/* sharkSrc */} altText="A shark!" caption="Carcharodon carcharias - REUTERS" />
```

### Missing altText

```svelte
<FeaturePhoto src={/* sharkSrc */} caption="Carcharodon carcharias - REUTERS" />
```

## Documentation

# FeaturePhoto

The `FeaturePhoto` component adds a full-width photo.

```svelte
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
</script>

<FeaturePhoto
  src={asset('/images/myImage.jpg')}
  altText="Some alt text"
  caption="A caption"
/>
```

## 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
width: normal
src: images/shark.jpg
altText: The king of the sea
caption: Carcharodon carcharias - REUTERS

[]
```

... which you'll parse out of a ArchieML block object before passing to the `FeaturePhoto` component.

```svelte
<!-- App.svelte -->
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';

  import content from '$locales/en/content.json';
  import { asset } from '$app/paths';
</script>

{#each content.blocks as block}
  {#if block.Type === 'text'}
    <!-- ... -->
  {:else if block.type === 'photo'}
    <FeaturePhoto
      width={block.width}
      src={asset(`/${block.src}`)}
      altText={block.altText}
      caption={block.caption}
    />
  {/if}
{/each}
```

## Missing alt text

`altText` is required in this component. If your photo is missing it, a small red text box will overlay the image.