{"version":"1.0","provider_name":"Cloudinary Blog","provider_url":"https:\/\/cloudinary.com\/blog","title":"Generate Image Avatars with Initials in JavaScript","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"rnOEiTrIYm\"><a href=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\">Generate Image Avatars with Initials in JavaScript<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/embed#?secret=rnOEiTrIYm\" width=\"600\" height=\"338\" title=\"&#8220;Generate Image Avatars with Initials in JavaScript&#8221; &#8212; Cloudinary Blog\" data-secret=\"rnOEiTrIYm\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/* ]]> *\/\n<\/script>\n","thumbnail_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b-jpg?_i=AA","thumbnail_width":728,"thumbnail_height":400,"description":"Avatars create a digital representation of a user and are usually used in web profiles. Most of the time a user is required to upload an image and then used it as the profile. An example of this is Google Mail Services. When a user does not upload a profile image an avatar is generated using his\/her initials. Are you curious about how this magic happens? Don\u2019t worry I\u2019ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.","author_url":"https:\/\/cloudinary.com\/blog\/author\/eugene-musebe","author_name":"Eugene Musebe"}