Component GridPicture - guardian/support-frontend GitHub Wiki

The GridPicture component can show completely different images at different breakpoints

A React Component linking multiple Guardian Grid Image library images (https://media.gutools.co.uk/search) with a PICTURE html tag containing multiple SOURCE tags and a fallback IMG tag.

GridPicture Props supplied are ->

1. sources: [GridImage Props]
2. fallback: : ImageId, Unique identifier taken from image path in (media.gutools.co.uk/images/...)
3. fallbackSize: string, Comma separated string for each for given media size conditions
4. altText : string, Descriptor
5. fallbackImgType: Image format ('jpg | png')

Storybook Component -> https://support-ui.gutools.co.uk/?path=/docs/grid-images-gridpicture--editions-packshot