@nib-components/content-image v2.3.13

@nib-components/content-image

3 content-image components - Picture, PicturePanel, BackgroundImage.

Installation

npm install --save @nib-components/content-image

Picture Usage

import Picture from '@nib-components/content-image';

<Picture
  description={description}
  desktop={desktop}
  tablet={tablet}
  mobile={mobile}
  breakpoints={breakpoints}
/>

Picture Properties

description

The description of the picture.

Optional. A string.

desktop

The desktop property contains the standard and hdpi picture urls for the desktop view.

Required. An object. Contains standard and hdpi properties, which are both required string types.

tablet

The tablet property contains the standard and hdpi picture urls for the tablet view.

Required. An object. Contains standard and hdpi properties, which are both required string types.

mobile

The mobile property contains the standard and hdpi picture urls for the mobile view.

Required. An object. Contains standard and hdpi properties, which are both required string types.

breakpoints

The breakpoints property contains the min desktop pixels value, and the max mobile pixels value. This is not supplied from the picture decorator.

Required. An object. Contains desktopMin and mobileMax, which are both required number types.

className

Optional className property to add styling to the Picture component.

Optional. A string

PicturePanel Usage

import {PicturePanel} from '@nib-components/content-image';

<PicturePanel
  picture={picture}
  breakpoints={breakpoints}
/>

PicturePanel Properties

title

The title for the picture panel.

Optional. A string.

caption

The caption for the picture panel.

Optional. A string.

source

The source for the picture panel is a link object. See @nib-components/content-link.

Optional. An object containing Link properties.

picture

The picture property contains the properties that the Picture component takes, without the breakpoints.

Required. An object containing Picture properties.

breakpoints

The breakpoints property contains the min desktop pixels value, and the max mobile pixels value. This is passed to the Picture component.

Required. An object. Contains desktopMin and mobileMax, which are both required number types.

className

Optional className property to add styling to the PicturePanel component.

Optional. A string

BackgroundImage Usage

import {BackgroundImage} from '@nib-components/content-image';

<BackgroundImage
  description={description}
  desktop={desktop}
  tablet={tablet}
  mobile={mobile}
  breakpoints={breakpoints}
>
  {children}
</BackgroundImage>

BackgroundImage Properties

description

The description of the background image.

Optional. A string.

desktop

The desktop property contains the standard and hdpi image urls for the desktop view.

Required. An object. Contains standard and hdpi properties, which are both required string types.

tablet

The tablet property contains the standard and hdpi image urls for the tablet view.

Required. An object. Contains standard and hdpi properties, which are both required string types.

mobile

The mobile property contains the standard and hdpi image urls for the mobile view.

Required. An object. Contains standard and hdpi properties, which are both required string types.

breakpoints

The breakpoints property contains the min desktop pixels value, and the max mobile pixels value. This is not supplied from the picture decorator.

Required. An object. Contains desktopMin and mobileMax, which are both required number types.

className

Optional className property to add styling to the BackgroundImage component.

Optional. A string

Change log

1.0.0

Initial release.

Contributing

You can edit the files in ./src, whilst running npm run watch. This will compile for the ./dist folder.

Contentful

Picture Component

The picture schema, mapping and decorator can be imported from @nib-components/content-image -

import Picture, {pictureSchema, pictureMapping, pictureDecorator} from @nib-components/content-image;

A Picture entry should be added to the relevant Contentful space with the following entries -

The 2x images are used to generate the standard urls, and 1x are used to generate the hdpi/retina urls for each device.

An Image Sizes entry should also be added to Contentful to specify the size that the image should be on each device. It should contain the following entries -

The Image Sizes content can be set for various sections of a site e.g. hero sizes, panel sizes etc. These can be set on the General Options and need to be passed to the pictureDecorator where they are used to generate the picture urls.

Breakpoints

The breakpoints property is not retrieved from Contentful. It may come from the theme of a site or can be hardcoded e.g.

const breakpoints = {
    desktopMin: 800,
    mobileMax: 480
};

PicturePanel Component

The picture panel schema, mapping and decorator can be imported from @nib-components/content-image -

import {PicturePanel, picturePanelSchema, picturePanelMapping, picturePanelDecorator} from @nib-components/content-image;

A Picture entry and Image Sizes entry should be added to the relevant Contentful space. These are described above in the Picture Component section. The PicturePanel contains a Picture component.

A Picture Panel entry should also be added with the following entries -

Breakpoints

The breakpoints property is not retrieved from Contentful. It may come from the theme of a site or can be hardcoded e.g.

const breakpoints = {
    desktopMin: 800,
    mobileMax: 480
}

BackgroundImage Component

The picture schema, mapping and decorator can be imported from @nib-components/content-image and are also used for the BackgroundImage component -

import {BackgroundImage, pictureSchema, pictureMapping, pictureDecorator} from @nib-components/content-image;

The content coming from Contentful is the same format for the BackgroundImage component and Picture component. See Picture Component section above for details.

Breakpoints

The breakpoints property is not retrieved from Contentful. It may come from the theme of a site or can be hardcoded e.g.

const breakpoints = {
    desktopMin: 800,
    mobileMax: 480
}