Extreme Makeover for Gravatars in WordPress

♦ Posted by Jeff Starr in CSS, Graphics, WordPress

Updated July 28, 2024 • 2 comments

Gravatars have become a popular way of adding spice to the “comments” page of many WordPress-powered sites. So popular, in fact, that the gravatar server is often overloaded, bogged down with millions of gravatar requests every second. This immense server load effects user pages everywhere, resulting in slow loading times, unresolved server requests, and missing gravatars. Such broken presentations appear unprofessional, tarnish reputations, and may provoke confusion. This article provides essential solutions for an extreme gravatar makeover..

Gravatar Plugins

WordPress users currently enjoy two plugin options for enabling gravatars on their website: Skippy’s Gravatars and ZenPax Gravatars2. Each of these plugins perform consistently, providing WordPress gravatar functionality with several customizable features. For many configurations, either of these plugins work perfectly, flawlessly regurgitating gravatars via specifically applied user preferences. Indeed, if this sounds like your situation, feel free to stop reading here, as you are good to go. However, for those of us experiencing inconsistent or otherwise poor gravatar functionality, read on, as this article is written especially for you..

Server Considerations

Both gravatar plugins, Skippy’s Gravatars and ZenPax Gravatars2, provide a “caching” option, which is designed to circumvent issues related to gravatar server load and unresolved image requests. The caching of gravatars works very well unless your Internet Service Provider (ISP) does not provide the various PHP functions required for caching functionality. For example, gravatar caching worked nearly perfectly on our server until our ISP pulled the plug on two vital PHP functions, passthru() and exec(), thanks to some wormhole-sucking scumbag who felt it necessary to exploit these functional privileges to hack the server. But I digress..

Moving right along, if your ISP/server lacks the PHP functionality necessary for gravatar caching, do not despair. However, that might be the first thing to consider when looking for ways to improve gravatar functionality and consistency. If your site is at all mobile, you may consider switching to an ISP that provides the requisite functionality for successful gravatar implementation. Before switching, make sure that you read through any available plugin literature to determine exactly which functions are required. For those of us not too excited about switching servers for the mere sake of using gravatars, fret not, for there are several options yet to explore..

Tools of the Trade

While we possess no control over which PHP functions are provided by our ISP, and even less control over the incredibly overworked gravatar server(s), we do have control over the site itself, including everything from CSS and (X)HTML to file structure and plugin settings. By taking advantage of these tools, even the most gravatar-challenged site may experience an extreme gravatar makeover. So let’s begin..

Folder Permissions

The first part of our gravatar makeover explores setting proper file permissions. Gravatar functionality requires granting your server proper access to all gravatar-related directories. If you are using Skippy’s plugin, the gravatar directory is located in /wp-content/gravatars/; if you are using the ZenPax plugin, there are three directories involved:

/wp-content/gravatars/
/wp-content/gravatars/local/
/wp-content/gravatars/global/

For each of these directories, your server requires both read and write permissions. Further, if you are using a specific directory for random gravatars, remember to enable read and write permissions for that as well. With most servers, there are multiple methods for editing file permissions. For example, if you use CHMOD to set permissions, simply type (for each directory):

chgrp www-data gravatars
chmod g+w gravatars

If you are using FTP to set folder permissions, ensure that permissions are set as either 755 or 777. In most cases, 755 is the optimal setting, as it provides read and write access to the server and prevents write access to the world. However, the 755 setting only works if the user of the server is also the owner of the gravatar directories. Thus, if you find that 755 fails to provide proper server access, try setting gravatar directory permissions to 777. Please be aware that the 777 permissions setting is risky because it provides all privileges to all users. For more information, check out these helpful articles. Remember, the point here is to eliminate the possibility of gravatar failure due to improper file permissions.

Image Intervention

The next step in our gravatar makeover is to ensure that our WordPress gravatar plugin has definite access to the user-defined default gravatar image. The default gravatar image is designed to serve as a substitute gravatar for those without or as a replacement for any gravatars that were unsuccessfully downloaded (either through gravatar.com or via the local cache). Unfortunately, under our circumstances (described previously), the default image itself often fails to load, resulting in perhaps scores of broken images populating the comments section. Fortunately, there are a couple of tricks that may help when dealing with inconsistent or nonexistent default gravatar images.

Create a default image

First of all, if you have yet to create and upload a default image, now would be a great time to do so. When used properly, the default image serves as your first line of defense against slow servers and other online mishaps. The default gravatar image should be the same size as other gravatars, namely, 80px x 80px (maximum size). As there will most likely be situations where every gravatar on the page is the default image, you should try to design the default image to compliment the design of your site. Definitely avoid tacky images, like big red question marks, smiley faces, or messages such as “No Gravatar Available”. Yeesh.

Connect with plugin

After establishing your default image, there are several steps you can take to ensure that it is easily located by whichever WordPress gravatar plugin you happen to be using. Each of the two gravatar plugins provides default locations as well as customizable path settings, thereby enabling users to specify their own image directories. Although many people experience positive results with custom default image paths, it is possible that either plugin may fail to locate the specified image. This may especially be the case when WordPress is installed in a subdirectory, as well as under other, non-standard or custom blog configurations.

Enhancements

To improve the success rate with which your gravatar plugin is able to locate the default image, place the image in the root directory of your site and specify its location directly via an absolute URL. Next, place a copy of the default image in each directory that is accessed by the plugin. For example, place a copy of the default image in each of the following directories as well as in any additional directories that may have been created for gravatars:

/wp-content/gravatars/
/wp-content/gravatars/local/
/wp-content/gravatars/global/

Finally, ignore the standards-compliant designer lurking within you and omit entirely the alt attribute from all gravatar images. Although no information currently exists concerning this issue, for some reason the presence of an alt attribute within gravatar anchor elements (<a>) will inconsistently produce display errors. For many sites, this is the primary reason that even the locally cached default gravatar fails to load. Although such behavior is generally associated when the default image is requested, it has also been known to effect user-defined gravatars as downloaded from gravatar.com or called from the local image cache.

Face Lifting

The next set of techniques involves tweaking cached images, refreshing content, and customizing User Gravatars. Before diving into this round of makeover tricks, it may behoove you to make a backup copy of any cached gravatar images that you previously may have cached (check the various online gravatar directories). Also, for the sake of tweaking and testing, it would be beneficial to locate or create a blog post containing any decent number of gravatar-enabled comments. If your blog is new, or unpopular, you may consider creating a “test” post for this very purpose. For testing purposes, a variety of different gravatars is optimal, but even a slew of default images mixed together with a few of your own personal gravatars (you do have your own gravatar, right?) will do the job.

Stay current

First of all, now that you have an offline backup of all cached gravatars, open your gravatar plugin’s admin panel, delete all cached gravatars, and refresh your stash. Refreshing your gravatar cache may take some time, as various pages are called and different gravatars are requested and downloaded. Remember, you still have the the backup set of cached images just in case. This process helps to ensure that your gravatars are fresh and current.

Tweak settings

Next, try tweaking a few plugin settings. A good place to begin is the option to “cache gravatars”. With this setting enabled, the plugin will save a local copy of each gravatar downloaded from the gravatar.com server for the length of time specified in the “How long to cache gravatars” field. If your server provides the requisite PHP functions, enabling caching will greatly increase the proficiency with which your site displays gravatars. However, if your server fails to provide the necessary PHP functions, gravatar caching will not work, your pages will take forever to load, and you will become wrathful.

Gravatar caching

For those of you fortunate enough to employ gravatar caching, it may prove worthwhile to adjust the time duration (in seconds) for which gravatars are cached. Depending on the number and variety of gravatar-enabled comments, cache duration settings may vary. If your site has millions of gravatars, a cache duration time of one minute may be counterproductive, as your server will request and attempt to download a million gravatars every 60 seconds. On the other hand, if your site boasts a diverse variety of ultra-hip gravatar comments, you may want to check for fresh gravatars more frequently than once per month. Here is a nice conversion chart to help you nail it:

Convert common time intervals to seconds

1 month = 2629744 seconds
1 week = 604800 seconds
1 day = 86400 seconds
1 hour = 3600 seconds
1 minute = 60 seconds

Finally, an essential part of this extreme gravatar makeover involves establishing a custom gravatar for any users that may be registered with your site. Establishing these so-called “local” gravatars will ensure that, at the very least, the gravatars of your registered users will be displayed — even when the gravatar servers fail to deliver every other gravatar listed at your site.

Registered users

Setting local gravatars for registered users is easy, but requires each user to login to the admin section in order to make the necessary changes. Thus, assuming proper access for each user, login to the user’s admin section, click on Profile > Gravatar, and set the path to that user’s default image in the field provided. Click the Submit button — after the page refreshes you should see the user’s custom gravatar displayed. Repeat this process for every registered user of your blog (as time allows), or request that they perform the task themselves. Finally, remember to enable the “Allow local gravatars” option in the main gravatar admin panel (via site admin).

Insurance Policy

At this point, you have taken several crucial steps toward the improvement of your site’s gravatar functionality. Unfortunately, even with these improvements, your site may continue to experience gravatar display inconsistencies. Fortunately, we have yet to inject our most powerful makeover potion: CSS!

Even after optimizing a site’s gravatar settings, images, and directories, there remain times — especially during peak internet hours — when many gravatar images can fail to load properly. Often, for unknown reasons, even the default gravatar image can wind up disappearing, missing, or broken. The results of this scenario for many of the gravatar-enabled sites that we have visited look similar to this cropped screenshot taken from a popular fan-blog site. Fortunately, a few well-written lines of CSS will help remedy the problem of broken gravatar images.

The trick

The trick, of course, is to assign a copy of the default gravatar as the background image for the anchor element (<a>) that contains it. That way, we create an insurance policy that tells the browser to “display the default image even if you don’t want to.” We here at Perishable Press have been using this trick for some time now, and have completely eliminated all vestiges of unsightly gravatar malfunction. Even in the absolute, worst-case scenario, users visiting a populated comments section will see a benevolent, low-key image next to each comment, which is far better than the previously common rash of missing and broken gravatar images. And here is how we did it..

First, place a copy of your default gravatar into your theme’s image directory, or if you prefer to not make another copy of the image, simply note the directory path. Next, open your theme’s comments.php file and add the CSS class, gravfix (or whatever) to the anchor element (<a>) that contains your gravatar image. Here is an example:

<a href="https://en.gravatar.com/" class="gravfix">...</a>

Next, crack open your theme’s CSS file and style the a.gravfix class according to the appearance of your default gravatar’s image element (<img>). And, most importantly, include the default background image. Here is an example:

a.gravfix {
	background: url(images/gravatar.gif) no-repeat center center;
	border: 1px solid #333;
	display: block;
	height: 80px;
	width: 80px;
}

The previous CSS example assumes a default gravatar image that is 80px in size. The background image, gravatar.gif, is in the default theme directory, images. The border is included on the anchor element and removed from the image element, as the goal here is to maintain the presence of the default image with a 1px border. That said, further tweaking will most likely be required in order to finesse an agreement between image and background image. Hint: for testing purposes, you may want to create an alternate version of the default background image to differentiate between it and the foreground image.

Wrap it Up

We hope you have enjoyed our in-depth article, Extreme Makeover for Gravatars in WordPress. With any luck, this article will benefit those experiencing symptoms similar to the ones we were struggling with before we got tough and decided to take some action. By sharing the information gathered during our own extreme gravatar makeover, we hope to contribute to the improvement of the evolving and ever-growing gravatar community.

References

About the Author

Jeff Starr = Creative thinker. Passionate about free and open Web.