3

I have a few accounts on SE sites but I read more than I contribute, so all of them have less than < 200 reputation each which will probably grow slowly in the future. Even though that means that I can't show the combined flair, I still have an option of embedding individual flairs with smaller reputation by using a direct image URL.

My problem is that if, say, I want 5 different flair images (this is the approximate number I want), I have to go to five different sites to get them. My question is whether it has been considered providing a centralized flair page that will allow me to get all the image codes for all of the flairs that I want in one place?

2

The following Stack Snippet does that for you.

If you enter your accountid (found in the url of your network profile) the snippet will call the Stack API /users/{ids}/associated which returns the site_url and your userid for each site you have joined. With that information it is easy to generate the img url [site_url]/users/flair/[user_id].png. The rest of the code generates some DOM elements and add those to the DOM so you can see the result.

var accountid = 521817;

function emptyNode(node) {
  while(node.firstChild)
     node.removeChild(node.firstChild);
}

function generateAllSiteFlair(accountid)
{
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", function() {
    var resp = JSON.parse(xhr.responseText);
    var flair = document.getElementById('flair');
    emptyNode(flair);
    resp.items.forEach(function(item) {
      var img = document.createElement('img'),
      div = document.createElement('div'),
      span = document.createElement('span');

      img.src= item.site_url + "/users/flair/" + item.user_id + ".png";
      div.appendChild(img);
      span.textContent = img.src;
      div.appendChild(span);
      flair.appendChild(div);
    });

  });
  xhr.open("GET", "https://api.stackexchange.com/2.2/users/" + accountid + "/associated?pagesize=100&filter=!-rYuN4gX");
  xhr.send();
}

document.getElementById('go').addEventListener('click', function(val) {
  generateAllSiteFlair(document.getElementById('accountid').value)
});
#flair span {    
    float: right;
    overflow-wrap: break-word;
    width: 50%;
}
<div>
<label for="accountid">account id: 
<input id="accountid" type="text" value="521817" />
<label>
<div>
<div>
<button id="go">Generate</button>
<div>
<div id="flair">

</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .