With a simple script trigger, you can make the process of adding Gravatar photos to your FileMaker contacts database automatic. Here we walk you through the necessary steps to integrate Gravatar with your own FileMaker app, and offer an updated version of our fmIgnite Starter solution with this integration built in.
What is Gravatar?
First we’ll address what is an avatar? No, not the movie with the blue people. An avatar is the image that appears next to your user name online. Some sites call it a “profile photo” or something similar, but the idea is the same. A small image that provides a quick way to recognize users. Some people use a photo of themselves, some use a cartoon version or other funny image.
Gravatar takes this one step further. A Gravatar is a Globally Recognized Avatar. With Gravatar, you can make your online presence more consistent by having the same avatar image on all of your online accounts (or at least the ones that support Gravatar). Gravatar is a free service for site owners, developers, and users from Automattic, the people that make WordPress.com.
As a user, you can associate multiple email addresses with one Gravatar account (personal and work, for instance) and choose to have the same image applied for any of them, or different images for different email logins. For site and app developers, Gravatar provides resources on how to implement their API into your site or app.
Using Gravatar with FileMaker
There are a number of ways to implement Gravatar with your FileMaker app. At its basic form, you are passing an email to Gravatar and asking if they have an image for it. Then you have to decide what you want to do with that response. This guide will walk you though the way we chose to implement it in our fmIgnite Starter solution.
Script trigger vs button.
Internally, we had some debate about the best way to implement this in a simple way. You could make a button that would trigger the lookup, and that would be simple, but it requires user interaction. We decided that the best would be to use an OnObjectSave script trigger on the email field. This way, whenever an email is entered or edited, it will automatically check for a Gravatar image.
Turning the email into a hash.
Accounts and images are looked up by an email address, but we don’t pass the address in plain text. Instead, Gravatar requires that we send a hash of the email address. What exactly is an MD5 hash, is beyond the scope of this article, but you can read more about it here. All we need to know is how to generate it in FileMaker. The GetContainerAttribute function has an MD5 option. To keep things consistent, we also want to apply Trim and Lower to the address. We do this in one step like this:
GetContainerAttribute ( Trim ( Lower ( $Email ) ) ; "MD5" )
Specify our optional arguments.
Gravatar supports image sizes from 1×1 pixel to 2048×2028 pixels. The default is 80×80 pixels, but we can specify anything in that range. In our example, we are requesting a size of 250×250 pixels. Since all Gravatar images are square, the request only requires the number once. The argument on the request URL looks like this: ?s=250
The other thing to specify is what to do when there isn’t an image available. By default, Gravatar will return their logo if there is no image… but that’s not entirely useful in our use case. For our purposes, we just want to know that there is no image, so we add the argument &d=404 to the URL.
Send the request.
Now that we have all of the parts together, we will send the request using the Insert from URL script step. This request is fairly simple. For more complex examples, see our article on cURLing in FileMaker 16. The only trick to this one is that it does require a container field on the layout to accept the image. The field can be off to the right margin, so it doesn’t actually have to display on the layout.
Test to see if we received a photo.
At this point, the target container field will contain… something. A simple test will tell us if it is a photo or not. We will call once again on GetContainerAttribute, this time testing the width to see if it matches the size we specified above. If there was no image, the container will contain some gibberish, and the width will be reported as ?, so they will not match. In that case, we clean up and exit. All of this should happen quickly enough that the user doesn’t realize it is going on.
If the width does match the size we specified, then we received an image from Gravatar. Now what? We chose to present the option to the user, using a card window to present the previous and the new image. There are buttons for each choice, but we also use an OnLayoutKeystroke script trigger to let the user quickly make their selection with the escape key to cancel (keep the old image), or the return or enter keys to choose the new image from Gravatar. In that case, we simply set the image from the global container field to the regular contact image field. Either way, we clean up by clearning the global image field.
Conclusion
Be sure to download the latest version of fmIgnite Starter to test out the Gravatar integration, or use it as a guide to add an integration to your own custom app. If you are looking for assistance integrating FileMaker with any web API, be sure to contact us about your project.