Skip to content

Component GridImage

Paul Dempsey edited this page Feb 3, 2023 · 9 revisions

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

πŸ™‹β€β™€οΈ General Information

🎨 Client-side 101

βš›οΈ React+Redux

πŸ’° Payment methods

πŸŽ› Deployment & Testing

πŸ“Š AB Testing

🚧 Helper Components

πŸ“š Other Reference

1️⃣ Quickstarts

πŸ›€οΈ Tracking

Clone this wiki locally