Letter Avatar

How to easily create Letter Avatars for your comments in Minimal Mistakes. This coversion is a work in progress as I am just learning liquid.

Letter Avatar Origional gist

Gihub code as a Gihub Gist, by Lee Crossly

Avatar Generator from - Commenter name as - (first name and surname) as input and a canvas element as output using the initials from the name and a background colour (based on the first name & surname first letter).

The background colours are from from Flat Ui Colors Now with retina support.

The Canvas html snippet

<canvas id="user-icon" width="60" height="60"></canvas>

The Code before conversion

var colours = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];

var name = "Lee Crossley",
    nameSplit = name.split(" "),
    initials = nameSplit[0].charAt(0).toUpperCase() + nameSplit[1].charAt(0).toUpperCase();

var charIndex = initials.charCodeAt(0) - 64,
    colourIndex = charIndex % 20;

var canvas = document.getElementById("user-icon");
var context = canvas.getContext("2d");

var canvasWidth = $(canvas).attr("width"),
    canvasHeight = $(canvas).attr("height"),
    canvasCssWidth = canvasWidth,
    canvasCssHeight = canvasHeight;

if (window.devicePixelRatio) {
    $(canvas).attr("width", canvasWidth * window.devicePixelRatio);
    $(canvas).attr("height", canvasHeight * window.devicePixelRatio);
    $(canvas).css("width", canvasCssWidth);
    $(canvas).css("height", canvasCssHeight);
    context.scale(window.devicePixelRatio, window.devicePixelRatio);

context.fillStyle = colours[colourIndex - 1];
context.fillRect (0, 0, canvas.width, canvas.height);
context.font = "128px Arial";
context.textAlign = "center";
context.fillStyle = "#FFF";
context.fillText(initials, canvasCssWidth / 2, canvasCssHeight / 1.5);

MVC Implimentation

Image tag changes for MVC

<img itemprop="image" avatar="@comment.Author" alt="@comment.Author" class="comments-media-object" />

My Script Changes for MVC

    (function (w, d) {
        function LetterAvatar(name, size) {

            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).toUpperCase().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;
            colourIndex = charIndex % 20;
            canvas = d.createElement('canvas');
            canvas.width = size;
            canvas.height = size;
            context = canvas.getContext("2d");

            context.fillStyle = 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[avatar]'), function (img, name) {
                name = img.getAttribute('avatar');
                img.src = LetterAvatar(name, img.getAttribute('width'));
                img.setAttribute('alt', name);

        // AMD support
        if (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) {

    })(window, document);

Liquid Conversion

Lets take a look a Minimal Mistakes post on Staticman Comments, at Improving Jekyll Staticman Comments

The comments include form in: _includes/comment.html, line 8

<img src="/assets/images/avatar-60.png" srcset="/assets/images/avatar-120.png 2x" alt="">

Image changes

Modifying the Image link From:

<img src="/assets/images/avatar-60.png" srcset="/assets/images/avatar-120.png 2x;

Changed To: Letter Avatar

Removed src=”…” and srcset=”…”


avatar="include.name | escape" class="avatar" alt="include.name | escape"

Then the link to the Gravatar image you have to change for yur own genertic image, or Letter Avatar generated.

As discribed at Stack Overflow

I will Change Line 6

<img src="https://www.gravatar.com/avatar/?d=mm&s=60" srcset="https://www.gravatar.com/avatar/?d=mm&s=120 2x" alt="">


and also
?d=mm&s=120 2x

To nothing for fallback image in gravatar links, then it falls back to

    <img src="https://www.gravatar.com/avatar/?d=avatar" srcset="https://www.gravatar.com/avatar/?d=avatar=120 2x" alt="">
% else %
    <img class="avatar" avatar="" alt="" />
% endif %

Add avatar.js

Adding the modified MVC Letter Avatar.js to my /assets/js/avatar.js.

Link to it in scripts.html

<script src="https://donboulton.com/assets/js/avatar.js"></script>

Or in a mardown page as.

  - /assets/js/avatar.js

Adding Scripts Site wide in _config.yaml

To add scripts to the head or closing </body> elements by adding paths to following arrays in _config.yml.

  - https://code.jquery.com/jquery-3.2.1.min.js
  - /assets/js/your-custom-head-script.js

  - /assets/js/your-custom-footer-script.js

Then create avatar.scss and register the avatar.scss file in minimal-mistakes.scss, for width, height and rounded images.

Pre implementation comments

If your reading this before I get Staticman working. I need to see if this is really works or not. Use disqus below to comment or add ideas to this conception.


Donald Boulton

Was not working as node did not compile the added letter-avatar.js So it was not reading any .js for avatar.

Fixing it???


Page Rating: 
 Notify me of replies by email.