Whether you use Twitter for signing in users to your site or you simply integrate with Twitter profiles in your Web application, you probably need to display Twitter profile pictures in your site.
Twitter provides access to the profile pictures of users as part of their API. They provide the pictures in multiple dimensions, but they don’t necessarily match the requirements of your Web site design.
Cloudinary allows you to easily display Twitter profile pictures as part of your web application. You can display them in any dimension or aspect ratio you need, Cloudinary resizes or crops the pictures for you and deliver the images through a high performance CDN. Images are also automatically refreshed when users change their profile pictures.
To integrate a profile picture in you web site, you simply point to a URL that contains the unique Twitter User ID or Twitter Screen Name of the user.
For example, if your Cloudinary cloud name is ‘demo’, the following URL will display the profile picture of Bill Clinton:
You can also display the same profile picture using the numeric ID of this Twitter profile:
Here’s an example that adds an image HTML tag using our Ruby on Rails library:
Or when using Twitter User ID:
When a user accesses such a URL for the first time, Cloudinary downloads the appropriate profile picture from Twitter, stores it locally in a high performance storage solution, and distributes it through a CDN. The next users to access it will receive the image quickly through the CDN while using smart cache settings.
You can create transformed versions of users’ profile pictures using your required image format and dimensions. Twitter provides profile pictures in different resolutions. Cloudinary smartly decides which resolution to use as a baseline for generating the image you need.
For displaying Twitter profile pictures in your desired format and dimensions, simply pass transformation instructions as part of the URL.
For example, if the graphic design of your web site requires profile pictures in JPG of 80x120:
When using our Ruby on Rails library, you can do the following:
twitter_name_profile_image_tag("billclinton.jpg", :width => 80, :height => 120, :crop => :fill)
See Image transformations for more details about the possible transformation options and the supported crop modes.
Users might change the Twitter profile picture once in a while. You want the images displayed in your site to be updated as well. Cloudinary manage that for you. We don’t update the images immediately when users change their pictures, but we do that not much later. Cache settings of resources are configured in a way to allow updating them automatically on users’ browsers.
You actually don’t have to do anything for making that work. It just works. All transformed images in any format or dimension will also be refreshed.