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? 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. 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. 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. Nov 27 '14 at 16:00
  • Can you see it on someone else's profile ? 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. 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. Mar 6 '17 at 23:55
  • What's with the JPEG compression? 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. 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. Nov 16 '17 at 3:50
  • @ShobhitPuri I guess I might have a solution to the resolution problem ;) Check out my answer below 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 .