Components

ResponsiveImage

ResponsiveImage()

Constructor

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

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]
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
Tutorials:

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