ResponsiveImage

Constructor

# <ResponsiveImage slug metadata alt aspectRatio defaultWidth widths sizes imgParams imageCDN imageCDNFormat />

This component takes an image, and resizes it to the correct aspect ratio using imgix or thumbor.

See the tutorial Using ResponsiveImage for an in depth look at using this component

Example

import { ResponsiveImage } from '@quintype/components';

<figure className="story-grid-item-image qt-image-16x9">
  <ResponsiveImage slug={props.story["hero-image-s3-key"]}
    metadata={props.story["hero-image-metadata"]}
    alt={props.story['headline']}
    aspectRatio={[16,9]}
    defaultWidth={480} widths={[250,480,640]}
    sizes="(max-width: 500px) 98vw, (max-width: 768px) 48vw, 23vw"
    imgParams={{auto:['format', 'compress']}}/>
</figure>

PropTypes:

Name	Type	Required	Description
`slug`	string	Yes	The Path to the image, relative to images.assettype.com. Usually publisher/yyyy/mm//image-name.type
`metadata`	object	No	The image metadata as returned by the editor. Usually has width, height and focus point
`alt`	string	Yes	The alt text for this image
`aspectRatio`	arrayOf	No	The aspect ratio of the image output. Ex: [16, 9]
`defaultWidth`	number	No	The default width for the image, in case the browser does not support srcset
`widths`	arrayOf	No	The list of available widths
`sizes`	string	No	Hints for the browser to choose the best size. See Syntax
`imgParams`	object	No	Other parameters to pass to the image resizing engine
`imageCDN`	string	No	The hostname of the image CDN. This comes automatically from redux store, config["cdn-image"]
`imageCDNFormat`	string	No	The Image CDN Format. This comes automatically from redux store, config["image-cdn-format"] (default: "thumbor")

Tutorials:

Using ResponsiveImage

View Source components/responsive-image.js, line 80