psammead-image-placeholder -

Description

The psammead-image-placeholder component has two placeholders available. The default is a div with a base-64 encoded SVG background image that depicts the BBC logo. The component accepts a ratio as a prop. In the Psammead component library, Image Placeholder is used within the psammead-figure component.

The alternative is an AMP supported placeholder which uses the same base-64 encoded SVG but as multiple amp-img components, which are loaded based on the current screen size. The component adheres to the parent amp-img size and functions as both a fallback and placeholder. See the AMP documentation on fallbacks and placeholders.

When to use this component

Psammead Image Placeholder is designed to appear as a temporary stand-in to be replaced by an actual image, for example in the case of lazy loading.

Installation

npm install @bbc/psammead-image-placeholder

Usage

ImagePlaceholder

The ImagePlaceholder component is expected to contain an image as a child element.

import ImagePlaceholder from '@bbc/psammead-image-placeholder';

const WrapperComponent = ({
  ratio,
}) => (
  <ImagePlaceholder ratio={ratio}>
    <img src="http://some-image.url">
  </ImagePlaceholder>
);

ImagePlaceholderAmp

The ImagePlaceholderAmp component is expected to be used as a child element of an amp-img component. Information about amp-img can be found on the AMP documentation website

import ImagePlaceholderAmp from '@bbc/psammead-image-placeholder';

const WrapperComponent = () => (
  <amp-img
    src="http://some-image.url"
    width="645px"
    height="128px"
  >
    <ImagePlaceholderAmp />
  </amp-img>
);

Props

ImagePlaceholder

| Argument | Type | Required | Default | Example | | -------- | -------------------------------------- | -------- | ------- | ------- | | Ratio | Number, ratio between height and width | Yes | N/A | 65.625 | | darkMode | Bool, true (dark) or false (normal) | No | false | false | | forwardStyle | Styling object that applies additional styling | No | null | { background: 'none' } |

ImagePlaceholderAmp

| Argument | Type | Required | Default | Example | | -------- | -------------------------------------- | -------- | ------- | ------- | | darkMode | Bool, true (dark) or false (normal) | No | false | false |

Accessibility notes

As a div with a background image or as an amp-img for it's AMP counterpart, Psammead Image Placeholder is a presentational element without semantic meaning. As such it does not need to meet colour contrast requirements.

Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.