Did you know the character icons are still on the site? Hover over “Browse” and you’ll see them under “Characters”.

They appear to be in the form //static.fimfiction.net/images/characters/character_name.png.
The tags showing the names of characters in stories are of the form <a ... data-tag = “character-name”>Character Name</a>

So that got me to thinking on how to swap one for the other. So I came up with this little setup:

function getCharacterTags() {
console.log("Getting Character Tags");
return document.querySelectorAll("a.tag-character");
}

function swapForPictures(tags) {
console.log("swapForPictures");
console.log("Tags Found: " + tags.length);
var i;
for (i = 0; i < tags.length; i++) {
var datatag = tags[i].getAttribute('data-tag');
datatag = datatag.replace("-","_");
tags[i].innerHTML = "<img src=//static.fimfiction.net/images/characters/" + datatag + ".png>";
}
}
swapForPictures(getCharacterTags());

The first function gets a list of all the <a> tags that refer to characters.
The second function takes in this list and...
A) Gets the character’s code (twilight-sparkle)
B) Converts the dash to an underscore (twilight_sparkle) for technical reasons.
C) Hammers it together into an image tag (<img src="//static.fimfiction.net/images/characters/twilight_sparkle.png">)
D) Replaces the guts of the link (the character’s name) with the image tag.

This works for most characters. Twilight and Shining and Mane Six show up fine, Celestia and OC do not. There are apparently some inconsistencies and special cases that need to be ironed out. But it’s a start.

Edit: Fixed some broken tag-to-image conversions. The script is here.

5977471 Thank you for doing this. Other than the Genre Color Tags, this was the big thing that bothered me. It’s very appreciated!

By the way in case you didn’t know, I think Knighty warned in Discord those images will be going away, or at least moved offsite (deribooru or something). So it’ll work for now but they won’t be there forever.

5977471
For the moment, if you go to the page for a new story, the tags should be there as well. Might be a good idea to grab copies of all of them while you can, though.

--arcum42

5977544
Okay, I did that. So now I have a complete list of the pictures and their correct names. I’ll have to go jam a massive switch/case statement in there to catch all the mismatches.

see also (not mine) https://userstyles.org/styles/143583/fimfic-character-tag-icons

5977471
I’m confused how to use this; do I copy this straight into Stylish? Because that didn’t work, so I figure that’s not what I’m supposed to do. Do I copy this into Tampermonkey?

5978225
This is a Tampermonkey one. Both functions and the executor at the bottom all go into one script. There’s also a header that I didn’t post, but I think all you need from it is:
// @include https://www.fimfiction.net/*
I’m not an expert.

5978239
Ah, okay. Installed!

I’m pairing this with a style to fill in some of the broken ones, the only issue being the broken image rests on top of the fixed image, but I can live with that.

5978284
I’m still fiddling with mismatches between the names used by character tags and the names used by the images. For instance, The Cutie Mark Crusaders have cutie-mark-crusaders as the tag and cmc.png as the image and Screwball is screwball in the tag and has “screwball head.png” (yes, with a space) as the image. There’s also a boatload of tags with colons that get turned into underscores, another boatload that don’t, and all the Equestria Girls tags end with -eqg in the tag but the images only have -eg. I also have to figure out how to publish these scripts.

5978308
Wow, that seems like quite a bit of different issues (especially with Screwball, wut? ).

I think Greasy Fork still works? I’m not really up to date on which sites work and which ones don’t, just that Stylish works and is up and running. Most of the user scripts I’ve installed have come from Greasy Fork, so you could always upload them there. (Greasy Fork is for scripts and Stylish is for styles, btw).

5978334
I’ve actually got it on GitHub now. It’s here.

5978337
Ah, GitHub. I didn’t remember that one.

Okay, so now I have the new one downloaded, and it seems like everything is good to go! Thank you for your work, I really appreciate it!

5978368
No problem. Just let me know if there are any broken images so that I can fix them.

5978396
Just as a suggestion, if you uploaded the images to github as well and adjusted the script to look for them there, then the script would work even if knighty deletes the originals...

--arcum42

GitHub is not an image hosting service. I’m taking a look at imgur.

5978445

You definitely will want to download and archive the images, because it is almost certain that he will remove them. He did it with the configurable background “textures” (fortunately, I had saved the background texture that I used, so I can still use it now).

Imgur will not work unless you have some sort of extension to control the referer. Imgur banned fimfic quite a while ago.

5979647
Well, I already downloaded the pictures (it’s as easy as saving the New Story page). My preference is that they are packaged with the script so that the person using it doesn’t have to depend on a third party. They only come up to about half a meg altogether - so I can put them on github - though I don’t know how reasonable it is to deploy them and have javascript read them. I’ll have to do some tinkering and find out.

Link: Character Pics

5979694

If you name the file with a .user.js extension and bump the version number every time you change it, people can use GitHub’s “Raw” link to install it and their browsers will poll for updates. (Though I still prefer just using Greasy Fork with the listing paired to the GitHub repo. That way, git push still seems to work the same way but, if the script fails sanity checks, the broken version doesn’t get pushed live.)

5977990
None of these solutions seemed to work properly on my browser (they all result in two different heights of tags in a single line), so I added a hack to FimFic Character Tag Icons to get images that look natural in a single line with the text tags.

In case anything happens to the userstyles.org forum thread, here’s the (very hacky) CSS I added which may also be useful with other solutions:

  .story-tags > li a.tag-character { 
    padding: 0; 
    border: 1px solid #437bb6 !important;
  }

  a.tag-character {
   position: relative;
   bottom: calc(-4.2px - 0.4ex);
   height: calc(4.2px + 1.1em + 4.2px);
   overflow: hidden;
  }
  a.tag-character::after {
    margin-top: -1ex;
  }

EDIT: ...and to make the featured carousel match:

  .featured-story__tags { display: block !important; }
  .featured-story__tags li { margin-right: 3px !important; }
  .featured-story__tags li::before { display: none !important; }
  .featured-story__tags li a { border-radius: 0.3em !important; }

5979694

If they are sufficiently small, you could probably get away with converting them to data urls. That way you would not have to worry about any host other than the one used to deploy your script.

5980296
It looks about like 3.5k per data URL, so I guesstimate about 750k for the whole batch. I think that’s going to be the way to go. I can keep everything neat and tidy in a single file.

5980247
That looks nice.

Update: I’m working on this. Right now, I’m trying to restrain from throwing my keyboard through my monitor due to the sheer madness of modern-day computing. Visual Studio is unable to refresh my credentials. Instead of tabling the matter and attempting to refresh my credentials perhaps some other day before moving on to it’s primary purpose of helping my compile my code, it has decided that this is an issue worthy of dying over and has crashed.

I had wanted to a write a brief C# program that would iterate through the roughly two hundred images and convert them into base-64 string form before formatting them that looked something like javascript that I could paste into the middle of my script. I have tested one image already; I know the results will work. I had hoped to save myself a truly monumentally tedious task of individually converting images.

Now, I’m just a hobbyist using Visual Studio, but what if this was my job to compile code and the IDE just ups and dies for no sane reason and cannot even be reinstalled (I tried)? There are occasionally good reasons for programs to access the registry or the internet, but no program should be so fragile that it needs them and fills if they aren’t in a preferred state. I am completely disgusted with this nonsense.

5981111

If you’ve got Python 2.x installed, you can use the “files to data URIs” helper I wrote for myself.

python datauri.py --mime=image/png -b -1 *.png > URIs.txt

I haven’t tested it on Windows, but I’ve built a pretty good habit of writing portable code on the first try. (And, if you aren’t willing to install Python, let me know and I’ll try to find time to run it through py2exe some time today or tomorrow.)

5981203
I’ve actually got it solved. After I finished weeping bitter tears of frustration over Visual Studio, I found a command line program called b64.exe that takes a file in and outputs a text file of it’s 64-byte-string equivalent. I wrote a batch file to call it against each of the images. I wrote another batch file to assemble the resulting text files into a single text file roughly structured as a block of cases inside a switch statement. I cleaned it up with some create find and replace commands and imported it directly into my script, which now weighs in at a hefty 675kB. I just have to finish going through and fixing the naming inconsistencies I mentioned earlier in the thread and then I’ll put it up.
Edit:
New version is up. I believe you click "Raw" to have Tampermonkey install it. It now uses data urls, and uses the user.js extension. It also no longer shows ugly broken image links on missing characters. There shouldn't be any missing characters, but if there are, let me know so that I can fix it.

5981231
Missing pony: Twilight Velvet

5982875
I fixed it along with a few others I caught.

5983014
Also: Babs Seed, Cake Twins, Granny Smith, Power Ponies, Crystal Ponies, (probably) Bat Ponies

5983014
Also missing Fleur de Lis, Mare Do Well, Photo Finish, and Flim and Flam.

5983063
5983406
Thanks for tracking them down. Anyone with a space in their name seemed to fare poorly. I went back and combed out everyone with an underscore in their filename and scored a dozen more fixes. I really should've mass renamed the files in an earlier step.

I also discovered that my script choked on filenames with spaces. Apparently, the tags for Twilight's parents were created before they were officially named, so they were titled "twily mommy" and "twily daddy". Screwball was "screwball head".

Hopefully I have them all now, but I'll guess we'll see.

The green border color is... ugh.

Anyway to change it?

Like to silver maybe?

6064152
You betcha!

Look down in the code for this chunk:
if(imgdata != undefined) { tags[i].innerHTML = "<img src='data:image/gif;base64," + imgdata + "' alt='" + tags[i].getAttribute('title') + "'>"; }
Below it, add this line:
tags[i].style="background-color:silver; border-color:gray;";
I personally found the silver to be bit harsh, but you can change the color to whatever you want.

I also have a Stylish Script that replaces the green border with character's own color schemes (or whatever I feel best). It's a work in progress for now.

6073487 Thanks!^_^

Here's what I've got it as now.

http://nightgazer.altervista.org/Code.txt

6074037
Okay, so you've got:
tags[i].style="background-color:silver; border-color:1px solid silver;";
Your only problem is that you can't define border-color as a solid or as 1px. It only defines the color. My browser still shows the border as green.

Given that you are making the background and the border both the same color, what you probably want is:
tags[i].style="background-color:silver; border-width:0;";
This sets the border to zero width, making it go away entirely. Alternatively, you could use:
tags[i].style="background-color:silver; border-color:silver;";
Which sets both background and border to the same color, but would require slightly more work if you ever change your mind on the color.

6074181 " tags[i].style="background-color:silver; border-color:silver;"; "

That one did the trick now, thanks!^_^

Just letting you know that Little Strongheart, Cloudchaser, and Dean Cadence are no longer showing up properly.

5977471 I love this script!

But I gotta ask.

Is there a way to replace the huge amount of stuff in return " "; with a url instead? That way I can have the icons on my website and get them that way. Let me know.

6152402
Yes. The first thing you will need is somehow track down all of the icons used. Here they are. The next thing you will do is replace the entire getPictureData function - the one with the monstrous strings - with this:
function getPictureData(datatag) { return "www.yourwebsite.per/subdirectory/" + datatag + ".png" }
This makes it so the that the source you look for is a URL instead of a big chunk of ANSI gobbledegook.

Then you want to go into to the swapForPictures function and change
tags[i].innerHTML = "<img src='data:image/gif;base64," + imgdata + "' alt='" + tags[i].getAttribute('title') + "'>";
with
tags[i].innerHTML = "<img src='" + imgdata + "' alt='" + tags[i].getAttribute('title') + "'>";
What this does is tell your browser to stop interpreting the image source as data and go back to the default of interpreting it as a URL.

I haven't tested this (because I prefer the other way), but this should get you most, if not all, the way there. Also, you might need to change the names of some of the pictures. There's a mismatch between them and the character tags. If you see a broken link, something didn't line up right. Have fun!

6152683 I did what you said, but it doesn't seem to work.

I did a quick little test using Twilight Sparkle as the one to test. But it didn't show up. Just her name instead of her picture.

Here's what I used testing.

http://nightgazer.altervista.org/CodeTest.txt

That should have showed Twilight's pic, but it didn't.

I know the url works because it's right here.

https://nightgazer.000webhostapp.com/gallery/FiM/charpix/twilight-sparkle.png

Help?

The solution to your problem is ridiculously simple:
"https://nightgazer.000webhostapp.com/gallery/FiM/charpix/"
The browser is interpreting your source as a relative URL, not an absolute one. Without that https:// prefix, it didn't recognize that you wanted to load a picture from a whole different domain and assumed that the image you wanted was somewhere on fimfiction.net in a folder named "nightgazer.000webhostapp.com".

That was my bad; I was subliminally expecting the browser to catch on to the fact that the beginning of the URL is formatted as a domain. I never bother with the http(s) part in ordinary web browsing; the browser helpfully fills that part in for me and so it was easy for me to forget that it is, indeed, an crucial part of referencing resources on the web.

6152909 Thanks!^_^

I tested it and it worked out.^_^

Now I never have to worry about the pics being taken down from fimfiction.net since I have my own cache of them now.^_^

Update: I was blindsided by the tag change and some of my script is now broken. I am currently taking advantage of the fact that tags are now numbered to reorganize things in a saner way. For instance, the MLP:FiM tag can be referenced as 4, Twilight Sparkle is 6, Adventure is 226, and Alternate Universe is 240. I can now go through all the numbers without missing any and know that they are accounted for. I like this change.

Here's what I'm using now.

http://nightgazer.altervista.org/FiM_Pic_Code.txt

and these are the charpix for it

http://nightgazer.altervista.org/charpix.zip

and this is what they look like

http://nightgazer.altervista.org/gallery/FiM/charpic.png

.

6152909

Is there a way to make it so that it reads from a location on my harddrive? The allowed bandwidth on my site host is going down. I'd really like to have it read the pics off my harddrive instead.

I've updated my script to use the new numbers. I don't yet have images for characters from Season 7 or The Movie as they didn't yet exist when I got my batch of pictures, but I'll get to them.

6259888
I wasn't able to find a way for javascript to read files on the hard drive. And really, how safe would javascript be if any random webpage could read files on your hard drive?

One thing that might work is to somehow reference your own computer. Put something like "http://localhost/" as your server. I'm going to have poke around at that.

Edit: I poked around and didn't have much luck. You need some kind of http hosting software running on your computer. For security reasons, browsers don't want to let remote-seeming javascript or html access local files.

6259965
The script works great, but I noticed it didn't do images when already viewing a story since someone made a minor goof: when a story is open, the tags have a tag-id parameter rather than a data-tag-id parameter.

To fix this, just change getStoryTags to read:

function getStoryTags()
{
// Return all anchor tags that have a data-tag-id member
// This should select all genre, series, content, and character tags
var taglist1 = document.querySelectorAll("a[data-tag-id]");
var taglist2 = document.querySelectorAll("a[tag-id]");
taglist1 = Array.prototype.slice.call(taglist1);
taglist2 = Array.prototype.slice.call(taglist2);
return taglist1.concat(taglist2);
}

and part of swapForPictures (line 348 in the original) to read:
let id = tags[i].getAttribute('data-tag-id');
if (id === null){
id = tags[i].getAttribute('tag-id');
}
const imgdata = getPictureData(Number(id));

Other than that, great script!

The Stylish script fails for a similar reason: the tags during a story don't have a data-tag element, so they all turn white. (They don't have a tag element either; there's only the tag-id.

6261562
I made some changes to fix this strange problem with the names of tags. Character icons should now be visible on the chapter pages.

Also, I'd forgotten I had a stylish script. Oops. Anyway, I fixed that one, too. It was as simple as find-replacing tag-id="XXX" to href="/tag/XXX".

I noticed they now have a Lemon Hearts tag. I got tired of seeing her name so I took this ( http://mlp.wikia.com/wiki/File:Lemon_Hearts_%22state_dinners,_that_sort_of_thing%22_S5E12.png ) and used ACD Photo(something) to make this http://nightgazer.altervista.org/gallery/FiM/charpix/lemon-hearts.png . It looks horrible, but it was the best I could do.

If anybody out there actually knows what they're doing see if you can make a better one.

If you do, let me know it.

6262245 Is there any way to adjust my current script ( http://nightgazer.altervista.org/FiM_Pic_Code_On_01-05-18.txt ) to where it will show the pics on the chapter pages as well?

Also... just how many new characters have been added? The new story section no longer has pics in it to choose when making a story. And that was how I used to know when a new character was introduced.

Let me know. Especially about the new characters. I will have to look up pics for them on Google and hope they work.