Components

ResponsiveHeroImage

<ResponsiveHeroImage />

Constructor

# <ResponsiveHeroImage />

This component is a wrapper over ResponsiveImages. It accepts story as a prop and renders story's hero image. If hero-image-s3-key is present, it takes that as slug and the story headline as image alt text. Else it takes the slug from the alternate hero-image, alt text as alternate headline. If both are absent, it doesn't render

import { ResponsiveHeroImage } from '@quintype/components';
<figure className="story-grid-item-image qt-image-16x9">
  <ResponsiveHeroImage story={props.story}
    aspectRatio={[16,9]}
    defaultWidth={480} widths={[250,480,640]} sizes="(max-width: 500px) 98vw, (max-width: 768px) 48vw, 23vw"
    imgParams={{auto:['format', 'compress']}}/>
</figure>

View Source components/responsive-hero-image.js, line 24