Website construction

Share several schemes for WordPress to cache gravatar comment avatars locally

Jager · June 18 · 2015 · · · 2454 times read

Because of the GFW relationship, the use of gravatar blog comment avatar often appears "graphic split special effects", which must be a problem many webmasters have encountered. There are also many tutorials on the Internet, which solve the problem of graph cracking by changing the source of avatar. It can indeed solve the problem of image cracking, but the loading speed of the avatar really needs to be improved. Here are three ways to cache the avatar locally.

 Share several schemes for WordPress to cache gravatar comment avatars locally

1、 Code scheme

Code cache scheme from Willin Kan Master, excerpted from WP University The following is the specific approach:

① Create cache directory

Create a folder in the same level directory of wp content, name it avatar, and set the folder permissions to 0755 (if 0755 fails, try 0777).

② . Set default avatar

Prepare a default avatar of appropriate size, named "default. jpg", and put it in the avatar folder.

③ Add cache code

Copy the following code to the functions.php file of the template:

 function my_avatar($avatar) { $tmp = strpos($avatar, 'http'); $g = substr($avatar, $tmp,  strpos($avatar, "'", $tmp) - $tmp); $tmp = strpos($g, 'avatar/') + 7; $f = substr($g, $tmp,  strpos($g, "?", $tmp) - $tmp); $w = get_bloginfo('wpurl'); $e = ABSPATH .' avatar/'. $f .'.jpg'; $t = 1209600; // Set 14 days in seconds if ( ! Is_file ($e) | | (time() - filemtime ($e))>$t) {//When the avatar does not exist or the file is updated after 14 days copy(htmlspecialchars_decode($g), $e); } else  $avatar = strtr($avatar,  array($g => $w.'/avatar/'.$ f.'.jpg')); if (filesize($e) < 500) copy($w.'/avatar/default.jpg', $e); return $avatar; } add_filter('get_avatar', 'my_avatar');

2、 Plug in Scheme

Not long ago, robin blogger brother bird shared a plug-in that caches gavatar avatar to local in the beginning group. After personal trial, it was found that it was good. The name of this plug-in is nix gravatar cache. It seems that there is something wrong with the original plug-in. Brother Bird DIY.

If you find that there is a problem with the original version, download the modified version of Brother Bird!

III Nginx scheme

In the process of testing this plug-in, I looked at the effective avatar path and got a sudden inspiration: this cache can be cached locally through Nginx's proxy reverse proxy! It is similar to the direction agent Google to solve the problem of being blocked.

Just do what you say. After a lot of tests, I found it really works! Let's share the specific methods.

① , Compile Nginx

If you have practiced the Nginx caching tutorial shared by Zhang Ge's blog before, I believe this step can be ignored.

The Nginx reverse proxy cache needs to integrate the ngx_cache_purge module. If not, you need to recompile Nginx. For details, please refer to the article shared earlier by Zhang Ge's blog:

Enable Nginx cache acceleration for websites and support html pseudo static pages 》Proxy mode, add the cache module, and add proxy cache rules in the http context module, such as:

 proxy_connect_timeout 5; proxy_read_timeout 60; proxy_send_timeout 5; proxy_buffer_size 16k; proxy_buffers 4 64k; proxy_busy_buffers_size 128k; proxy_temp_file_write_size 128k; proxy_cache_path /tmp/cache/proxy_cache levels=1:2 keys_zone=cache_one:200m inactive=30d max_size=5g; proxy_temp_path /tmp/cache/proxy_cache/temp;

②、 Nginx configuration

Add the following rules to the existing rules of the website, reverse proxy gavatar and cache them locally:

 location /avatar { proxy_pass  http://cn.gravatar.com ; proxy_redirect off; proxy_set_header Host cn.gravatar.com; proxy_cache cache_one; proxy_cache_valid 200 302 304 365d; proxy_cache_valid 301 1d; proxy_cache_valid any 1m; add_header Images-Cache "$upstream_cache_status from $host"; add_header Pragma public; add_header Cache-Control "public,  must-revalidate, proxy-revalidate"; access_log off; log_not_found off; expires max; }

③、 PHP code

Insert the following code in functions.php under the theme directory:

 //Change gavatar source function mytheme_get_avatar($avatar) { $avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com"),"zhang.ge",$avatar); // Please change it to your homepage domain name return $avatar; } add_filter( 'get_avatar', 'mytheme_get_avatar', 10, 3 );

You can change the WordPress avatar address to your own domain name. Because the secondary directory field of the avatar address is/avatar/, it will match the reverse proxy rule we added in Nginx in the previous step, so you can pull the avatar from cn.gavatar.com and cache it locally on the server.

Obviously, this method supports various website building programs (need to modify the website code), which is more efficient than PHP code or plug-ins! And no external url address will appear!

4、 Tortuous expansion

In the last article, Zhang Ge's blog shared the optimization scheme currently in use. One of the suggestions is that static resources use secondary domain names and refuse to write cookies. So this article can continue to expand and toss about: change the avatar address to a secondary domain name. For example, right click Zhang Ge's blog comment avatar and you can see that it has become res.zgboke.com. In fact, it is just a new server module of res.zgboke.com. It is very simple. Interested friends can do something by themselves. This article will not explain it.

28 responses
  1. Mo Xiaoyu 2015-6-19 · 16:49

    Very comprehensive, one-stop solution, good!

  2. Xibei Blog 2015-6-21 · 9:59

    Why do you need to input user information every time you come here? Have you solved the crime?

    •  avatar
      Jager 2015-6-21 · 10:05

      Your own problem, my blog js has been recording information for more than a year. Either the browser has disabled the memory of cookies, or it is not the same environment.

  3. Hu Ge Online Picking 2015-6-21 · 15:53

    The Nginx reverse generation method is good. I learned it.

  4. koty 2015-6-23 · 14:13

    Jager, Could you tell me why the articles on my website will be transcoded after being shared with WeChat friends, and why not yours?

    •  avatar
      Jager 2015-6-30 · 13:30

      I haven't shared WeChat, and I haven't seen this problem.

  5. Site directory submission 2015-6-23 · 18:22

    Very comprehensive, one-stop solution, not bad

  6. Lugu Slight Waves 2015-6-25 · 0:38

    I use the WordPress made by Sina's sae, but the delay is very high

  7. Boke123 navigation 2015-6-30 · 11:54

    I use the first one now, but this folder is convenient to put in the theme

    •  avatar
      Jager 2015-6-30 · 13:30

      Well, the first one is easy to use.

  8. Youlin Reading Network 2015-7-3 · 11:38

    I used the first method, which is super. thank you

  9. Youlin Reading Network 2015-7-3 · 11:39

    Identify the plug-in used by the browser, or pure code

  10. The moon climbs the stairs 2015-7-8 · 1:42

    I prefer the first scheme! Simple and practical!: grin:

  11. Allied source 2015-7-21 · 16:20

    Nginx reverse proxy, the domestic reverse proxy of cn.gxxx

  12. shepherd 2015-9-6 · 16:30

    These two days, it seems that you can't go out of the chain. I have been tossing and turning. I found that Gravatar is not only for the Chinese version, but also for cn.gravatar.com...

    Please ask Jager, for example, the source code of our avatar is as follows:

    The first SRC is the avatar we see. The second srcset is usually not used. How can we modify it to remove the second one?

  13. shepherd 2015-9-6 · 16:31

    The comment system filters out the code...

    
    
  14. test 2015-12-16 · 9:13

    Try this····

  15. Morning and night 2016-5-27 · 16:33

    Hi, God!
    Please tell me your domain name: res.zgboke.com is directly bound to zhang.ge, or is it the image of Qiniu Cloud or the reverse version of zhang.ge from res.zgboke.com

    •  avatar
      Jager 2016-5-27 · 21:13

      the former

  16. Morning and night 2016-5-28 · 7:26

    according to https://zhang.ge/5042.html The cache is enabled and multiple sites are configured, but an error is reported when reverse generation is performed. Go to proxy_cache cache_web2; That's OK. Is it not caching? How can we solve it? Thank you! In front of me, a uses a lot of technology of the god blog on the website. Thank you very much

    •  avatar
      Jager 2016-5-28 · 14:47

      Package and send the site configuration file to my mailbox ge # zhang. ge
      #Replace with@

  17. Small C blog 2016-7-16 · 12:11

    Brother Zhang, Can the proxy_pass address have parameters?

  18. Le Meng 2016-12-9 · 8:55

    Thanks for sharing.

  19. Reeves 2017-8-22 · 8:50

    The avatar of gravatar was submitted yesterday, but the avatar was not displayed in the comments on other websites. It was found on the Internet that it needs time to cache. I see it on the blogger's website, but I don't know why.

  20. Junyu Network 2017-10-22 · 9:56

    Ask the blogger how to cache the avatar of the third domestic login (WeChat Weibo QQ) to the local. My website uses a third-party login to obtain user avatars, but after using this method, these avatars no longer exist, only the code URL laowei8.co m appears

  21. Feng Yan Feng Yu 2019-3-20 · 17:34

    After learning, I always want to make a move for my blog!

  22. jenson 2020-11-1 · 23:33

    How to replace the secondary domain name with the primary domain name when the code scheme is cached locally

  23. grimmster 2022-1-13 · 18:55

    Like code scheme

  24. grimmster 2022-1-13 · 18:58

    Reverse generation and turn back to learn.