{"id":24374,"date":"2016-08-24T03:01:37","date_gmt":"2016-08-23T17:01:37","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24374"},"modified":"2025-04-25T08:17:27","modified_gmt":"2025-04-24T22:17:27","slug":"wordpress-avatar-via-gravatar-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-avatar-via-gravatar-primer-tutorial\/","title":{"rendered":"WordPress Avatar via Gravatar Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Gravatar\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Avatar via Gravatar Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Gravatar\/gravatar.jpg\" title=\"WordPress Avatar via Gravatar Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">WordPress Avatar via Gravatar Primer Tutorial<\/p><\/div>\n<p>Today we explain how we, as the &#8220;admin&#8221; user on this blog, just the other day, started to use a personalised image avatar, primarily seen regarding contributions to the comments at this blog.<br \/>\n But before we proceed, we were told, thanks, of a useful link <a target=\"_blank\" href='https:\/\/www.websiteplanet.com\/blog\/logo-design-stats\/' title='60+ Logo Stats and Facts \u2013 New Fortune 500 List Research [2025]' rel=\"noopener\">60+ Logo Stats and Facts \u2013 New Fortune 500 List Research [2025]<\/a> to further read about concepts related to this topic.<\/p>\n<p>So what is an avatar?  My advice, regarding avatar and logo design aspects, is to read the great detail in Holly Smith&#8217;s <a target=\"blank\" href='https:\/\/www.logodesign.net\/ultimate-step-guide-logo-design' title='Ultimate Guide to Logo Design - Step by Step Explanation | LogoDesign.net' rel=\"noopener\">Ultimate Guide to Logo Design &#8211; Step by Step Explanation | LogoDesign.net<\/a>. And let&#8217;s see a bit of how <a target=\"_blank\" title='Avatar information fropm Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Avatar_(computing)' rel=\"noopener\">Wikipedia<\/a> explains it below &#8230;<\/p>\n<blockquote cite=\"https:\/\/en.wikipedia.org\/wiki\/Avatar_(computing)\"><p>\nIn computing, an avatar is the graphical representation of the user or the user&#8217;s alter ego or character. It may take either a three-dimensional form,[1] as in games or virtual worlds, or a two-dimensional form as an icon in Internet forums and other online communities.[2][3] Avatar images have also been referred to as &#8220;picons&#8221; (personal icons)[4] in the past, though the usage of this term is uncommon now. It can also refer to a text construct found on early systems such as MUDs.[5] The term &#8220;avatar&#8221; can also refer to the personality connected with the screen name, or handle, of an Internet user.[6] Common avatars may be Internet memes.\n<\/p><\/blockquote>\n<p>Where, in a WordPress blog, do you go about controlling this?  This happens in the administration area&#8217;s Setting menu&#8217;s Discussion menu&#8217;s Avatar section &#8230;<br \/>\nwhose avatar options, starting with its default one, are &#8230;<\/p>\n<ul>\n<li>Mystery Person<\/li>\n<li>Blank<\/li>\n<li>Gravatar Logo<\/li>\n<li>Identicon (Generated)<\/li>\n<li>Wavatar (Generated)<\/li>\n<li>MonsterID (Generated)<\/li>\n<li>Retro (Generated)<\/li>\n<\/ul>\n<p> &#8230; but the fact is, the changes we made today required no change to the default &#8220;Mystery Person&#8221; setting here.  My curiosity came from seeing other commenters with personalised image avatars, so went to this section and saw the word <a target=\"_blank\" href='http:\/\/en.gravatar.com' title='Gravatar home page' rel=\"noopener\">&#8220;Gravatar&#8221;<\/a>, associated with the word <a target=\"_blank\" title='Logo information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Logo' rel=\"noopener\">&#8220;logo&#8221;<\/a>, and put two and two together via Google searches for the gist of &#8220;how does WordPress work with Gravatar with respect to avatars?&#8221;.<\/p>\n<p>Roughly speaking, at Gravatar, given a <a target=\"_blank\" title='Wordpress.com web hosting of blog' href='http:\/\/wordpress.com' rel=\"noopener\">WordPress.com<\/a> account login using the username that is the email address of your WordPress comment user, a link can be made there between this username\/email and a public URL pointing at your personalised image, ours being plonked onto <a target=\"_blank\" title='Personalized image' href='http:\/\/www.rjmprogramming.com.au\/camel.png' rel=\"noopener\"><img src='http:\/\/www.rjmprogramming.com.au\/camel.png' title='Personized image'><\/img>http:\/\/www.rjmprogramming.com.au\/camel.png<\/a> &#8230; and it is good here, if your image &#8220;place&#8221; can also &#8220;swing&#8221; the <a target=\"_blank\" title='HTTPS secure communication protocol information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTTPS' rel=\"noopener\">https<\/a>:\/\/ secure communication protocol &#8230; so that according to what we read, this email used at blogs or forums on the net, such as WordPress blogs, can have this Gravatar relationship, or link, be consulted to map that personalised image onto any avatar displayed with a blog or forum contribution by this emailer.  Pretty cute, huh?<\/p>\n<p>Maybe you read below our pros and cons blog posting that talked about WordPress.com versus <a target=\"_blank\" title='Wordpress.org blog' href='http:\/\/wordpress.org' rel=\"noopener\">WordPress.org<\/a> web hosting called <a href='#hcpacgpt'  title='HTML Canvas Pros and Cons Game Primer Tutorial'>HTML Canvas Pros and Cons Game Primer Tutorial<\/a>?  Well, the WordPress.com web hosting is totally self contained and this is the reason Gravatar would be seeking a WordPress.com account as a login source option, but even if you use WordPress.org hosting, as we do here, it doesn&#8217;t mean you have to shy away from these WordPress.com accounts, but more likely that you will not follow through to create the WordPress.com website as a publicly viewable blog website &#8230; or maybe you will?  This is up to you.<\/p>\n<p>Today we&#8217;ve put together a stream of consciousness <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Gravatar\/\" title=\"Click picture\" rel=\"noopener\">slideshow<\/a> to show some of the detail of the steps we used to create Gravatar avatar personalised image relationships for the two email addresses below &#8230;<\/p>\n<ul id='umailto'>\n<li><a href='mailto:rmetcalfe@rjmprogramming.com.au?subject=Gravatar' title='Email client to rmetcalfe@rjmprogramming.com.au'>rmetcalfe@rjmprogramming.com.au<\/a> who is admin at WordPress 4.1.1 blog<\/li>\n<li><a href='mailto:rmetcalfe15@gmail.com?subject=Gravatar' title='Email client to rmetcalfe15@gmail.com'>rmetcalfe15@gmail.com<\/a> is an email we use at other blog and forum places on the net<\/li>\n<\/ul>\n<p>Along the way, with researching this, and it wasn&#8217;t all plain sailing, so &#8220;thanks helpful people&#8221;, some great webpages were &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='http:\/\/en.gravatar.com' title='Gravatar home page' rel=\"noopener\">Gravatar home page<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/codex.wordpress.org\/How_to_Use_Gravatars_in_WordPress' title='How to use Gravatars in WordPress' rel=\"noopener\">How to use Gravatars in WordPress<\/a> &#8230; via WordPress <a target=\"_blank\" title='WordPress Codex' href='https:\/\/codex.wordpress.org' rel=\"noopener\">Codex<\/a> &#8230; talking about creating, as well as PHP coding information to recall in other scenarios<\/li>\n<\/ul>\n<hr>\n<p id='hcpacgpt'>Previous relevant <a target=\"_blank\" title='HTML Canvas Pros and Cons Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-canvas-pros-and-cons-game-primer-tutorial\/' rel=\"noopener\">HTML Canvas Pros and Cons Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ProsAndCons\/\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Canvas Pros and Cons Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ProsAndCons\/ProsAndConsZ.jpg\" title=\"HTML Canvas Pros and Cons Game Primer Tutorial\"    \/><\/a><p class=\"wp-caption-text\">HTML Canvas Pros and Cons Game Primer Tutorial<\/p><\/div>\n<p>The HTML <a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">Canvas<\/a> element is great for many types of games especially where you draw your own graphics based on interaction from the user.<\/p>\n<p>Today you may consider our Pros and Cons &#8220;game&#8221; to be more of a &#8220;decision making tool&#8221; perhaps.  Perhaps it may suit you as a way to be more objective about your decision making.<\/p>\n<p>So the thoughts behind this first version came from a topic of interest I&#8217;ve been looking into recently &#8230; the benefits and otherwise of <a target=\"_blank\" href='http:\/\/www.wordpress.com' title='WordPress.com' rel=\"noopener\">WordPress.com<\/a> blog websites versus <a target=\"_blank\" href='http:\/\/www.wordpress.org' title='WordPress.org' rel=\"noopener\">WordPress.org<\/a> blog websites, as this blog is, by the way.  One inspirational website for the research was <a target=\"_blank\" title='WordPress.com versus WordPress.org' href='http:\/\/diythemes.com\/thesis\/rtfm\/differences-wordpress-com-org\/' rel=\"noopener\">here<\/a> &#8230; thanks.<\/p>\n<p>It occurred to me that there was enough complexity here to think about how to design a tool to help.  Have always thought the concept of an &#8220;issue&#8221;, or a set of &#8220;issues&#8221; to do with a &#8220;topic&#8221; sounds the go.  However, it occurs to me that this is not a great model without some mechanism for a user-defined &#8220;weighting&#8221; of the importance of any one &#8220;issue&#8221; to their thought patterns.<\/p>\n<p>So that&#8217;s what we have today &#8230; a &#8220;topic&#8221; with a set of &#8220;issues&#8221; that the user supplies with a &#8220;rating&#8221; that is positive for a Pro and negative for a Con, and finally that &#8220;issue&#8221; is given a user-defined &#8220;weight&#8221;, to add that personal touch possibility to the decision making process, but objective enough, in that the user will keep thinking of &#8220;issues&#8221;, methinks &#8230; &#8220;me hopes&#8221;.<\/p>\n<p>Here is the HTML programming source code for today&#8217;s tutorial you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.html_GETME\" title=\"prosandcons.html\" rel=\"noopener\">prosandcons.html<\/a><\/p>\n<p>There is functionality in this game to email a snapshot of the game and the PHP programming source code that helps facilitate this functionality for today&#8217;s tutorial you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.php_GETME\" title=\"prosandcons.php\" rel=\"noopener\">prosandcons.php<\/a><\/p>\n<p>Our &#8220;WordPress.com versus WordPress.org&#8221; topic personalized thinking came up with the email linking you to this <a target=\"_blank\" title='WordPress.com versus WordPress.org' href='http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons_2015_3_20_9_0.png' rel=\"noopener\">Pros and Cons<\/a> report.<\/p>\n<p>Try a pros versus cons issue yourself, and email your opinions forward, as you wish with our live run <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.html?nofloat=nofloat\" title='Pros and Cons game' rel=\"noopener\">here<\/a>.  Hope to &#8230; see &#8216;ya later Alli Gator.<\/p>\n<p><b>Did you know?<\/b><\/p>\n<p>The fact that we felt like putting things so much in double quotes above is pretty much a <a target=\"_blank\" title='Lay down misere information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Mis\u00e8re' rel=\"noopener\">&#8220;lay down misere&#8221;<\/a> indicator that this web application could well suit an (alternative) <a target=\"_blank\" title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming' rel=\"noopener\">Object Oriented<\/a> (ie. OOP) solution also, where the double quoted words could well be classes in your software design.  Even though the basis of this web application only needs the HTML (the PHP usage is a bit optional, but useful (because the server-side is needed to create the snapshot image file, on the server, later used as a link in the email)) you may wonder how OOP ideas relate to HTML, but OOP can very much play a part in the way you code your <a target=\"_blank\" title='Object Oriented JavaScript information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Introduction_to_Object-Oriented_JavaScript' rel=\"noopener\">JavaScript<\/a>, and in seeking out solutions here, you may even end up exploring <a target=\"_blank\" title='Ajax OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/AJAX.OOP' rel=\"noopener\">Ajax<\/a> techniques.  The combination of JavaScript and Ajax can make your web application be, or at least feel, as if it is totally client-based.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d13846' onclick='var dv=document.getElementById(\"d13846\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13846' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24374' onclick='var dv=document.getElementById(\"d24374\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=membership\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24374' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we explain how we, as the &#8220;admin&#8221; user on this blog, just the other day, started to use a personalised image avatar, primarily seen regarding contributions to the comments at this blog. But before we proceed, we were told, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-avatar-via-gravatar-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[1983,151,1985,249,380,457,513,1984,590,1982,765,1981,1319,1891,1456,1457],"class_list":["post-24374","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-avatar","tag-blog","tag-comment","tag-configuration","tag-email","tag-forum","tag-google","tag-gravatar","tag-image","tag-logo","tag-membership","tag-profile","tag-tutorial","tag-user","tag-wordpress","tag-wordpress-com"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24374"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=24374"}],"version-history":[{"count":19,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24374\/revisions"}],"predecessor-version":[{"id":68198,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24374\/revisions\/68198"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}