[CON & TP/Picture display:] Show full face/logo of person

[miriam-aha]

Context/background

Currently, when users upload their pictures to ReDI Connect or Talent Pool, they are automatically cropped by the system resulting in many headless mentors or other unfortunate views in their profile cards.

This issue affects the following cases:

1. CON: Pictures of mentors when mentees browse through the mentor profile cards (rectangular format)
2. TP: Pictures of jobseekers when company recruiters browse through the jobseeker profile cards (should be also rectangular format)
3. TP: Company logos shown in job postings - both in job posting card view (rectangular format), but the main issue is with the circular format in the

What needs to be done?

• [x] Find cropper library
• [x] Add crop function for all users when uploading pictures
• [x] Allow users to center their image to the given frame(s)
• [ ] Align cropped picture to fit well into profile card for mentors, jobseekers and job postings that is in rectangular format
• [ ] Align cropped picture to fit well into individual profile / job posting view for mentors, jobseekers and job postings that is in a circular format

[lorepirri]

Explore https://imagekit.io/ to center the image of a person-profile to the face of a person

[pilauria]

Selection of free cropper libraries that can do the work:

• react-cropper

• react-image-crop

• react-avatar-editor: lightweight library cropping tool with zero dependencies.

• react-easy-crop: react component for easily cropping images.

• react-drop-n-crop: combo plugin of two different scripts: the dropzone library to handle image uploads along with the React Cropper as an image cropping React component.

  Other (in vanilla JS)

• cropperjs : one of the most used. When hovering over the uploaded image you can scroll in and out using your mouse wheel to zoom. This also supports pinching and touch-based input devices.

• smartcrop.js: it has its own proprietary algorithm to recognize faces, compositions, and define a “good crop” after you click the upload button.

• Tinycrop

• Croppie: minimalist.

[ericbolikowski]

Thanks @pilauria. I'll review them tomorrow to add my two cents to the discussion.

[helloanil]

Selection of free cropper libraries that can do the work:

• react-cropper
• react-image-crop
• react-avatar-editor: lightweight library cropping tool with zero dependencies.
• react-easy-crop: react component for easily cropping images.
• react-drop-n-crop: combo plugin of two different scripts: the dropzone library to handle image uploads along with the React Cropper as an image cropping React component.

Other (in vanilla JS)

• cropperjs : one of the most used. When hovering over the uploaded image you can scroll in and out using your mouse wheel to zoom. This also supports pinching and touch-based input devices.
• smartcrop.js: it has its own proprietary algorithm to recognize faces, compositions, and define a “good crop” after you click the upload button.
• Tinycrop
• Croppie: minimalist.

Great stuff @pilauria. I think all of them would work for us but I especially liked two of them as they are really intuitive to use and also easy to implement:

• react-avatar-editor
• react-easy-crop

If @ericbolikowski also agrees, we can simply pick one of them and start implementing. However, since our current flow doesn't have an extra step of image cropping, we need to introduce a UI to allow users to do this. My recommendation would be this:

1. Clicking on the Edit Photo when you hover on the Profile Picture, will open up a modal, instead of the native file selector:

2. In the modal, we'll have three things:

• A Select File button to open a native file selector and select the image
• A Preview section, pretty much something like this demo: https://codesandbox.io/s/mystifying-golick-jul9xb
• A Save button to finalize the saving profile picture process (the same action we fire when a user selects a picture currently)

Note: react-avatar-editor seems to be supporting a file input out of the box. That's great. react-easy-crop instead expects a string which might force us to add an extra step of converting the selected file into a string somehow. So, react-avatar-editor is a tiny bit forward in the race of options for me :)

3. When the user selects the file, crops it as they want and clicks on the Save button, we'll finalize the process by uploading the cropped image to S3, as we do right now on the callback of file selection.

[pilauria]

Ok, @helloanil, thanks for the feedback. We'll tackle the problem as soon as @ericbolikowski checks out your inputs👍🏽

[ericbolikowski]

My vote goes with react-easy-crop:

• has a nice {cropShape: 'round'} feature that results in "circular cropping", letting the user preview exactly what kind of circular photo their profile will have
• good star count / lots of activity in terms of PRs, issues, commits, maintainer count / is Typescript
• nice examples on the demo page, including one that starts with a native file selector

I think there's basically two ways to integrate with what we've already got:

1. On file select, use the current solution to actually upload the image to S3 before we do any cropping. Let the user do the cropping. On final "Save" action, we basically save two things: (1) the URL to the S3 uploaded image (which we already do with present solution), and (2) save the "crop rectangle" (or circle) which we then later use
2. User picks image, user crops image, we programatically crop the image, get cropped image, upload cropped image to S3

Beware, I think option number 2 here would be tricky to integrate with the uploader mechanism we're using (react-s3-uploader). That is abandonware by now, and I recall it being hard to work with. Simply looking at the props it accepts, here's some speculation about how we might make it work:

• use it's preprocess prop to register a function that stops default behaviour on selecting a file, instead triggering the cropper component
• somehow create a "cropping done, go ahead and upload" button which "clicks" the native file selector again (programatically or via some kind of <label for=""> technique). Click event => preprocess is triggered again (I suppose) => do the cropping, return new image => react-s3-uploader handles the rest, and via existing hooks (e.g. onProgress, onError, onFinish) we handle different outcomes

Again - this is speculation. Recommend some quick prototyping to figure out if the above is feasible or not. Worst case scenario is that we have to drop react-s3-uploader completely, replacing it with one of these:

1. Another lib/dependency that does the same
2. We write our own upload mechanism from scratch (sounds like fun to me!)
3. We "copy paste" the source code of react-s3-uploader into a lib in our monorepo and tweak its source code to fit our needs

[patriciaredi]

We need to ask companies to use another logo (this happens on LinkedIn too)

[katamatata]

We have a new design of the mentor/mentee profile cards to be implemented in #681.