# BeforeAfter

An image-comparison slider with a draggable, keyboard-accessible handle for revealing a before/after image pair.

**Category:** Components/Multimedia/BeforeAfter

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

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `width` | `ContainerWidth` | `'normal'` |  | Width of the chart within the text well. Options: wide, wider, widest, fluid Options: `normal`, `wide`, `wider`, `widest`, `fluid` |
| `height` | `number` | `600` |  | Height of the component |
| `heightRatio` | `number` | — |  | If set, makes the height a ratio of the component's width. |
| `beforeSrc` | `string` | — | ✓ | Before image source |
| `beforeAlt` | `string` | — | ✓ | Before image altText |
| `afterSrc` | `string` | — | ✓ | After image source |
| `afterAlt` | `string` | — | ✓ | After image altText |
| `class` | `string` | `''` |  | Class to target with SCSS. |
| `handleColour` | `string` | `'white'` |  | Drag handle colour |
| `handleInactiveOpacity` | `number` | `0.9` |  | Drag handle opacity |
| `handleMargin` | `number` | `20` |  | Margin at the edge of the image to stop dragging |
| `keyPressStep` | `number` | `0.05` |  | Percentage of the component width the handle will travel ona key press |
| `offset` | `number` | `0.5` |  | Initial offset of the handle, between 0 and 1. |
| `id` | `string` | `'before-after-' + random4() + random4()` |  | ID to target with SCSS. |
| `beforeOverlay` | `Snippet` | — |  | Optional snippet for a custom overlay for the before image. |
| `afterOverlay` | `Snippet` | — |  | Optional snippet for a custom overlay for the after image. |
| `caption` | `Snippet` | — |  | Optional snippet for a custom caption. |
| `ariaLabel` | `string` | `'Stacked before and after images with an adjustable slider'` |  | Custom ARIA label language to label the component. |

## Examples

### Demo

```svelte
<BeforeAfter
  beforeSrc={/* beforeImg */}
  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
  afterSrc={/* afterImg */}
  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
/>
```

### With text

```svelte
<BeforeAfter
  beforeSrc={beforeImg}
  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
  afterSrc={afterImg}
  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
>
  {#snippet beforeOverlay()}
    <div class="overlay p-3 before">
      <p class="h4 font-bold">July 7, 2020</p>
      <p class="body-note">Initially, this site was far smaller.</p>
    </div>
  {/snippet}
  {#snippet afterOverlay()}
    <div class="overlay p-3 after">
      <p class="h4 font-bold">Oct. 20, 2020</p>
      <p class="body-note">But then forces built up.</p>
    </div>
  {/snippet}
  {#snippet caption()}
    <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
  {/snippet}
</BeforeAfter>
```

## Documentation

# BeforeAfter

The `BeforeAfter` component shows a before-and-after comparison of an image.

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

<BeforeAfter
  beforeSrc={asset('/images/before-after/myrne-before.jpg')}
  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
  afterSrc={asset('/images/before-after/myrne-after.jpg')}
  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
/>
```

## Using with ArchieML docs

With the graphics kit, you'll likely get your text value from an ArchieML doc...

```yaml
# ArchieML doc
[blocks]

type: before-after
beforeSrc: images/before-after/myrne-before.jpg
beforeAlt: Satellite image of Russian base at Myrne taken on July 7, 2020.
afterSrc: images/before-after/myrne-after.jpg
afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.

[]
```

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

```svelte
<!-- App.svelte -->
{#each content.blocks as block}
  {#if block.type === 'before-after'}
    <BeforeAfter
      beforeSrc={asset(`/${block.beforeSrc}`)}
      beforeAlt={block.beforeAlt}
      afterSrc={asset(`/${block.afterSrc}`)}
      afterAlt={block.afterAlt}
    />
  {/if}
{/each}
```

## Adding text

To add text overlays and captions, use [snippets](https://svelte.dev/docs/svelte/snippet) for `beforeOverlay`, `afterOverlay` and `caption`. You can style the snippets to match your page design, like in [this demo](./?path=/story/components-multimedia-beforeafter--with-overlays).

> 💡**NOTE:** The text in the overlays are used as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your before and after images. You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might need.

```svelte
<BeforeAfter
  beforeSrc={beforeImg}
  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
  afterSrc={afterImg}
  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
>
  <!-- Optional custom text overlay for the before image -->
  {#snippet beforeOverlay()}
    <div class="overlay p-3 before text-left">
      <p class="h4 font-bold">July 7, 2020</p>
      <p class="body-note">Initially, this site was far smaller.</p>
    </div>
  {/snippet}

  <!-- Optional custom text overlay for the after image -->
  {#snippet afterOverlay()}
    <div class="overlay p-3 after text-right">
      <p class="h4 font-bold">Oct. 20, 2020</p>
      <p class="body-note">But then forces built up.</p>
    </div>
  {/snippet}

  <!-- Optional custom caption for both images -->
  {#snippet caption()}
    <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
  {/snippet}
</BeforeAfter>

<style lang="scss">
  .overlay {
    background: rgba(0, 0, 0, 0.45);
    max-width: 350px;
    &.after {
      text-align: right;
    }
    p {
      color: #ffffff;
    }
  }
</style>
```