8

Flairs used to look great on LinkedIn till now. However I noticed recently that the flairs on the LinkedIn profiles are showing stretched like below :

enter image description here

It can also be seen on my LinkedIn profile. This problem is not only with my linkedIn profile but can be seen on other profiles as well. I also saw the profile of Liniel who has answered a wonderful answer for Is it possible to show the Stack Exchange flair on LinkedIn? . It shows stretched there.

Problem can be on the LinkedIn side as well, but is there a way to solve the problem by having different sizes of flair images or something? How can this issue be resolved?

13
  • 2
    I can't see anything on your LinkedIn profile, did you remove the flair? – Shadow The Vaccinated Wizard Nov 27 '14 at 9:09
  • 2
    @ShadowWizard I can see it there, at the bottom of Summary section, after the words "For more you can see my stackoverflow profile...", stretched exactly as at screen shot here (FWIW my flair at LinkedIn also looks stretched and fuzzy, although not as badly) – gnat Nov 27 '14 at 9:16
  • 1
    @gnat nothing for me, but I get client side error that might be related. Anyway, 100% this is LinkedIn bug, nothing Stack Exchange can do. – Shadow The Vaccinated Wizard Nov 27 '14 at 9:21
  • 1
    @ShadowWizard I guess the question isn't necessary "what Stack Exchange (or LinkedIn for that matter) should fix". It probably can be answered with advice on what a regular user can do to solve this. Given the difference I see on asker's flair and mine (mine doesn't look good, but much better than their), I guess there's some trick or hack (maybe related to gravatar) that can influence things – gnat Nov 27 '14 at 9:26
  • @ShadowWizard I tried re-adding the flair that time. However it didn't help. Maybe that's why it was not visible for some time. Its there at the end of summary. – Shobhit Puri Nov 27 '14 at 15:45
  • Nope, still can't see it. Might be something on my end, LinkedIn is stuck on German for me and generally sucks, so it's no surprise things there are broken. – Shadow The Vaccinated Wizard Nov 27 '14 at 16:00
  • Can you see it on someone else's profile ? – Shobhit Puri Nov 27 '14 at 21:24
  • I tried to show my Stack Exchange's profile on Linkedin with no success... Can you describe how can I do that here? – Sorack Nov 21 '16 at 11:37
  • @Sorack You can add media in summary. Use that to at flair. – Shobhit Puri Nov 21 '16 at 16:03
  • @ShobhitPuri I tried it, but that's the result :( – Sorack Nov 21 '16 at 16:05
  • anyone has workoarund for this issue? – Akash KC Feb 24 '17 at 22:21
  • @AkashKC You are right. It seems to be happening again with the recent changes that they've made on the platform. – Shobhit Puri Mar 6 '17 at 23:55
  • What's with the JPEG compression? – Block of Diamond Dec 17 '20 at 18:54
2

If you are still looking for a solution, I fixed it this way:

I host a PHP script (scroll down for the code) on my webserver which gets the flair from Stack Overflow and adds some padding to it. This way it looks a bit nicer on your LinkedIn profile (I use a script, so it downloads my new flair everytime the page is reloaded and generates a new image with padding on the fly):

Screenshot of flair  and dashboard on LinkedIn

So I actually add a link (Add profile section -> Featured -> Links) to my LinkedIn, but instead of providing the link to my flair, I use the link to my PHP script (which is https://nodiet.nl/stackoverflow.php at the moment of writing).

The script:

<?php
@header("Content-Type: image/png");
$flairURL = "https://stackexchange.com/users/flair/2068502.png";

list($flairWidth, $flairHeight) = getimagesize($flairURL);
$flair = imagecreatefromstring(file_get_contents($flairURL));

// new image dimensions
$newWidth =  $flairWidth + 100; # 100 is the horizontal padding
$newHeight =  $flairHeight + 100; # 100 is the vertical padding

// determine offset coords so that new image is centered
$offsetX = 50; # horizontal padding divided by 2
$offsetY = 50; # vertical padding divided by 2

// create new image and fill with background colour
$newFlair = imagecreatetruecolor($newWidth, $newHeight);
$bgColor = imagecolorallocate($newFlair, 238, 238, 238); // grey
imagefill($newFlair, 0, 0, $bgColor); // fill background colour

imagecopyresampled($newFlair, $flair, $offsetX, $offsetY, 0, 0, $flairWidth, $flairHeight, $flairWidth, $flairHeight);
imagepng($newFlair);
imagedestroy($newFlair);
imagedestroy($flair);
1

Well, LinkedIn seems to have fixed the problem. I couldn't find any temporary alternative from stackoverflow for using a flair with smaller dimensions or anything similar.

3
  • 3
    Linkedin still hasn't solved the problem. The flair still looks distorted and stretched. – IAmMilinPatel Nov 16 '17 at 3:15
  • 1
    Yaa, it keeps changing. The update in late 2014 fixed it. Then again it was distorted. It probably is a resolution this. Flair's resolution is not that great. Some other attachments that I have there with better resolution look okay. – Shobhit Puri Nov 16 '17 at 3:50
  • @ShobhitPuri I guess I might have a solution to the resolution problem ;) Check out my answer below – Erik van de Ven Dec 17 '20 at 13:10
0

At the time of writing February 2020 it works, enter image description here

You must log in to answer this question.

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