Blank imageFlair
Hosting Grumpydev Imageflair locally ended with two issues left: an empty image and my wish to include more complete StackExchange bits like the current StackExchange flair does.
I thought fixing the empty image would take a rainy day. It actually took a few rainy hours.
No text
The culprit is that I didn’t have the Microsoft Core Fonts for the Web installed. Which was no coincidence as the free download of those from Microsoft terminated in 2002. The upside is that because of their licenses, they are available as open source and most linux distributions have a script package that will download these fonts. OpenSuSE has fetchmsttfonts for this.
Alternatively, you can use the web.archive.org to download manually, but that’s a tad tedious. But if you love tedious: Free downloads – TrueType core fonts for the Web.
zypper install fetchmsttfonts
That installs the fonts in:
/usr/share/fonts/truetypeThe drawback of having fetchmsttfonts is that the original Microsoft versions of these fonts are downloaded from corefonts.sourceforge.net each time the fetchmsttfonts package is updated, potentially overwriting newer versions of the fonts in that directory. If you don’t want that, use the trick at (not yet archived at the WayBack machine) font handling – install fetchmsttfonts, copy fonts, rpm -e fethmsttfonts, copy fonts back.
Having the fonts installed, I thought the only thing I needed to fix were the multiple references in config.php from that pointed to Arial.TTF. I took the poor man’s approach and just did this being in the directory of config.php:
cp /usr/share/fonts/truetype/arial.ttf Arial.TTF
Filled Imageflair
That didn’t work either: still no text showed.
So I decided to run imageFlair.php from the command line after setting $imageflair_debug = true; in config.php which then resulted in all sorts of warnings like
PHP Warning: imagettftext(): Could not find/open font
After reading I decided to build a small php-gd.tester.php script containing phpinfo(); and gd_info showing these portions for PHP GD (non-relevant bits stripped):
| Additional .ini files parsed | /etc/php5/conf.d/ctype.ini, /etc/php5/conf.d/dom.ini, /etc/php5/conf.d/gd.ini, /etc/php5/conf.d/iconv.ini, /etc/php5/conf.d/json.ini, /etc/php5/conf.d/mysql.ini, /etc/php5/conf.d/mysqli.ini, /etc/php5/conf.d/pdo.ini, /etc/php5/conf.d/pdo_mysql.ini, /etc/php5/conf.d/pdo_sqlite.ini, /etc/php5/conf.d/sqlite3.ini, /etc/php5/conf.d/tokenizer.ini, /etc/php5/conf.d/xmlreader.ini, /etc/php5/conf.d/xmlwriter.ini |
gd
| GD Support | enabled |
| GD headers Version | 2.1.1 |
| GD library Version | 2.1.1 |
| FreeType Support | enabled |
| FreeType Linkage | with freetype |
| FreeType Version | 2.6.3 |
| GIF Read Support | enabled |
| GIF Create Support | enabled |
| JPEG Support | enabled |
| libJPEG Version | 8 |
| PNG Support | enabled |
| libPNG Version | 1.6.21 |
| WBMP Support | enabled |
| XPM Support | enabled |
| libXpm Version | 30411 |
| XBM Support | enabled |
| WebP Support | enabled |
And the gd_info dump:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| echo "<h1>gd_info</h1>"; | |
| $gdInfo = gd_info(); | |
| echo "<table>"; | |
| foreach($gdInfo as $key=>$value) { | |
| echo "<tbody>"; | |
| echo "<tr>"; | |
| echo "<td class='e'>" . $key . "</td>"; | |
| echo "<td class='v'>" . $value . "</td>"; | |
| echo "</tbody>"; | |
| } | |
| echo "</table>"; | |
| ?> |
| GD Version | 2.1.1 |
| FreeType Support | 1 |
| FreeType Linkage | with freetype |
| T1Lib Support | |
| GIF Read Support | 1 |
| GIF Create Support | 1 |
| JPEG Support | 1 |
| PNG Support | 1 |
| WBMP Support | 1 |
| XPM Support | 1 |
| XBM Support | 1 |
| WebP Support | 1 |
| JIS-mapped Japanese Font Support |
Too bad though: no information on where it sources the fonts from.
No image
Having no solution for the font rendering yet, I focussed at the lack of profile picture.
In the past, the images were generated with gravatar information in the JSON, but now that is empty. See for instance the output of http://superuser.com/users/flair/1.json versus his image http://superuser.com/users/flair/1.png
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "id": 1, | |
| "gravatarHtml": { | |
| }, | |
| "profileUrl": "http:\/\/superuser.com\/users\/1\/jeff-atwood", | |
| "displayName": "Jeff Atwood", | |
| "reputation": "14,561", | |
| "badgeHtml": "<span title=\"24 gold badges\"><span class=\"badge1\">●<\/span><span class=\"badgecount\">24<\/span><\/span><span title=\"79 silver badges\"><span class=\"badge2\">●<\/span><span class=\"badgecount\">79<\/span><\/span><span title=\"109 bronze badges\"><span class=\"badge3\">●<\/span><span class=\"badgecount\">109<\/span><\/span>" | |
| } |
That reveals quite a change in the JSON that imageFlair expects. Actually there is a lot of HTML in there.
So decided to try http://superuser.com/users/flair/1 in addition to http://superuser.com/users/flair/1.json with this result:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <style type="text/css"> | |
| .valuable-flair .userInfo .username a, .valuable-flair .mod-flair | |
| { | |
| color: #1086A4; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="//sstatic.net/flair-Default.css" /> | |
| </head> | |
| <body> | |
| <div class="valuable-flair"> | |
| <div class="gravatar"> | |
| <a title="See my profile on Super User" target="_blank" href="http://superuser.com/users/1/jeff-atwood"><div class="gravatar-wrapper-50"><img src="https://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&d=identicon&r=PG" alt="" width="50" height="50"></div></a> | |
| </div> | |
| <div class="userInfo"> | |
| <span class="username"><img src="http://superuser.com/favicon.ico" width="16" /><a href="http://superuser.com/users/1/jeff-atwood" target="_blank">Jeff Atwood</a><span class="mod-flair" title="moderator">♦</span></span> | |
| <br /> | |
| <span class="reputation-score" title="reputation score">14,561</span> | |
| <br /> | |
| <span title="24 gold badges"><span class="badge1">●</span><span class="badgecount">24</span></span><span title="79 silver badges"><span class="badge2">●</span><span class="badgecount">79</span></span><span title="109 bronze badges"><span class="badge3">●</span><span class="badgecount">109</span></span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Two downsides here:
- This doesn’t work for the combined stackexchange flair: http://stackexchange.com/users/flair/1.png works, but http://stackexchange.com/users/flair/1 gives a 404.
- Rendering HTML servers side to PNG requires a lot of work.
Time for another rainy day (:
–jeroen
Every now and then, 
The Wiert Corner - irregular stream of stuff 