Module: Image

An image component in react.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`altText`	string	The alt text for the image.
`asBg`	boolean	Whether the image is a background image or not.
`aspectRatio`	number	The aspect ratio of the image, as width / height. This only applies to background images.
`caption`	JSX.Element \| string	The caption for the image. This only applies if the image is a background image.
`captionAttributes`	object	Attributes for the image caption element.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`height`	number	The height of the image, in px. This only applies if the image is a background image.
`imageAttributes`	object	Attributes for the image element.
`imagePosition`	string	The position of the image, if it is a background image.
`lazyload`	boolean	Whether to lazyload the image or not.
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`url`	string	The url of the image.
`width`	number	The width of the image, in px.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: elements/Image/index.js, line 23

Returns:

Return the function image component in React.

Type:: JSX.Element

Example

import Image from '@gravityforms/components/react/admin/elements/Image';

return (
    <Image
        asBg={ true }
        aspectRatio={ 1.5 }
        url="https://path.to.image/"
    />
);

Methods

(inner) getBackgroundImage(props) → {JSX.Element}

Get the markup in react for a background image.

Parameters:

Name Type Description

props

object

Props for the background image.

Properties

Name	Type	Description
`attributes`	object	The attributes for the image wrapper.
`imageAttributes`	object	The attributes for the background image.

Since: 1.1.15
Source: elements/Image/index.js, line 92

Returns:

The background image.

Type:: JSX.Element

(inner) getBackgroundPosition(position) → {string}

Get the background position for the background image.

Parameters:

Name	Type	Description
`position`	string	The background image position.

Source: elements/Image/index.js, line 76

Returns:

The position of the background image.

Type:: string

(inner) getImageCaption(props) → {JSX.Element}

Get the markup in react for a caption for the image component.

Parameters:

Name Type Description

props

object

Props for the caption.

Properties

Name	Type	Description
`children`	JSX.Element \| string	React element children.
`customAttributes`	object	Custom attributes for the caption.
`customClasses`	string \| Array \| object	Custom classes for the caption.

Since: 1.1.15
Source: elements/Image/index.js, line 115

Returns:

The caption for the image component.

Type:: JSX.Element

(inner) getImageWithCaption(props) → {JSX.Element}

Get the markup in react for an image with caption.

Parameters:

Name Type Description

props

object

Props for the image with caption.

Properties

Name	Type	Description
`attributes`	object	The attributes for the image wrapper.
`caption`	JSX.Element \| string	The caption for the image, can be a string or react children.
`captionAttributes`	object	The attributes for the caption element.
`imageAttributes`	object	The attributes for the image.

Since: 1.1.15
Source: elements/Image/index.js, line 147

Returns:

The image with caption.

Type:: JSX.Element