new ResponsiveImage()

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


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

<figure className="story-grid-item-image qt-image-16x9">
  <ResponsiveImage slug={props.story["hero-image-s3-key"]}
    defaultWidth={480} widths={[250,480,640]}
    sizes="(max-width: 500px) 98vw, (max-width: 768px) 48vw, 23vw"
    imgParams={{auto:['format', 'compress']}}/>
Name Type Required Description Default
slug string Yes The Path to the image, relative to 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]
name No
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
name No
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")

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