How to create perfectly circular photo containers in FileMaker
For quite some time, most apps (Microsoft's Office suite, Apple's Pages, Numbers and Keynote suite, and the like) have included a wide range of free templates (or starters). These free templates illustrate the use of their app and help drive user adoption.
FileMaker is no exception, as it ships with over a dozen Starter Solutions for the most commonly requested development use cases (Contacts, Inventory, Invoicing, etc.). Have you ever wondered who puts those free templates together?
Meeting the (template) creator
We got a chance to meet one such person on our visit to FileMaker headquarters in Santa Clara, California. His name is Nicolas Hunter, and for the last 5+ years he has been the Starter Solutions Developer for FileMaker Pro/Go/Server. If you've used a template or starter solution supplied by Filemaker Inc., then you have likely benefitted from Nicolas' work.
As it turns out, while at FileMaker headquarters we too got to benefit from Nicolas' skills. While stopping at our booth during the FBA Partner Fair, Nicolas quickly noticed a cropping flaw with the UI of a custom Contact Registration app we had put together for the event.
Using the iPad's front camera, our contact registration app included a "photo booth" feature which takes a "selfie" of the new contact and stores the photo in a round image container. The flaw Nicolas spotted was that the photos were not filling up the entire circle, they were inadequately cropped.
Perfectly Round Photos
Depending on whether the photo was taken in portrait or landscape mode, the contact's "selfie" would show horizontal or vertical gaps within the circular container field. The photos looked weird, like square pegs in a round hole.
Nicolas taught us a cropping and sizing technique involving the use of circular slide controls and oversized square container fields. Naturally, by the time we returned back to Miami we had forgotten exactly how to do it.
We contacted Nicolas, and he was kind enough to create a video tutorial, demonstrating exactly how to use this layout technique. Not only does this cropping technique work with photos, it also works for FileMaker's Charts/Graphs. We thought this was so awesome that we suggested he publicize this technique by posting it online somewhere.
Fast forward to late April and we discovered that not only had Nicolas not gotten around to publishing this technique, he was also coming to the end of his tenure with FileMaker, Inc. We thought other developers should definitely benefit from learning how to use this layout method, so we got Nicolas' permission to publish the tutorial video he had sent us. Check it out: