Components

ResponsiveImage

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

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 Default
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:

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