Component GridImage - guardian/support-frontend GitHub Wiki

The GridImage component is responsive and will request different sizes of the image at the specified breakpoints

A React Component linking the Guardian Grid Image library (https://media.gutools.co.uk/search) with an html IMG tag.

GridImage Props supplied are ->

  1. gridId : ImageId, Unique identifier taken from image path in (media.gutools.co.uk/images/...)
  2. srcSizes : number[], Which crop widths to use (defined within media.gutools.co.uk/images//.) (eg: [140,500,1000])
  3. sizes : string, Comma separated string for each for given media size conditions (eg: (max-width: 740px) 140px,(max-width: 1067px) 500px,1000px)
  4. altText : string, Descriptor
  5. imgType? : Image format ('jpg | png')
  6. classModifiers? : string[], multiple css tag (--) modifiers

Storybook Component -> https://support-ui.gutools.co.uk/?path=/docs/grid-images-gridimage--weekly-campaign-hero

⚠️ **GitHub.com Fallback** ⚠️