Cloudinary Logo Docs Documentation
  • Get Started
    • Programmable Media
      • Developer get started guide
      • Service overview
      • Try it! Explorers and demos
      • Using Cloudinary Postman collections
      • How are transformations counted?
      • Glossary
      • Release notes
    • Digital Asset Management
      • DAM get started guide
      • Release notes
    • Video tutorial library
      • Programmatic asset management
      • Transformations and optimizations
      • Digital Asset Management (DAM)
      • Administration
      • Platform integrations
  • Guides
    • Media upload
      • Overview
      • Uploading assets
      • Transformations on upload
      • Analysis on upload
      • Upload presets
      • Upload API reference
    • Image transformations
      • Image transformations overview
      • Resizing and cropping
      • Placing layers on images
      • Effects and enhancements
      • Face-detection based transformations
      • Animated images
      • Transformations on 3D models
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Custom functions
      • Image collage generation
    • Video transformations
      • Video transformations overview
      • Resizing and cropping
      • Trimming and concatenating
      • Placing layers on videos
      • Effects and enhancements
      • Adaptive bitrate streaming
      • Converting videos to animated images
      • Audio transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Live streaming
      • Video slideshow generation
      • Video generation
    • Media delivery
      • Media optimization
      • Responsive images
      • Deliver remote media files
      • Social media profile pictures
      • Paged and layered media
      • Media access methods
      • Sprite generation
      • Advanced URL delivery options
    • Asset administration
      • Overview
      • Managing assets
      • Backups and version management
      • Account usage data
      • Webhook notifications
      • Signatures
    • Widgets and players
      • Upload Widget
      • Media Library Widget
      • Media Editor
      • Product Gallery
      • Video Player
    • Add-ons
      • Advanced Facial Attributes Detection
      • Amazon Rekognition AI Moderation
      • Amazon Rekognition Video Moderation
      • Amazon Rekognition Auto Tagging
      • Amazon Rekognition Celebrity Detection
      • Aspose Document Conversion
      • Cloudinary AI Background Removal
      • Cloudinary AI Content Analysis
      • Cloudinary Duplicate Image Detection
      • Google AI Video Moderation
      • Google AI Video Transcription
      • Google Auto Tagging
      • Google Automatic Video Tagging
      • Google Translation
      • Imagga Auto Tagging
      • Imagga Crop and Scale
      • JPEGmini Image Optimization
      • Perception Point Malware Detection
      • Microsoft Azure Video Indexer
      • Neural Artwork Style Transfer
      • OCR Text Detection and Extraction
      • Pixelz - Remove the Background
      • URL2PNG Website Screenshots
      • VIESUS™ Automatic Image Enhancement
      • WebPurify Image Moderation
    • Digital Asset Management
      • DAM overview
      • DAM user guide
      • DAM administrator guide
    • Media Optimizer
      • Overview
      • Quick starts
      • Configuration
      • Dashboard
      • Reports
      • Transformations
    • Platform integrations
      • Adobe Creative Cloud Connector
      • Akeneo PIM Integration
      • Chrome Media Library Extension
      • Magento Extension
      • Salesforce Commerce Cloud Cartridges
      • Salesforce Marketing Cloud App
      • SAP Commerce Extension
      • Shopify App
      • WordPress Plugin
      • Zapier Integration
      • Partner-built integrations
      • How to build your own integration
    • Pre-releases and labs
      • MediaFlows (Private Beta)
      • AR/3D Viewer and 3D Model Configurator
      • Media Inspector browser extension
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Structured metadata
      • Metadata API
      • Conditional metadata rules API
    • Provisioning API
    • Cloudinary CLI
    • Postman collections
    • Upload Widget API
    • Video Player API
    • Product Gallery API
    • Media Editor API
    • Media Optimizer
      • Media Optimizer API
      • Transformation reference
  • SDKs
    • Backend SDKs
      • Ruby/Rails SDK
      • PHP SDK
      • Python SDK
      • Node.js SDK
      • Java SDK
      • .NET SDK
      • Go SDK
      • Dart SDK
      • PHP SDK (Legacy)
    • Frontend SDKs
      • JavaScript SDK
      • Angular SDK
      • React SDK
      • Vue.js SDK
      • jQuery SDK
      • JavaScript SDK (Legacy)
      • Angular SDK (Legacy)
      • React SDK (Legacy)
      • Vue.js SDK (Legacy)
    • Mobile SDKs
      • iOS SDK
      • Android SDK
      • Flutter SDK
      • Kotlin SDK
    • Community-developed libraries
      • Gatsby
      • Gridsome
      • Laravel
      • Netlify
      • Next.js
      • NuxtJS
      • Storefront UI
BlogTrainingSupportPricingCommunityMediaJamsPodcastsDemosRoadmapCookbookAdditional Resources
  • Blog
  • Training
  • Support
  • Pricing
  • Community
  • MediaJams
  • Podcasts
  • Demos
  • Roadmap
  • Cookbook
  • Additional Resources
Login
sign up for free
  • Get Started
    • Programmable Media
      • Developer get started guide
      • Service overview
      • Try it! Explorers and demos
      • Using Cloudinary Postman collections
      • How are transformations counted?
      • Glossary
      • Release notes
    • Digital Asset Management
      • DAM get started guide
      • Release notes
    • Video tutorial library
      • Programmatic asset management
        • Upload programmatically
        • Create upload presets
        • Auto-tag assets
        • Diagnosing error codes
        • Upload assets in a React app
        • Deliver images with the Next.js Image component
        • Generate upload signature
        • Postman collections introduction
        • Find your credentials
        • Configure the Node.js SDK
        • Get started with the CLI
        • Scripting with the CLI
        • Get creative with the CLI
        • Upload with the CLI
        • Upload Widget
        • Product Gallery
        • Product Gallery accessibility
      • Transformations and optimizations
        • Transformation basics
        • Optimization tips
        • Gravity-based crops for images
        • Convert videos to animated images
        • Text overlay transformations
        • Complex transformations
        • Named transformations
        • Advanced image components
        • Zoompan effect
        • Social media image cards in Next.js
      • Digital Asset Management (DAM)
        • Folder sharing
        • Collection management
        • Collection sharing
        • Transformation presets
        • Media Library upload
        • Video management intro
        • Advanced Search
      • Administration
        • Enable automatic backups
        • Restore asset versions
        • Restore deleted assets
      • Platform integrations
        • Adobe CC Connector overview
        • SAP Commerce Extension overview
        • SFCC site cartridge intro
        • SFCC site cartridge installation
        • SFCC site cartridge modes
        • SFCC site cartridge videos
        • SFCC Page Designer cartridge
        • SFMC app - image block
        • SFMC app - video to GIF block
        • Shopify app
  • Guides
    • Media upload
      • Overview
      • Uploading assets
      • Transformations on upload
      • Analysis on upload
      • Upload presets
      • Upload API reference
    • Image transformations
      • Image transformations overview
      • Resizing and cropping
      • Placing layers on images
      • Effects and enhancements
      • Face-detection based transformations
      • Animated images
      • Transformations on 3D models
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Custom functions
      • Image collage generation
    • Video transformations
      • Video transformations overview
      • Resizing and cropping
      • Trimming and concatenating
      • Placing layers on videos
      • Effects and enhancements
      • Adaptive bitrate streaming
      • Converting videos to animated images
      • Audio transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Live streaming
        • Live streaming WebRTC (Beta)
        • Live streaming RTMP
        • Simulated live streaming
      • Video slideshow generation
      • Video generation
    • Media delivery
      • Media optimization
        • Optimize images
        • Optimize videos
        • Optimize audio files
      • Responsive images
        • Using HTML and dynamic image transformations
        • Using JavaScript frontend frameworks
        • Using the cloudinary-core JS library
        • Using client hints
      • Deliver remote media files
      • Social media profile pictures
      • Paged and layered media
      • Media access methods
      • Sprite generation
      • Advanced URL delivery options
    • Asset administration
      • Overview
      • Managing assets
      • Backups and version management
      • Account usage data
      • Webhook notifications
      • Signatures
    • Widgets and players
      • Upload Widget
      • Media Library Widget
      • Media Editor
      • Product Gallery
      • Video Player
        • Video Player features
        • Installation and setup
        • How to embed the Video Player
        • Video Player customization
        • Playlists and recommendations
        • HLS and MPEG-DASH
        • Events and analytics
        • Video ads and monetization
        • Shoppable Video
        • Interactive Video (Beta)
        • Video Player API reference
    • Add-ons
      • Advanced Facial Attributes Detection
      • Amazon Rekognition AI Moderation
      • Amazon Rekognition Video Moderation
      • Amazon Rekognition Auto Tagging
      • Amazon Rekognition Celebrity Detection
      • Aspose Document Conversion
      • Cloudinary AI Background Removal
      • Cloudinary AI Content Analysis
      • Cloudinary Duplicate Image Detection
      • Google AI Video Moderation
      • Google AI Video Transcription
      • Google Auto Tagging
      • Google Automatic Video Tagging
      • Google Translation
      • Imagga Auto Tagging
      • Imagga Crop and Scale
      • JPEGmini Image Optimization
      • Perception Point Malware Detection
      • Microsoft Azure Video Indexer
      • Neural Artwork Style Transfer
      • OCR Text Detection and Extraction
      • Pixelz - Remove the Background
      • URL2PNG Website Screenshots
      • VIESUS™ Automatic Image Enhancement
      • WebPurify Image Moderation
    • Digital Asset Management
      • DAM overview
      • DAM user guide
        • Uploading and storing assets
        • Folders and collections
        • Media asset search
          • Global Search
          • Advanced Search
          • Query Builder
          • Visual Search (Beta)
        • Managing individual media assets
      • DAM administrator guide
        • User and group management
          • SAML provisioning
        • Settings and preferences
          • Dynamic folders
        • Upload presets
        • Structured metadata
        • Asset management
        • Usage data
        • Dynamic templating
    • Media Optimizer
      • Overview
      • Quick starts
        • Walkthrough
        • Deliver from a web address
        • Deliver from an AWS S3 bucket
        • Deliver from a Google Storage bucket
        • Deliver using an HTTP proxy
      • Configuration
      • Dashboard
      • Reports
      • Transformations
    • Platform integrations
      • Adobe Creative Cloud Connector
      • Akeneo PIM Integration
      • Chrome Media Library Extension
      • Magento Extension
        • Magento product catalog API
      • Salesforce Commerce Cloud Cartridges
        • Page Designer Cartridge
          • Custom integration
        • Site Cartridge
          • Operational overview
          • Site Cartridge for SiteGenesis
          • Site Cartridge for SFRA
          • Site Cartridge FAQ
      • Salesforce Marketing Cloud App
      • SAP Commerce Extension
      • Shopify App
        • User guide
      • WordPress Plugin
        • Developer guide
      • Zapier Integration
      • Partner-built integrations
        • Agility Custom Field
        • Actindo Connection
        • Builder.io App Extension
        • Chioro Operation
        • Comestri Channel
        • Conscia Connector
        • Contentful App
        • Contentstack Custom Field Extension
        • Creative Force Asset Delivery
        • GraphCMS UI Extension
        • Kontent.ai Custom Element
        • Magnolia DAM Connector
        • Movidmo Upload Connector
        • OpenText TeamSite Connector
        • Sanity Plugin
        • Sitefinity DAM System Integration
        • Smint.io Data Source Connector
        • Stackbit Integration
        • Storyblok App Integration
        • Syndigo Advanced DAM App
        • Uniform Integration
        • Vue Storefront Component
      • How to build your own integration
    • Pre-releases and labs
      • MediaFlows (Private Beta)
        • Oveview
        • Getting started
        • Build your first flow
        • Block reference
      • AR/3D Viewer and 3D Model Configurator
        • Oveview
        • Customizations
        • 3D Model Configurator
      • Media Inspector browser extension
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Structured metadata
      • Metadata API
      • Conditional metadata rules API
    • Provisioning API
    • Cloudinary CLI
    • Postman collections
    • Upload Widget API
    • Video Player API
    • Product Gallery API
    • Media Editor API
    • Media Optimizer
      • Media Optimizer API
      • Transformation reference
  • SDKs
    • Backend SDKs
      • Ruby/Rails SDK
        • Ruby/Rails introduction
        • Ruby/Rails quick start
        • Ruby/Rails image and video upload
        • Ruby/Rails image transformations
        • Ruby/Rails video transformations
        • Ruby/Rails asset administration
        • CarrierWave integration
        • Attachinary integration
        • Active Storage integration
      • PHP SDK
        • PHP introduction
        • PHP quick start
        • PHP image and video upload
        • PHP image transformations
        • PHP video transformations
        • PHP asset administration
        • PHP SDK reference
      • Python SDK
        • Python introduction
        • Python quick start
        • Python image and video upload
        • Python image transformations
        • Python video transformations
        • Python asset administration
      • Node.js SDK
        • Node.js introduction
        • Node.js quick start
        • Node.js image and video upload
        • Node.js image transformations
        • Node.js video transformations
        • Node.js asset administration
      • Java SDK
        • Java introduction
        • Java quick start
        • Java image and video upload
        • Java image transformations
        • Java video transformations
        • Java asset administration
      • .NET SDK
        • .NET introduction
        • .NET quick start
        • .NET image and video upload
        • .NET image transformations
        • .NET video transformations
        • .NET asset administration
      • Go SDK
        • Go introduction
        • Go quick start
        • Go image and video upload
        • Go media transformations
        • Go asset administration
        • Go SDK Reference
      • Dart SDK
        • Dart introduction
        • Dart quick start
        • Dart image and video upload
        • Dart media transformations
      • PHP SDK (Legacy)
        • PHP introduction
        • PHP image and video upload
        • PHP image transformations
        • PHP video transformations
        • PHP asset administration
        • PHP migration guide
    • Frontend SDKs
      • JavaScript SDK
        • JavaScript introduction
        • JavaScript quick start
        • JavaScript image and video upload
        • JavaScript image transformations
        • JavaScript video transformations
        • JavaScript SDK reference
        • Transformation Builder reference
      • Angular SDK
        • Angular introduction
        • Angular quick start
        • Angular image and video upload
        • Angular image transformations
        • Angular video transformations
        • Angular SDK reference
        • Transformation Builder reference
      • React SDK
        • React introduction
        • React quick start
        • React image and video upload
        • React image transformations
        • React video transformations
        • React SDK reference
        • Transformation Builder reference
      • Vue.js SDK
        • Vue.js introduction
        • Vue.js quick start
        • Vue.js image and video upload
        • Vue.js image transformations
        • Vue.js video transformations
        • Transformation Builder reference
      • jQuery SDK
        • jQuery introduction
        • jQuery image and video upload
        • jQuery image transformations
        • jQuery video transformations
      • JavaScript SDK (Legacy)
        • JavaScript introduction
        • JavaScript image and video upload
        • JavaScript image transformations
        • JavaScript video transformations
        • JavaScript migration guide
      • Angular SDK (Legacy)
        • Angular introduction
        • Angular image and video upload
        • Angular image transformations
        • Angular video transformations
        • Angular migration guide
      • React SDK (Legacy)
        • React introduction
        • React image and video upload
        • React image transformations
        • React video transformations
        • React migration guide
      • Vue.js SDK (Legacy)
        • Vue.js introduction
        • Vue.js image and video upload
        • Vue.js image transformations
        • Vue.js video transformations
        • Vue.js migration guide
    • Mobile SDKs
      • iOS SDK
        • iOS introduction
        • iOS image and video upload
        • iOS image transformations
        • iOS video transformations
      • Android SDK
        • Android introduction
        • Android image and video upload
        • Android image transformations
        • Android video transformations
      • Flutter SDK
        • Flutter introduction
        • Flutter quick start
        • Flutter image and video upload
        • Flutter media transformations
      • Kotlin SDK
        • Kotlin media transformations
    • Community-developed libraries
      • Gatsby
      • Gridsome
      • Laravel
      • Netlify
      • Next.js
      • NuxtJS
      • Storefront UI
Login
sign up for free
  • Guides
  • Media delivery
  • Social media profile pictures

Social media profile pictures

Last updated: Dec-29-2022

If you use social media for authenticating users on your site or you integrate with their profiles in your web application, you may want to display social media profile pictures in your site.

On this page:

  • Delivering profile pictures
  • Transforming profile pictures
  • Refreshing profile pictures

Most social media sites provide access to profile pictures via API. They may provide the pictures in multiple dimensions, but they don't necessarily match the requirements of your site design.

Cloudinary allows you to easily display social media 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 delivers the images through a high performance CDN. Images can also be automatically refreshed when users change their profile pictures.

Delivering profile pictures

To integrate a profile picture in your website, point to a URL that contains a unique identifier or username of the social media photo.

The cloudinary image delivery URL for social media photos follows the format:

https://res.cloudinary.com/<cloud name>/image/<social delivery type>/<social identifier>.<format file extension>

Where:

  • cloud name: The unique identifier for your Cloudinary product environment, used for URL building and API access.
  • social delivery type: The social network delivery type. Supported values: facebook, twitter, gravatar.
  • social identifier: The unique identifier of the resource on the social network.
  • format file extension: (Optional) The requested delivery format of the image.

When a user accesses such a URL for the first time, Cloudinary downloads the appropriate profile picture from the social media site, stores it locally, and distributes it through a CDN. The next users to access it will receive the image quickly through the CDN.

Notes

  • Once you've fetched profile pictures from social media sites, you can find them in the Media Library by filtering the relevant image type from the More types field in the General tab of the advanced search.
  • Following Google's shutdown of its legacy Google+ API in March 2019, the Google+ (gplus) option is no longer available.
  • Following changes in Instagram in June 2020, the Instagram (instagram_name) option is no longer available.

Facebook profile pictures

To fetch profile pictures from Facebook, use the application-specific numeric Facebook ID as the social identifier and set the social delivery type to facebook.

Here's an example of fetching the Facebook profile picture for Bill Clinton:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinFlutterDartAll
url:
Copy to clipboard
https://res.cloudinary.com/demo/image/facebook/65646572251.jpg
Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("65646572251.jpg", :type=>"facebook")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('65646572251.jpg'))
  ->deliveryType("facebook");
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("65646572251.jpg", array("type"=>"facebook"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("65646572251.jpg").image(type="facebook")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("65646572251.jpg", {type: "facebook"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().type("facebook").imageTag("65646572251.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg").setDeliveryType("facebook");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('65646572251.jpg', {type: "facebook"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("65646572251.jpg", {type: "facebook"})
React (@cloudinary/react 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg").setDeliveryType("facebook");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="65646572251.jpg" type="facebook">

</Image>
Vue.js (@cloudinary/vue 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg").setDeliveryType("facebook");
Vue.js (cloudinary-vue 1.x (legacy)):
Copy to clipboard
<cld-image public-id="65646572251.jpg" type="facebook">

</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg").setDeliveryType("facebook");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="65646572251.jpg" type="facebook">

</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Action("facebook").BuildImageTag("65646572251.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").generate("65646572251.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().type("facebook").generate("65646572251.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("65646572251.jpg")
   deliveryType("facebook") 
}.generate()
Flutter (cloudinary_flutter 0.x):
Copy to clipboard
cloudinary.image('65646572251.jpg').transformation(Transformation()
  .setDeliveryType("facebook"));
Dart (cloudinary_dart 0.x):
Copy to clipboard
cloudinary.image('65646572251.jpg').transformation(Transformation()
  .setDeliveryType("facebook"));
Bill Clinton profile pic

Note
For privacy protection reasons, Facebook no longer supports accessing user images based on the user name; only the application-specific numeric ID.

Twitter profile pictures

To fetch profile pictures from Twitter, use either the Twitter User ID (delivery type = twitter) or Twitter Screen Name (delivery type = twitter_name) as the social identifier.

Here's an example of fetching the Twitter profile picture for Bill Clinton using the Twitter User ID:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinFlutterDartAll
url:
Copy to clipboard
https://res.cloudinary.com/demo/image/twitter/1330457336.jpg
Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("1330457336.jpg", :type=>"twitter")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('1330457336.jpg'))
  ->deliveryType("twitter");
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("1330457336.jpg", array("type"=>"twitter"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("1330457336.jpg").image(type="twitter")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("1330457336.jpg", {type: "twitter"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().type("twitter").imageTag("1330457336.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("1330457336.jpg").setDeliveryType("twitter");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('1330457336.jpg', {type: "twitter"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("1330457336.jpg", {type: "twitter"})
React (@cloudinary/react 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("1330457336.jpg").setDeliveryType("twitter");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="1330457336.jpg" type="twitter">

</Image>
Vue.js (@cloudinary/vue 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("1330457336.jpg").setDeliveryType("twitter");
Vue.js (cloudinary-vue 1.x (legacy)):
Copy to clipboard
<cld-image public-id="1330457336.jpg" type="twitter">

</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("1330457336.jpg").setDeliveryType("twitter");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="1330457336.jpg" type="twitter">

</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Action("twitter").BuildImageTag("1330457336.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "twitter").generate("1330457336.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().type("twitter").generate("1330457336.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("1330457336.jpg")
   deliveryType("twitter") 
}.generate()
Flutter (cloudinary_flutter 0.x):
Copy to clipboard
cloudinary.image('1330457336.jpg').transformation(Transformation()
  .setDeliveryType("twitter"));
Dart (cloudinary_dart 0.x):
Copy to clipboard
cloudinary.image('1330457336.jpg').transformation(Transformation()
  .setDeliveryType("twitter"));
Bill Clinton profile pic

Here's an example of fetching the same profile picture using the Twitter Screen Name:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinFlutterDartAll
url:
Copy to clipboard
https://res.cloudinary.com/demo/image/twitter_name/BillClinton.jpg
Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("BillClinton.jpg", :type=>"twitter_name")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('BillClinton.jpg'))
  ->deliveryType("twitter_name");
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("BillClinton.jpg", array("type"=>"twitter_name"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("BillClinton.jpg").image(type="twitter_name")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("BillClinton.jpg", {type: "twitter_name"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().type("twitter_name").imageTag("BillClinton.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("BillClinton.jpg").setDeliveryType("twitter_name");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('BillClinton.jpg', {type: "twitter_name"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("BillClinton.jpg", {type: "twitter_name"})
React (@cloudinary/react 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("BillClinton.jpg").setDeliveryType("twitter_name");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="BillClinton.jpg" type="twitter_name">

</Image>
Vue.js (@cloudinary/vue 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("BillClinton.jpg").setDeliveryType("twitter_name");
Vue.js (cloudinary-vue 1.x (legacy)):
Copy to clipboard
<cld-image public-id="BillClinton.jpg" type="twitter_name">

</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("BillClinton.jpg").setDeliveryType("twitter_name");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="BillClinton.jpg" type="twitter_name">

</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Action("twitter_name").BuildImageTag("BillClinton.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "twitter_name").generate("BillClinton.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().type("twitter_name").generate("BillClinton.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("BillClinton.jpg")
   deliveryType("twitter_name") 
}.generate()
Flutter (cloudinary_flutter 0.x):
Copy to clipboard
cloudinary.image('BillClinton.jpg').transformation(Transformation()
  .setDeliveryType("twitter_name"));
Dart (cloudinary_dart 0.x):
Copy to clipboard
cloudinary.image('BillClinton.jpg').transformation(Transformation()
  .setDeliveryType("twitter_name"));
Bill Clinton profile pic

Gravatar profile pictures

To fetch profile pictures from Gravatar, use the user's email address which has been encoded with an MD5 hash as the social identifier and set the social delivery type to gravatar.

Here's an example of fetching the Gravatar picture for the email address info@cloudinary.com:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinFlutterDartAll
url:
Copy to clipboard
https://res.cloudinary.com/demo/image/gravatar/e3264cf16f34ecd3c7c564f5668cbc1e.jpg
Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", :type=>"gravatar")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('e3264cf16f34ecd3c7c564f5668cbc1e.jpg'))
  ->deliveryType("gravatar");
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", array("type"=>"gravatar"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").image(type="gravatar")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", {type: "gravatar"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().type("gravatar").imageTag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").setDeliveryType(
  "gravatar"
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('e3264cf16f34ecd3c7c564f5668cbc1e.jpg', {type: "gravatar"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", {type: "gravatar"})
React (@cloudinary/react 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").setDeliveryType(
  "gravatar"
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="e3264cf16f34ecd3c7c564f5668cbc1e.jpg" type="gravatar">

</Image>
Vue.js (@cloudinary/vue 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").setDeliveryType(
  "gravatar"
);
Vue.js (cloudinary-vue 1.x (legacy)):
Copy to clipboard
<cld-image public-id="e3264cf16f34ecd3c7c564f5668cbc1e.jpg" type="gravatar">

</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").setDeliveryType(
  "gravatar"
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="e3264cf16f34ecd3c7c564f5668cbc1e.jpg" type="gravatar">

</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Action("gravatar").BuildImageTag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().type("gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("e3264cf16f34ecd3c7c564f5668cbc1e.jpg")
   deliveryType("gravatar") 
}.generate()
Flutter (cloudinary_flutter 0.x):
Copy to clipboard
cloudinary.image('e3264cf16f34ecd3c7c564f5668cbc1e.jpg').transformation(Transformation()
  .setDeliveryType("gravatar"));
Dart (cloudinary_dart 0.x):
Copy to clipboard
cloudinary.image('e3264cf16f34ecd3c7c564f5668cbc1e.jpg').transformation(Transformation()
  .setDeliveryType("gravatar"));
Cloudinary Gravatar

Transforming profile pictures

Cloudinary fetches a good quality resolution of the profile picture. To create transformed versions of users' profile pictures using your required image format and dimensions, pass transformation instructions as part of the URL, exactly as you would with your regular Cloudinary images.

For example, if the graphic design of your web site requires profile pictures in JPG of 80x120:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinFlutterDartAll
url:
Copy to clipboard
https://res.cloudinary.com/demo/image/facebook/c_fill,g_face,h_120,w_80/65646572251.jpg
Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("65646572251.jpg", :gravity=>"face", :height=>120, :width=>80, :crop=>"fill", :type=>"facebook")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('65646572251.jpg'))
  ->resize(Resize::fill()->width(80)
->height(120)
  ->gravity(
  Gravity::focusOn(
  FocusOn::face()))
  )
  ->deliveryType("facebook");
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("65646572251.jpg", array("gravity"=>"face", "height"=>120, "width"=>80, "crop"=>"fill", "type"=>"facebook"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("65646572251.jpg").image(gravity="face", height=120, width=80, crop="fill", type="facebook")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("65646572251.jpg", {gravity: "face", height: 120, width: 80, crop: "fill", type: "facebook"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").height(120).width(80).crop("fill")).type("facebook").imageTag("65646572251.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setDeliveryType("facebook");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('65646572251.jpg', {gravity: "face", height: 120, width: 80, crop: "fill", type: "facebook"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("65646572251.jpg", {gravity: "face", height: 120, width: 80, crop: "fill", type: "facebook"})
React (@cloudinary/react 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setDeliveryType("facebook");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="65646572251.jpg" type="facebook">
  <Transformation gravity="face" height="120" width="80" crop="fill" />
</Image>
Vue.js (@cloudinary/vue 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setDeliveryType("facebook");
Vue.js (cloudinary-vue 1.x (legacy)):
Copy to clipboard
<cld-image public-id="65646572251.jpg" type="facebook">
  <cld-transformation gravity="face" height="120" width="80" crop="fill" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("65646572251.jpg")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setDeliveryType("facebook");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="65646572251.jpg" type="facebook">
  <cl-transformation gravity="face" height="120" width="80" crop="fill">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(120).Width(80).Crop("fill")).Action("facebook").BuildImageTag("65646572251.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation().setGravity("face").setHeight(120).setWidth(80).setCrop("fill")).generate("65646572251.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").height(120).width(80).crop("fill")).type("facebook").generate("65646572251.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("65646572251.jpg")
   resize(Resize.fill() { width(80)
 height(120)
   gravity(
  Gravity.focusOn(
  FocusOn.face()))
   })
   deliveryType("facebook") 
}.generate()
Flutter (cloudinary_flutter 0.x):
Copy to clipboard
cloudinary.image('65646572251.jpg').transformation(Transformation()
  .resize(Resize.fill().width(80)
.height(120)
  .gravity(
  Gravity.focusOn(
  FocusOn.face()))
  )
  .setDeliveryType("facebook"));
Dart (cloudinary_dart 0.x):
Copy to clipboard
cloudinary.image('65646572251.jpg').transformation(Transformation()
  .resize(Resize.fill().width(80)
.height(120)
  .gravity(
  Gravity.focusOn(
  FocusOn.face()))
  )
  .setDeliveryType("facebook"));
Bill Clinton profile pic

Note the use of the face-detection based gravity value in the above example (g_face in the URL) to ensure that the face remains in focus even when changing the image's aspect ratio.

See Image transformations for more details about the possible transformation options and the supported crop modes.

Refreshing profile pictures

Cloudinary automatically checks whether profile pictures have changed, according to a pre-defined caching period. If a profile picture has changed, Cloudinary automatically re-fetches the original image as well as all transformed images. By default, profile images are checked for changes once every 7 days. Cloudinary customers with a paid account can request to change this default expiration time to any desired interval by submitting a support request.

You can also force an explicit refresh of a picture. When you use this option, the call returns the version of the new image, which you can use to bypass previously cached CDN copies. Alternatively, you can use the invalidate parameter, but if you do, make sure you are aware of the considerations involved in invalidating cached media assets on the CDN.

✔️ Feedback sent!

✖️  
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*


Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page:

  • Deliver remote media files
  • Paged and layered media
Cloudinary Logo - White
Products
  • Programmable Media
  • DAM
  • Demos
  • Pricing
  • Roadmap
  • FAQ
Solutions
    • Why Cloudinary
    • Video API
    • E-commerce
    • Retail
    • Media & Entertainment
    • Travel & Hospitality
    • Non-Profits
    • Our Customers
    • Resource Library
    Developers
    • Getting Started
    • Documentation
    • SDKs
    • Add-ons
    • Podcasts
    • Cookbook
    Company
    • About Us
    • Customers
    • Partners
    • Events
    • Careers
    • Newsroom
    • Blog
    • Brand Assets
    • Trust
    Contact Us
    • Technical Support
    • Contact Sales
    • Education & Training
    • Institute of Quality & Control
    • GDPR
    • SOC
    • Forbes Best Startup Employers 2020
    • MarTech Breakthrough Awards
    • Best Places to Work SVBJ 2018
    • 2020 The World's Best Cloud Companies
    • Terms of Use
    • Privacy Policy
    • DMCA Notice

    © 2023 Cloudinary. All rights reserved.