-
Notifications
You must be signed in to change notification settings - Fork 13
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 ->
- gridId : ImageId, Unique identifier taken from image path in (media.gutools.co.uk/images/...)
- srcSizes : number[], Which crop widths to use (defined within media.gutools.co.uk/images//.) (eg: [140,500,1000])
- sizes : string, Comma separated string for each for given media size conditions (eg: (max-width: 740px) 140px,(max-width: 1067px) 500px,1000px)
- altText : string, Descriptor
- imgType? : Image format ('jpg | png')
- classModifiers? : string[], multiple css tag (--) modifiers
Storybook Component -> https://support-ui.gutools.co.uk/?path=/docs/grid-images-gridimage--weekly-campaign-hero
- Redux Glossary
- Why Redux Toolkit?
- Writing state slices with Redux Toolkit
- Handling action side effects in Redux
- Presentational and Container Components
- Scoped actions and reducers
- Server Side Rendering
- Form validation
- CI build process
- Post deployment testing
- Post deployment test runbook
- TIP Real User Testing
- Code testing and validation
- Visual testing
- Testing Apple Pay locally
- Test Users
- Deploying to CODE
- Automated IT tests
- Deploying Fastly VCL Snippets
- Archived Components
- Authentication
- Switchboard
- How to make a fake contribution
- The epic and banner
- Environments
- Tech stack
- Supported browsers
- Contributions Internationalisation
- Payment method internationalisation in Guardian Weekly
- Print fulfilment/delivery
- Updating the acquisitions model
- Runscope testing
- Scala Steward for dependency management
- Alarm Investigations
- Ticker data
- Ophan
- Quantum Metric
- [Google Tag Manager] (https://github.com/guardian/support-frontend/wiki/Google-Tag-Manager)