Update: (2/1/2022) After using this recipe for real, we learned that when triggered from a file input, iOS uses a simplified version of their camera app that does not allow changing the ratio to square, which resulted in squished photos in certain places in Rock.

To solve that issue, I ended up essentially building my own in-browser camera using JS and HTML5 to be able to restrict the aspect ratio of the captured photo. Huge thanks to Tony Visconti for pointing me in the right direction for this solution!

Description

Our Connections Director wanted a way to quickly update profile photos of new members at a membership class without having to go through the whole process of searching for a person, going to their profile, editing the profile, editing the photo, capturing/uploading the new photo, and finally saving the profile. After some experimenting, I came up with a much more streamlined process with a lot fewer clicks, scrolls and page loads, that allows a staff member or volunteer to very quickly search, capture, upload and start again for the next person in line.

Summary

  1. The user loads a special page on a mobile device with a camera
  2. The user selects a person, and then is taken to a page with an embedded camera
  3. The user takes the picture and submits the form
  4. The selected profile is updated and the user is taken back to the beginning to start over with the next person in line

How-To

  1. Import the Rapid Profile Photo Upload workflow type (See attached files)
  2. Upload rapid-photo-upload-camera.lava to your website's theme folder. This recipe assumes it's under /Themes/[THEME]/Assets/Lava/custom/snippets, but if you decide to put it somewhere else, just make sure to update the path at the bottom of the Pre-HTML section of the Profile Photo field on the Form: Upload Photo action in the workflow.
  3. Upload camera-shutter.mp3 to the /Assets/Sounds folder of your theme
  4. Create a new page on the public website
    Basic Settings
    • Internal Name: Rapid Profile Photo Uploader
    • Layout: FullWidth (or optionally a new layout described below)
    Display Settings
    • Show Breadcrumbs: No
    • Show Description: No
    • Menu Display When: Never
    Advanced Settings
    • Allow Indexing: No
    • Page Route: quick-photos
  5. Optional: Create a new security role for volunteers that may need to use the page
  6. Set the following view permissions on the page
    • Allow: RSR - Rock Administration
    • Allow: RSR - Staff Workers
    • Allow: [optional volunteer role]
    • Deny: All Users
  7. Add a Workflow Entry block to the page
    • Name: Rapid Profile Photo Uploader
    • Workflow Type: Rapid Profile Photo Uploader
  8. Optional: Add some CSS to the block's Pre-HTML field to hide contact info from the person picker for a little extra privacy* if you're concerned about giving access to volunteers:
    <style>
    .picker .picker-select-item-details .contents .address,
    .picker .picker-select-item-details .contents .margin-t-sm { display: none; visibility: hidden; }
</style>

    * Please keep in mind that this is not actually secure. Anyone with a little tech knowledge could still access the contact information if they really wanted to.

  9. Load the page on a mobile device and try it out!

Minimal Layout

Depending on the design of your external site, it may help to create a new minimal layout for your theme that doesn't include your site's header, footer, etc. I found that the Splash layout from the internal Rock theme worked great. I just copied Splash.aspx and Splash.aspx.cs from /Themes/Rock/Layouts to the same folder in my external theme, and then edited Splash.aspx to delete the part that displayed the big Rock logo. (See attached files)

Follow Up

Please don't hesitate to leave a comment or hit me up on Rock Chat (@JeffRichmond) if you have questions, find any issues, or come up with improvements for this recipe.

Change Log

  • 2021-10-29 - Initial Version
  • 2022-02-01 - Added custom in-browser camera