Components

ResponsiveHeroImage

ResponsiveHeroImage()

Constructor

new ResponsiveHeroImage()

This component takes is a wrapper over ResponsiveImages, which accepts a story and returns the hero image. By default, it picks the alt text from the headline.

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 20