{"id":3237,"date":"2009-08-06T15:48:47","date_gmt":"2009-08-06T22:48:47","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=3237"},"modified":"2018-07-01T22:47:51","modified_gmt":"2018-07-02T05:47:51","slug":"display-a-user-gravatar-from-email-address","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/php\/display-a-user-gravatar-from-email-address\/","title":{"rendered":"Display a User Gravatar from an Email Address"},"content":{"rendered":"<pre><code class=\"php\">&lt;?php\r\n  $gravatar_link = 'http:\/\/www.gravatar.com\/avatar\/' . md5($comment_author_email) . '?s=32';\r\n   echo '&lt;img src=\"' . $gravatar_link . '\" \/&gt;';\r\n?&gt;<\/code><\/pre>\n<p>The variable <code>$comment_author_email<\/code> would be a string of a valid email address. If the email isn&#8217;t in the Gravatar database, it will return a default graphic. <code>$comment_author_email<\/code> is the default WordPress variable that populates from a cookie for people who have previously commented (if the theme supports it).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;?php $gravatar_link = &#8216;http:\/\/www.gravatar.com\/avatar\/&#8217; . md5($comment_author_email) . &#8216;?s=32&#8217;; echo &#8216;&lt;img src=&#8221;&#8216; . $gravatar_link . &#8216;&#8221; \/&gt;&#8217;; ?&gt; The variable $comment_author_email would be a string of a valid email address. If the email isn&#8217;t in the Gravatar database, it will return a default graphic. $comment_author_email is the default WordPress variable that populates from a cookie for [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3233,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":4329,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/display-author-info\/","url_meta":{"origin":3237,"position":0},"title":"Display Author Info","date":"October 1, 2009","format":false,"excerpt":"The image that shows for the author comes from the email address set for that user which goes to a corresponding Gravatar. The display name and bio come from the User settings area in the Admin. That should be all the CSS hooks you need to style up the area\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20799,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/038-comments-cleanup\/","url_meta":{"origin":3237,"position":1},"title":"#038 &#8211; Comments Cleanup","date":"March 26, 2013","format":false,"excerpt":"WordPress powers the comment area of Jeff's site. This will be super easy to clean up with our CSS superpowers. We make a .scss file just for comments (the perfect example of where a Sass partial is appropriate). We include that in the global stylesheet. Then we tweak up the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190541,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/removing-jetpack-css\/","url_meta":{"origin":3237,"position":2},"title":"Removing Jetpack CSS","date":"December 10, 2014","format":false,"excerpt":"Jetpack is a WordPress plugin that brings a ton of features to WordPress. You turn on the features as needed. At the time of this writing, rather than include a separate CSS file for each feature as needed, they load a large concatenated stylesheet with all the CSS together. I\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18626,"url":"https:\/\/css-tricks.com\/lodge\/v10\/110-photoshopping-comment-thread\/","url_meta":{"origin":3237,"position":3},"title":"#110: Photoshopping Comment Thread","date":"October 1, 2012","format":false,"excerpt":"We start digging into Photoshop here and designing the comments area. We start at the top, meaning the individual comments themselves (as opposed to the comment form). We snag an avatar to work with. We'll be using the Gravatar service for sure, as that's tailor made for this and integrated\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196684,"url":"https:\/\/css-tricks.com\/snippets\/sass\/px-to-em-functions\/","url_meta":{"origin":3237,"position":4},"title":"Px to Em Functions","date":"February 24, 2015","format":false,"excerpt":"We've talked about \"Why Ems?\" here before. For those new to em values, The Mozilla Developer Network does an excellent job of explaining ems: ...an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322735,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-optical-sizing\/","url_meta":{"origin":3237,"position":5},"title":"font-optical-sizing","date":"October 7, 2020","format":false,"excerpt":"The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that's more \"delicate\" to quote the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3237"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3237"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3237\/revisions"}],"predecessor-version":[{"id":273542,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3237\/revisions\/273542"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3233"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3237"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}