Placeholder Images and Gravatar Integration With Cloudinary

Written By Nadav Soferman May-30-2012 5 Min Read

Most web sites enrich their graphics by embedding pictures and photos of their model entities – users, articles, movies, etc. The graphic design of such web sites assumes that all these entities have associated pictures, otherwise the result will not look as satisfactory as intended. The graphics designer will not like it and the developer having to handle the boundary case of missing images won’t enjoy this either.

To circumvent this issue, you can design default placeholder images for cases where an entity doesn’t have its own image. You are probably well aware of the “egg” placeholder image Twitter uses as its default avatar placeholder and the person’s silhouette that Facebook uses for individuals that haven’t uploaded a profile photo.

Introducing Cloudinary’s latest integration

Cloudinary now supports delivering default images when a requested image does not exist. This is especially useful when you want to display an avatar placeholder for users without a Facebook or Twitter profile picture or for users that haven’t uploaded their photo to your application.

As a developer, you no longer have to care whether a picture is available for a certain entity. Cloudinary will automatically detect when an image is missing and deliver the alternative placeholder image through a fast CDN instead. In addition, Cloudinary will occasionally retry to fetch the original image, and use it instead of the placeholder for cases where it is made available at a later time.

Specifying default images is done using Cloudinary transformations’ ‘default_image’ parameter (‘d’ in URLs).

The following URL delivers a 100×100 thumbnail of a profile image with the ID ‘face_left’ while specifying that the image with the ‘avatar’ public ID should be used in case that ‘face_left’ does not exist.

…/image/upload/w_100,h_100,c_thumb,g_face,r_20,d_avatar.png/face_left.png

When trying to access a non existing ID, the default avatar placeholder picture is displayed instead:

…/image/upload/w_100,h_100,c_thumb,g_face,r_20,d_avatar.png/non_existing_id.png

Notice that the requested transformation, in this case resizing to 100×100, is done on the default image too, allowing you to upload a placeholder image once and transform it to many desired dimension in your various web pages.

Here’s the same example when integrating with one of Cloudinary’s client libraries, in this case Ruby on Rails:

<%= cl_image_tag("non_existing_id.png", 
                 :width => 100, :height => 100, 
                 :crop => :thumb, :gravity => :face, :radius => 20, 
                 :default_image => "avatar.png") %>

You can of course upload multiple placeholder images and use each image as the default for each different kind of model entity.

You can also apply the same solution when using Cloudinary’s automatic Facebook profile image fetching functionality. This allows you to specify an alternative default image to be used if the user does not exist on Facebook:

…/image/facebook/w_100,h_100,c_fill,d_avatar2.png/non_existing_id.jpg

Gravatar support

You have probably heard of Gravatar., a terrific service that allows you to host a single avatar (profile picture) to be used globally, rather than upload your profile photo on every website that requires it. Any user can sign up to Gravatar with his email address and upload a profile picture. Any website can then access that picture based on the email address of this user (encoded with MD5 hash for better privacy).

Cloudinary already supports automatically fetching, resizing and delivering Facebook and Twitter profile pictures. We’ve recently added support for Gravatar too. Starting today you can use Cloudinary to fetch your visitors’ Gravatar images, transform these to match your graphics design (non-square pictures, rounded corners, face detection, etc.), use your own default image for non-existing avatar placeholder and enjoy smart caching and fast CDN delivery while automatically refreshing these images when changed.

Embedding Gravatars is done by pointing to a URL like the one below. The ‘e3264cf16f34ecd3c7c564f5668cbc1e’ string in this example is the MD5 hash for info@cloudinary.com.

…/image/gravatar/e3264cf16f34ecd3c7c564f5668cbc1e.jpg

With Cloudinary you can of course transform the image to any desired dimension:

…/image/gravatar/w_120,h_80,c_fill/e3264cf16f34ecd3c7c564f5668cbc1e.jpg

If you use one of our client libraries, this is even simpler. For example, the following Ruby on Rails command embeds a 150×150 Gravatar for info@cloudinary.com:

<%= gravatar_profile_image_tag("info@cloudinary.com", :width => 150, :height => 150) %>

Gravatar supports default images. This allows you to always point to a URL of a Gravatar, based on the user’s email, even if no Gravatar is available for the user. Using Gravatar default images can be done with Cloudinary’s default images support as explained below. Simply specify one of the names of the Gravatar default images as the ‘default_image’ parameter (‘d’ in URLs).

The following example displays Gravatar’s ‘retro’ default image for a given identifier that has no avatar attached:

…/image/gravatar/d_retro/unknown_id.jpg

Gravatar has a cool feature of displaying a different ‘identicon’ for each user based on the given MD5 hash. The following URLs generate 36×36 thumbnails of two different users, while displaying the ‘identicon’ avatar if no Gravatar is available:

…/image/gravatar/d_identicon,h_36,w_36,c_fill/a9a1a6dafde8cf0c7e8ee9b177160939.jpg

…/image/gravatar/d_identicon,g_center,h_36,w_36,c_fill/e544501b2dd065b385e06a8a8dc7504b.jpg

With Cloudinary, you can also display custom default images you uploaded to Cloudinary. For example, the following URL delivers a Gravatar for the given email and defaults to the uploaded file named ‘avatar.jpg’:

…/image/gravatar/d_avatar.jpg,g_center,h_36,w_36,c_fill/e544501b2dd065b385e06a8a8dc7504b.jpg

Default images and Gravatar support are available now for all our free & paid plans. For easier integration with your existing web-dev framework, make sure to download our latest Ruby, Python & Django, PHP, jQuery or the community contributed Perl or .Net libraries.

Image Transformation

Placeholder Images and Gravatar Integration With Cloudinary

Introducing Cloudinary’s latest integration

Gravatar support

Customize Midjourney Images for Your E-commerce Website

Products

Solutions

Developers

Company

Contact Us

Introducing Cloudinary’s latest integration

Gravatar support

Featured Post