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

 Lazy-Load React to Enhance Page Performance for Your Apps

React is a popular open-source JavaScript library for creating user interfaces (UIs) for single-page web applications, with React Native slated for building mobile apps. Helpfully, React organizes UIs into collections of reusable components, rendering feature management a cakewalk. However, to boost user engagement, conversion, and SEO ranking, you must optimize your app for fast page loads.

Read more
The Hub Helps Creative Talent Win Brand Work with Cloudinary

The Hub is decentralizing the creative process through its two-sided online marketplace that changes the way brands hire creators. The old model of committing all creative resources to one agency of record has proven time-consuming and expensive. Additionally, brands are limited to content that is only as good as the handful of people on that agency’s team.

Read more
A Primer on Microbrowsers

How we browse online in our quest of information has largely been an unknown factor since the Internet became ubiquitous in the mid-1990s. What’s indisputable is that we’re unlikely to type in URLs as a start, especially if we don’t have clues as to which site to visit. Google search revolutionized the ability to find relevant information through keyword entries, leading to the emergence of search-engine optimization (SEO), whereby you as site owners ensure that the popular keywords appear in your content.

Read more
Top 5 Reasons for Attending ImageCon 2020: A Digital Experience

ImageCon, Cloudinary’s annual conference on innovating the Visual Web, will be held digitally between July 27-30 with an agenda that outdoes the past years’, featuring presentations by developers, creatives, and marketing professionals across the globe. Not only will you learn the latest groundbreaking technologies, strategies, and best practices for media management, you’ll also have many opportunities to interact with our speakers and ask them questions live during the live Q&A sessions.

Read more
AI-based Automatic Image Cropping for E-Commerce

If you’ve come across this post and, based on the title, are expecting insights into object-oriented programming languages, then please forgive me for overloading the term object-oriented. I hope you don’t object when you discover that the objects in this post are not so much the instantiated class types, but real-life objects found in images. It is helpful though if you’re familiar with the likes of Java, PHP, Javascript or other popular frameworks, as you’ll be able to implement these automatic image cropping techniques in your code. Anyway, let’s cut to the chase - or should that be crop to the object...?

Read more