Shulou(Shulou.com)06/02 Report--

This article is about how WordPress uses letters instead of the picture script: LetterAvatar. The editor thought it was very practical, so I shared it with you as a reference. Let's follow the editor and have a look.

Based on canvas, base64 pictures are generated dynamically through toDataURL. At present, the Gravatar avatar of my theme is to use this LetterAvatar script to read the ALT tag if the Gravatar avatar is not set, and automatically generate the acronym image instead of the default avatar picture.

Some WP enthusiasts have made one before: the mk-letter-avatar alphabet avatar plug-in, which is easy to use, but when I opened the browser opener tool, I found that there were a large number of 404 errors. I took a look at the source code. The plug-in returns 404 errors through no avatar and triggers the onerror event to replace the src image address with automatically generated alphabet images. The judgment method is not very reasonable. If it wasn't for a flaw, I would like to use it directly. If the author optimizes it again, it is definitely an excellent and practical plug-in.

My implementation principle and plug-in are different, with the avatar local cache function, after judging that there is no avatar, directly add a specific class class for the picture without the avatar, and then replace the picture through the LetterAvatar script.

It should be noted that the plug-in mentioned above, Gravatar avatar image must have an alt tag attribute, otherwise it will not generate a normal picture, but most themes default Gravatar avatar alt tag attribute is empty.

If you want to automatically add alt tag attributes to the Gravatar avatar, you can add the following code to the current theme function template functions.php:

Function zm_gravatar_alt ($altgravatar) {if (have_comments ()) {$alt= get_comment_author ();} else {$alt= get_the_author_meta ('display_name');} $altgravatar= str_replace (' alt=\', 'alt=\'. $alt. '' title=\ 'Gravatar for'. $alt. '\', $altgravatar); return $altgravatar;} add_filter ('get_avatar',' zm_gravatar_alt')

After that, the commentator nickname is automatically set as the alt attribute.

This article is just to make your own notes, not to teach you how to do this avatar. If you think this avatar is good, please directly use the plug-in described above.

LetterAvatar script demo code is also attached:

Letter Avatar usage:

Body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} pre {margin: 20px 0; padding: 20px; background: # fafafa;} .avatar {border-radius: 50%;} / * LetterAvatar* * Artur Heinze* Create Letter avatar based on Initials* based on https://gist.github.com/leecrossley/6027780*/(function(w, d) {function LetterAvatar (name, size, color) {name = name |'; size = size | | 60 Var colours = ["# 1abc9c", "# 2ecc71", "# 3498db", "# 9b59b6", "# 34495e", "# 16a085", "# 27ae60", "# 2980b9", "# 8e44ad", "# 2c3e50", "# f1c40f", "# e67e22", "# e74c3c", "# ecf0f1", "# 95a5a6", "# f39c12", "# d35400", "# c0392b", "# bdc3c7", "# 7f8c8d"] NameSplit = String (name) .split (''), initials, charIndex, colourIndex, canvas, context, dataURI If (nameSplit.length = = 1) {initials = nameSplit [0]? NameSplit [0] .charat (0):'?;} else {initials = nameSplit [0] .charat (0) + nameSplit [1] .charat (0);} if (w.devicePixelRatio) {size = (size * w.devicePixelRatio);} charIndex = (initials = ='?'72: initials.charCodeAt (0))-64 position colourIndex = charIndex% 20scape canvas = d.createElement ('canvas'); canvas.width = size;canvas.height = size;context = canvas.getContext ("2d") Context.fillStyle = color? Color: colours [colourIndex-1]; context.fillRect (0,0, canvas.width, canvas.height); context.font = Math.round (canvas.width/2) + "px Arial"; context.textAlign = "center"; context.fillStyle = "# FFF"; context.fillText (initials, size / 2, size / 1.5); dataURI = canvas.toDataURL (); canvas = null; return dataURI } LetterAvatar.transform = function () {Array.prototype.forEach.call (d.querySelectorAll ('img [alt]'), function (img, name, color) {name = img.getAttribute ('alt'); color = img.getAttribute (' color'); img.src = LetterAvatar (name, img.getAttribute ('width'), color); img.removeAttribute (' avatar'); img.setAttribute ('alt', name);};} / / AMD supportif (typeof define = 'function' & & define.amd) {define (function () {return LetterAvatar;}); / / CommonJS and Node.js module support.} else if (typeof exports! = =' undefined') {/ / Support Node.js specific `module.exports` (which can be a function) if (typeof module! = 'undefined' & & module.exports) {exports = module.exports = LetterAvatar;} / / But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) exports.LetterAvatar = LetterAvatar } else {window.LetterAvatar = LetterAvatar; d.addEventListener ('DOMContentLoaded', function (event) {LetterAvatar.transform ();});}) (window, document); Thank you for reading! About WordPress how to replace the picture script with letters: LetterAvatar shares here, I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, you can share it and let more people see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.