npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

@nib-components/content-image

2.3.12 • Public • Published

@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 -

Name Field ID Type Required/Optional
Title label Short text Required
Description description Short text Optional
Desktop 2x desktop2x Media (Image) Required
Desktop 1x desktop1x Media (Image) Optional
Tablet 2x tablet2px Media (Image) Optional
Tablet 1x tablet1px Media (Image) Optional
Mobile 2x mobile2px Media (Image) Optional
Mobile 1x mobile1px Media (Image) Optional

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 -

Name Field ID Type Required/Optional
Title label Short text Required
Desktop desktop Integer Required
Tablet tablet Integer Required
Mobile mobile Integer Required

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 -

Name Field ID Type Required/Optional
Title label Short text Required
Title title Short text Optional
Caption caption Short text Optional
Picture picture Reference (Picture) Required
Source source Reference (Link) Optional

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
}

Keywords

none

install

npm i @nib-components/content-image

Downloadsweekly downloads

34

version

2.3.12

license

none

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability