Better Avatar Script - Animations Restored

Currently Viewing (Users: 0, Guests: 1)

Zombie Warrior

Sergeant Knight
Best answers
0
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).
JavaScript:
// ==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");
};
JavaScript:
// ==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
 
Last edited:

Densetsu

Age of Empires II
Marquis
Best answers
0
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

Sergeant Knight
Best answers
0
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

Sergeant Knight
Best answers
0
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:
JavaScript:
// ==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

Grandmaster Knight
Best answers
0
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

Sergeant Knight
Best answers
0
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!