Cloudinary Blog

Placeholder images and Gravatar integration with Cloudinary

Automatically Deliver Alternative Avatar Placeholder Image
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.
 
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. 
 
page load speed
 
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 100x100 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.
 
 
 
 
When trying to access a non existing ID, the default avatar placeholder picture is displayed instead:
 
 
 
Notice that the requested transformation, in this case resizing to 100x100, 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:
Copy to clipboard
<%= 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:
 
 
 

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 150x150 Gravatar for info@cloudinary.com:

Copy to clipboard
<%= 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 36x36 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. 

 

Recent Blog Posts

Partner news: Cloudinary-Getty Images Integration

Supported by intelligent automation, Cloudinary serves as an effective conduit between media asset management and delivery so you can take maximum advantage of assets, compress workflows, and build and coordinate engaging and inspiring customer experiences. Through Cloudinary’s Digital Asset Management (DAM) solution, which employs the company’s innovative image and video APIs, creative and marketing teams can benefit from them, as well as from many AI-powered and automated capabilities. As a result, you can transform, optimize, and deliver media at scale on an intuitive UI.

Read more
Why Audio in Video Matters

Many content creators and consumers tend to regard video as visuals, but that’s only part of the experience. Immersive video content includes strong audio. Just like in a movie, the audio for video content comprises many components: the narrator or subjects, the background music that sets the mood and draws viewers in, sound effects, and so forth.

Read more

For Developers: the HTML <picture> Element Explained

By Amarachi Amaechi
For Developers: the HTML <picture> Element Explained

We all know the good ol', tireless <img> element, which has been a long-time go-to for inserting graphics into webpages. Time doesn’t stop, however, and neither do technological advancements. So, let’s get you up to speed with the element’s modern alternative: the <picture> element.

Read more