@nib-components/content-image

    2.3.13 • 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

    38

    Version

    2.3.13

    License

    none

    Unpacked Size

    63.9 kB

    Total Files

    42

    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
    • avatar
    • avatar
    • avatar
    • avatar