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 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 a placeholder avatar 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 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 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:
<%= 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 an 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 placeholder for non-existing avatars 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:

<%= 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

CoreMedia Adds Cloudinary to its CoreMedia Studio Platform

Today we’re pleased to announce a new technology partnership with CoreMedia, a leading Content Experience Platform provider. CoreMedia users can now leverage Cloudinary’s web-based digital asset management (DAM) solution to organize, search, manage and optimize their media assets, including images and videos, and to orchestrate, preview and deliver digital experiences consistently and optimized across all channels and browsers. The official press release is available here.

Read more
Facial-Surveillance System for Restricted Zones

In Africa, where Internet access and bandwidth are limited, it’s not cost-effective or feasible to establish and maintain a connectivity for security and surveillance applications. That challenge makes it almost impossible to build a service that detects, with facial-recognition technology, if someone entering a building is authorized to do so. To meet the final-year research requirement for my undergraduate studies, I developed a facial-surveillance system. Armed with a background in computer vision, I decided to push the limits and see if I could build a surveillance system that does not require recording long video footage.

Read more
Complex Networks Case Study

Complex Networks has been using Cloudinary since 2014 to manage and optimize images across seven websites and two mobile apps, making editorial workflow more efficient, improving page performance and load time, and increasing user engagement. Cloudinary was instrumental in enabling Complex Networks to redesign its web properties. Without the flexibility that Cloudinary offers to both creative and development teams, it would not have been possible for Complex Networks to achieve such a fast time to market.

Read more
Automate Placeholder Generation and Accelerate Page Loads

If you run a Google search on LQIP you’ll see very few relevant articles, very little guidance, and definitely no Wikipedia articles. In this post, we’ll discuss some of the feedback on LQIP we have gathered from the community and suggest and open for conversation a few approaches based on the built-in capabilities of the Cloudinary service. Specifically, we’ll explain what LQIP are, where they are best used, and how you can leverage them to accelerate page loads and optimize user experience.

Read more
Best Practices for Optimizing Web Page Speed

If you're like most consumers today, you engage more with pictures or videos on a website than text. The stats don't lie - four times as many visitors would rather watch a video about a product than read about it, and sites with compelling images average twice as many views as text-heavy ones.

Read more
A day of fun with Girls Who Code and Cloudinary

During both my computer science studies and work in the tech field, there have not been a lot of women present. While our ranks have grown, women still make up only a small percentage. In many ways, I think the traditionally male-dominated world can be intimidating to women and girls who may be interested in pursuing these types of tech careers.

Read more