-
Notifications
You must be signed in to change notification settings - Fork 13
Component GridPicture
Paul Dempsey edited this page Feb 3, 2023
·
13 revisions
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 ->
- sources: [GridImage Props]
- fallback: : ImageId, Unique identifier taken from image path in (media.gutools.co.uk/images/...)
- fallbackSize: string, Comma separated string for each for given media size conditions
- altText : string, Descriptor
- fallbackImgType: Image format ('jpg | png')
Storybook Component -> https://support-ui.gutools.co.uk/?path=/docs/grid-images-gridpicture--editions-packshot
- 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
- 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)