Better Avatar Script - Animations Restored

[Zombie Warrior]

EDIT: Click for video preview of the script.

This script will show animated avatars if they were originally uploaded as animated gifs or apngs (both animation formats work). The script will also turn back all avatars to squares except in three circumstances:

• New post
• On mouse hover
• Potato pc too slow to load everything

The script works manually and on violentmonkey, tampermonkey and greasemonkey for all browsers*. By the way, it's not straightforwardly compatible with my Easily Accessible New Replies Script (See spoiler below for solution).

// ==UserScript==
// @name     Better Avatar
// @version  2
// @grant    none
// @match    https://forums.taleworlds.com/*
// ==/UserScript==
window.onload = () => {

    let avatars = document.getElementsByClassName("avatar");

    for (let avatar of avatars) {

        let previousSource = avatar["firstElementChild"];

        if (previousSource !== null && previousSource.nodeName.toLowerCase() === "img") {
   
            previousSource.setAttribute("src", previousSource.getAttribute("src").replace("/m/", "/o/"));
            avatar.style.borderRadius = "0";
            // Comment the above line if you don't want square avatars.
        }
    }

    document.querySelectorAll(".avatar.avatar--separated").forEach(avatar => avatar.style.border = "none");
};

Spoiler: Better Avatar + New Replies

// ==UserScript==
// @name     Easily Accessible New Replies + Better Avatar
// @version  2
// @grant    none
// @match    https://forums.taleworlds.com/*
// ==/UserScript==
const createTag = (tagType, tagClass) => {
    
    let newTag = document.createElement(tagType);
    newTag.classList.add(tagClass);
    return newTag;
}

const fixAvatars = () => {
  
  let avatars = document.getElementsByClassName("avatar");
    
    for (let avatar of avatars) {
        
        let previousSource = avatar["firstElementChild"];
        
        if (previousSource !== null && previousSource.nodeName.toLowerCase() === "img") {
            
            previousSource.setAttribute("src", previousSource.getAttribute("src").replace("/m/", "/o/"));
            avatar.style.borderRadius = "0"; 
            // Comment the above line if you don't want square avatars.
        }
    }
  
  document.querySelectorAll(".avatar.avatar--separated").forEach(avatar => avatar.style.border = "none");
}

window.onload = () => {
  
    let newLink = createTag("a", "p-navEl-link");
    newLink.setAttribute("href", "https://forums.taleworlds.com/index.php?find-threads/contributed");
    newLink.appendChild(document.createTextNode("New Replies"));
    
    let newDiv = createTag("div", "p-navEl");
    newDiv.appendChild(newLink);
    
    let newListItem = document.createElement("li");
    newListItem.appendChild(newDiv);
    
    document.querySelector(".p-nav-list").appendChild(newListItem);
  
  fixAvatars();
}

*coughs IE is probably coughs not working coughs

 

[Cpt. Nemo]

You're an actual saint.

 

[Zombie Warrior]

You're an actual saint.

I'm glad you like my script! But I'm not a saint, I'm just bored. And all of my scripts do what the forums should be able to do out of the box.

 

[Age of Empires ¶ Densetsu]

Nice, this is a handy script. Just tested a few GIFs as avatars and they all appear to work.

Hopefully they implement this feature officially.

 

[Zombie Warrior]

Nice, this is a handy script. Just tested a few GIFs as avatars and they all appear to work.

Thank you for testing it!

 

[Antoine de Saint-Exupéry]

keep up the good work lol

 

[Zombie Warrior]

So I did some testing around with apngs and they generally work, but it seems frame skipping is disabled and large delay between frames too. Edit: or is it different delays? I'm not sure, I'll do some further testing later.

 

[Zombie Warrior]

I updated the script to remove borders on small avatars when browsing thread categories:

If you do not want square avatars or animated avatars but want to get rid of the small borders, you may run this script instead:

// ==UserScript==
// @name     No Border For Small Avatars
// @version  1
// @grant    none
// @match    https://forums.taleworlds.com/*
// ==/UserScript==
window.onload = () => document.querySelectorAll(".avatar.avatar--separated").forEach(avatar => avatar.style.border = "none");

 

[Plasquar]

A dream come true.
A simple addition, yet so effective.

Thank you (and yes, I've seen the video).
Gonna give it a shot right away.

 

[Zombie Warrior]

Glad you like it! I specifically had you in mind when I wrote the script, since the animation sequence of your avatar is pretty elaborate. I thought it'd be worth it. Gifs and apngs are not meant to be static images!