Cloudinary Blog

Placeholder images and Gravatar integration with Cloudinary

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

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind?

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Read more
Shortening the Development Cycle of Media-Related apps with Cloudinary

Currently, the Android platform boasts the highest demand for mobile solutions, as evidenced by Google’s announcement in 2017 that there were two billion monthly active Android devices, a number that is likely to increase in the years ahead. For app developers like you, now is the right time to build and release solutions for Android. you might have also noticed that a higher percentage of apps being developed nowadays are filled with visual media: images and videos.

Read more
Build Your Own Image Storyboard Android App

Globally, approximately two billion people now own smartphones, which also feature cameras capable of capturing photos and videos of a tonal richness and quality unimaginable even five years ago. Until recently, those cameras behaved mostly as optical sensors, catching light that determines the resulting image's pixels. The next generation of cameras, however, can blend hardware and computer-vision algorithms that apply to an image's semantic content, spawning creative mobile photo and video apps.

Read more
Cloudinary Delivers Simplified Image Management Workflow for Fairfax Media's Digital Transformation

Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.

Read more
Bleacher Report Scores with Real-Time Video Highlights Delivered by Cloudinary

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. Owned by Turner, a division of Time Warner, Bleacher Report's website and social channels focus on sports culture for the next generation of fans. Bleacher Report also has a five-star mobile app and popular email newsletters, which are part of the company’s strategy for instantly delivering in-depth articles, results and video highlights personalized for users’ favorite teams, players and leagues.

Read more