Profile image and header image upload functionality
Quick high-fidelity mocks of the image upload component layouts for the profile image and header image (previously “background image”) and notes on functionality.
Layout
Corrections to the images
- “Background image” will be replaced with “Header image”
- “Background colour” will be replaced with “Theme colour”
- The border colour of the upload component should match the colour of the icon in the component (it does in the second image but not the first. The second should be used for reference.)
- The vertical margins between the last three form items (profile image, header image, and theme colour) will be increased to match the spacing between the first two form items for consistency (they are currently too tightly spaced).
Functionality
- Copy on upload component when image X exists: “Change your X image” (profile, header)
- Copy on upload component when image X does not exist: “Add a X image” (profile, header)
- “Remove your X image” links are disabled if X image does not exist.
- Removing X image removes that image from the header completely.
- Removing the header image reveals the theme colour.
- Image components support drag and drop as well as click/tap to upload actions.
- The preview components should mirror exactly the aspect ratio of the actual images as they display in the header (their widths, however, should be fixed to column layout in the form – see the layout guides in the mocks and the actual implementation for reference).
To discuss + finalise
- Images should be intelligently-framed (e.g., using smartcrop.js – https://github.com/jwagner/smartcrop.js – via smartcrop-sharp: https://www.npmjs.com/package/smartcrop-sharp)
- The preview components should allow for modifications to the initial smart framing but we want to do this in a least obtrusive way possible. (Needs design.)