1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

FLIR Image Replacement - nimmt nur default Schrift

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von Fantasmo, 17. September 2009.

  1. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Hallo,

    ich habe FLIR Image Replacement eingebaut. ( FLIR Website: http://facelift.mawhorter.net/quick-start/ ).

    Rein theoretisch funktioniert es auch, meine Überschriften werden ausgetauscht.
    ABER es wird nur die von mir festgelegte "default"-Schrift verwendet...
    Codestelle dazu in der "config-flir":
    PHP:
    1.  
    2. // Each font you want to use should have an entry in the fonts array.
    3. $fonts = array();
    4. $fonts['Cooper']            = 'CooperBlackStd.otf';
    5. $fonts['Arial bd']          = 'arialbd';
    6.  
    7. // The font will default to the following (put your most common font here).
    8. $fonts['default']       = $fonts['Arial bd'];
    9.  
    PS: Der Dateiname bei Arialbd stimmt eigentlich, nur hier löscht das irgendwie immer das TTF raus.

    JS-Code in der HTML, der sagt, welches <h>Tag verwendet werden soll (das funktioniert ja wie gesagt):
    HTML:
    1.  
    2.  
    3. <script language="javascript" src="http://localhost:8502/wordpress/wp-content/themes/mytheme/facelift/flir.js"></script>
    4.     <script type="text/javascript">
    5.         FLIR.init( { path: 'http://localhost:8502/wordpress/wp-content/themes/mytheme/facelift/' } );
    6.         FLIR.auto( [ 'h3' ] );
    7.     </script>
    8.  
    In der CSS soll man das ja dann so ansprechen:
    Code (Text):
    1.  
    2. h3 {
    3.     font-family: Cooper, Arial, Sans-serif;
    4. }
    5.  
    Na jedenfalls das <h>-Tag ansprechen funktioniert, denn meine h3-Schrift wird tatsächlich ausgetauscht, aber nur gegen die Default-Schrift.
    Wenn ich bei der Arial-Schrift, die ja später als default genommen wird, einfach mal diese "Cooper-Schrift" reinkopiere gehts auch... der Dateiname stimmt also eigentlich.

    Kennt das jemand? Was ist falsch gemacht?
    PS: Auch wenn ich z.B. schreibe
    Code (Text):
    1.  
    2. h3 {
    3.     font-family: 'Cooper', Arial, Sans-serif;
    4. }
    5.  
    also mit einfachen Anführungszeichen, gehts nicht.

    Ich will halt "Cooper" DIREKT ansprechen und die default Schrift soll eben tatsächlich auch nur als default-Schrift herhalten.
  2. Sven Mintel

    Sven Mintel Mitglied

    Moin,

    bist du sicher, dass dieser Font auf dem Server vorhanden ist?
  3. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Ja, man legt sie in einem facelift-eigenen font-Ordner ab.

    Wenn ich statt "Arialbd . ttf" diese "CooperBlackStd.otf" exakt so reinschreibe, wird sie ja auch als Default genommen. (OTF... ist irgendwie ne andere Art von Schrift, aber der Dateiname ist tatsächlich so).
  4. Sven Mintel

    Sven Mintel Mitglied

    Ich habe das jetzt mal probiert, rein von der Logik her funktioniert das, bei mir wird auch der richtige Font genommen.
    Es geht auch mit OTF...das ist ein OpenType-Font. Dieses PHP-Skript dort verwendet ja eine TTF-Methode der GDLib, und diese wiederum verwendet Freetype, was auch OTF unterstützt.

    Aber an dem Font-Format kannn es ja nicht liegen, du hast ja geschrieben, dass es, wenn es default ist, richtig angezeigt wird.

    Um erstmal herauszubekommen, ob der Fehler in JS oder PHP zu suchen ist, lasse dir mal den Pfad des(in falscher Schrift) angezeigten Bildes anzeigen und poste ihn hier.
  5. Fantasmo

    Fantasmo Erfahrenes Mitglied

    OK, ich habs per "firebug" kopiert... Die Bildquelle des eigentilch falschen Schriftbildes heißt also so:

    Code (Text):
    1. src="http://localhost:8502/wordpress/wp-content/themes/mytheme/facelift/generate.php?text=Search&amp;h=21&amp;w=160&amp;fstyle=%7B%22mode%22%3A%22%22%2C%22output%22%3A%22auto%22%2C%22cSize%22%3A%2232%22%2C%22cColor%22%3A%22rgb%280%2C%200%2C%200%29%22%2C%22cFont%22%3A%22cooper%22%2C%22realFontHeight%22%3A%22false%22%2C%22dpi%22%3A%2296%22%2C%22cBackground%22%3A%22transparent%22%2C%22cSpacing%22%3A%22%22%2C%22cLine%22%3A%220.6563%22%2C%22cAlign%22%3A%22left%22%2C%22cTransform%22%3A%22none%22%7D"
    Ist ganz schön lang... das dahinter ist vermutlich das, wo das Bild aufgebaut wird?!

    PS: Ich lese da in der Adresse was mit "cooper" (also DIE Schrift, die ich ja eigentlich haben will):confused:!?

    PS 2: Die CSS liegt übrigens auf der Höhe "../facelift" aber das hat ja eigentlich nix miteinander zu tun., denk ich mal(?)... denn laut Anleitung muss man ja auch nie irgendwo angeben, wo die CSS der Seite liegt.

    Meine Ordnerstruktur:

    mytheme
    ..I
    ..L__index.html (also index.php ist ne php-Datei)
    ..L__style.css
    ..L__facelift
    ............ L____fonts
    ............................ L____alle meine Schriftdateien
    ............ L____config-flir.php
    .............L____flir.js
    ............ L____etc...
  6. Sven Mintel

    Sven Mintel Mitglied

    Also an JS scheint es nicht zu liegen, der Fontname wird ja übermittelt
    Ich habe auch was gelesen :)
    http://facelift.mawhorter.net/doc/config-flir-php-fonts
    Es muss also lauten:
    Code (Text):
    1. $fonts['[COLOR="Sienna"][B]c[/B][/COLOR]ooper']             = 'CooperBlackStd.otf';
  7. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Toll! Wahnsinn!

    Das is ja echt n Ding, wo doch "Arial bd" an sich auch groß geschrieben ist (ok "default", der Begriff ist wiederum klein geschrieben).

    Also das hätten die ja mal als Tipp mit in die Anleitung mit schreiben können... muss man erst die ganze Documentation rausholen.

    Na jedenfalls: Vielen Dank! Jetzt freu ich mich total:)
  8. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Hallo,
    ich bins nochmal... das mit FLIR hat ja dann nun (vorerst) funktioniert.

    Die Besonderheit:
    Das war auf einer Wordpress-Offline-Testumgebung gemacht... aber an sich nix Besonderes, nicht mal mit PlugIns, sondern so wie mans auch bei ner statischen Seite machen würde... Skripte einfügen, den Flir-Ordner mit seinen Schriften mit beim Theme rein, etc...

    Na jedenfalls, jetzt ist das Theme auf einen Server rüberkopiert, alles geht soweit, aber das FLIR-Austauschbildchen findet er wieder nicht. An den FLIR-Dateien kanns doch nicht liegen, die waren doch nun schon so korrigiert, dass es stimmt und alles was dort geschieht läuft doch auch innerhalb des Theme-Ordners ab, also innerhalb der Ordnerstruktur, in der es schon offline lief.

    Oder etwa doch nicht?
    Falls ich nen Denkfehler hab, was muss ich jetzt evtl. wo umtippen?!


    Folgende Fehlermeldungen, die kommen:

    Als Quelle des FLIR-Bildchens zeigts an:
    http://www.meineseite.de/wp-content/themes/blog/facelift/generate.php?text=Hello%20world!&h=33&w=142&fstyle={%22mode%22%3A%22%22%2C%22output%22%3A%22auto%22%2C%22cSize%22%3A%2229%22%2C%22cColor%22%3A%22rgb%2836%2C%20105%2C%20151%29%22%2C%22cFont%22%3A%22cooper%22%2C%22realFontHeight%22%3A%22false%22%2C%22dpi%22%3A%2296%22%2C%22cBackground%22%3A%22transparent%22%2C%22cSpacing%22%3A%22-1%22%2C%22cLine%22%3A%221.3448%22%2C%22cAlign%22%3A%22left%22%2C%22cTransform%22%3A%22none%22}

    Als Fehler, wenn man sich dann dieses Bildchen per "Grafik anzeigen" zeigen lassen will
    Unable to create the cache directory. Verify that permissions are properly set.

    PS: Für den Cache-Ordner (wo der ja, glaube die Schriftbildchen erzeugt und dann herlädt) sind die Rechte für Besitzer übrigens alle 3 freigeschalten und für Welt und Gruppe ist nur schreiben verweigert.
    Zuletzt bearbeitet: 20. Oktober 2009
  9. Fantasmo

    Fantasmo Erfahrenes Mitglied

    FLIR - Umlaute darstellen

    Hallo,

    ich krame nochmal diesen Thread raus, der mir damals auch sehr geholfen hat.
    Vielleicht weiß jemand Rat auf folgendes Problem:

    Wie kann ich FLIR dazu bringen, auch Umlaute richtig darzustellen, bislang kommen da nämlich nur wirre Zeichen?
    PS: Ich verwende das in Wordpress... in Überschriften kann ich da ja auch nicht mit &uuml; Umlaute schreiben, falls das eine angedachte Lösung gewesen wäre.
  10. chmee

    chmee mod | media Moderator

    Man sieht sowas ja recht häufig, die erste Vermutung ist die unzureichende UTF8-Unterstützung der Seite.

    (1) Ist im Header das charset gesetzt?
    (2) Ist ALLES auf UTF8 gesetzt worden? SQL-DB? Wordpress bei Installation? -Link-
    (3) FLIR setzt auf Flash auf, richtig? Wie sieht es dort mit UTF8 aus?
    (4) Wie sieht es mit anderen Techniken aus? Die Flashvariante ist auch nicht grad SEO-freundlich. Ich setze immer auf die Phark-Methode (siehe Hier) [Was leider bei Wordpress wenig Sinn macht, oder man erstellt ein php-Script für die autmatische Erstellung der Überschriften]

    mfg chmee
  11. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Ja, also zwar in Großbuchstaben, also UTF-8, aber es steht das charset-Metatag drin.

    Wenn ich bei phpAdmin reinkomme steht gleich anfangs im "Homebereich"
    # MySQL-Zeichensatz: UTF-8 Unicode (utf8)
    # Zeichensatz / Kollation der MySQL-Verbindung: utf8_unicode_ci

    Gehe ich dann direkt in die Datenbank, steht hinter jeder einzelnen Tabelle utf8-general-ci
    Ganz unten bei "Gesamt" steht dann allerdings latin-swedish-ci

    In der Wp-config.php steht außerdem diese Zeile:
    Code (Text):
    1. /** Database Charset to use in creating database tables. */
    2. define('DB_CHARSET', 'utf8');
    Die Eingaben in deinem Tutorial-Link, mache ich die in phpMyAdmin unter dem Reiter "SQL" im Fenster "SQL-Befehl(e) in Datenbank db0082043 ausführen:"?
    Und es heißt ja da mal "blog.sql" und "blog_utf8.sql" ist das ein Befehl oder soll ich da meinen Datenbanknamen (ist in meinem Fall nur ne lange Nummer) einsetzen?

    Noch als Hinweis: Umlaute in Blogeinträgen oder Kommentaren werden aber bei mir problemlos angezeigt.

    Nein, das geht eigentlich alles mit Javascript, ohne Flash...das ist da anders als zu sFIR oder wie das heißt.

    Das klingt auch interessant, aber sogut kenne ich mich dann nicht in PHP aus, dass ich eigene Wordpress-Plugins schreiben könnte.
    Zuletzt bearbeitet: 15. April 2010
  12. Sven Mintel

    Sven Mintel Mitglied

    PHPMyAdmin ist auch nur ein PHP-Skript.
    Wenn dort steht, dass UTF8 verwendet wird, heisst dies, dass PHPMyAdmin dies tut, wa nicht bedeutet, dass dies die Standardeinstellung ist.

    Gehe mal in PHPMyAdmin auf den Reiter "Variablen" und poste alles, was dort steht in den Zeilen character set client bis character set server
  13. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Also da steht folgendes

    character set client utf8
    (Globaler Wert) latin1
    character set connection utf8
    (Globaler Wert) latin1
    character set database latin1
    character set filesystem binary
    character set results utf8
    (Globaler Wert) latin1
    character set server latin1
    character set system utf8
    character sets dir /usr/share/mysql/charsets/
    collation connection utf8_unicode_ci
    (Globaler Wert) latin1_swedish_ci
    collation database latin1_swedish_ci
    collation server latin1_swedish_ci

    Das mit dem "latin" muss vermutlich irgendwie weg...?!

    Ich würde also mal ganz zaghaft das Vorgehen aus dem oben empfohlenen Tutorial-Link ausprobieren.
    Dazu vorher zwei kurze Fragen:
    1. Ich tippe diese Befehle also unter dem Reiter "SQL" in dieses Eingabefenster "SQL-Befehl(e) in Datenbank db0082043 ausführen:" ein?
    2. Da steht auch mal "blog.sql" und "blog_utf8.sql"... soll ich da irgendwie den Datenbankname eintragen (den soll man ja auch schon weiter vorn in der Zeile bei "DATENBANKNAME" eintippen... oder ist das ein eigener Name für eine neue Datenbank, der hier einfach neu vergeben wird und welchen ich nicht ändern muss/soll?
  14. Sven Mintel

    Sven Mintel Mitglied

    Es bringt nicht viel, wenn du in PHPMyAdmin etwas tust.
    Die Verbindung des ausgeführten Skriptes muss in UTF8 sein....das kannst du nur in dem Skript selbst festlegen.

    Siehe auch PHP-FAQ
  15. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Damit meinst du jetzt die Meta-Tag-Angabe im Header, oder?
    Also im Quellcode des Wordpress-Themes steht schon tatsächlich "charset=utf-8" drin.

    Ü, Ä, Ö usw in einem Blog-Posting werden auch korrekt dargestellt (also keine Fragezeichen und so). Nur eben nicht die Blog-Überschriften, die ich von FLIR bearbeiten lasse...

    ok, im FLIR-php-Skript kann ich allerdings nicht erkennen, wo da ein Zeichensatz festgelegt wird. Das ist doch schon sehr komplex und ich kenne mich dazu zu wenig in PHP aus.

    Ich habe gehofft, dass dieses FLIR-php-Skript jemand hier besser kennt (zumal wir sprachlich bedingt doch auch alle mit Ös und Üs zu tun haben;-) und das Problem bst. öfters auftritt?! )
    Leider wurde bislang auch nicht meine Registrierung für das "offzielle FLIR-Forum" freigeschalten, sodass ich eben leider auch nicht da fragen kann.


    Wie gesagt charset im Header des Wordpress-Themes ist utf-8.
    Diese Befehle da "SET NAMES utf8" würde ich in dieses SQL-Eingabe-Fenster in PHPmyAdmin schreiben?! Damit diesen "latin" weg geht, danach würde ich hoffen, dass FLIR richtig funktioniert.

    ...ich poste hier mal zwei Skripte von FLIR, die vermutlich die Schriften generieren:
    generate.php
    PHP:
    1.  
    2. <?php
    3. /*
    4. Facelift Image Replacement v1.2
    5. Facelift was written and is maintained by Cory Mawhorter.  
    6. It is available from http://facelift.mawhorter.net/
    7.  
    8. ===
    9.  
    10. This file is part of Facelife Image Replacement ("FLIR").
    11.  
    12. FLIR is free software: you can redistribute it and/or modify
    13. it under the terms of the GNU General Public License as published by
    14. the Free Software Foundation, either version 3 of the License, or
    15. (at your option) any later version.
    16.  
    17. FLIR is distributed in the hope that it will be useful,
    18. but WITHOUT ANY WARRANTY; without even the implied warranty of
    19. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    20. GNU General Public License for more details.
    21.  
    22. You should have received a copy of the GNU General Public License
    23. along with Facelift Image Replacement.  If not, see <http://www.gnu.org/licenses/>.
    24. */
    25.  
    26. define('DEBUG', false);
    27. define('ENABLE_FONTSIZE_BUG', false);
    28.  
    29. define('FLIR_VERSION', '1.2.2');
    30. define('IS_WINDOWS', (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN'));
    31.  
    32. require('config-flir.php');
    33. require('inc-flir.php');
    34.  
    35. if(version_compare(PHP_VERSION, '4.3.0', '<'))
    36.     err('PHP_TOO_OLD');
    37. if(version_compare(PHP_VERSION, '6.0.0', '>='))
    38.     err('PHP_UNSUPPORTED');
    39.    
    40. if(false !== ALLOWED_DOMAIN && $_SERVER['HTTP_REFERER'] != '') {
    41.     $refhost = get_hostname($_SERVER['HTTP_REFERER']);
    42.     if(substr(ALLOWED_DOMAIN, 0, 1) == '.') {
    43.         if(false === strpos($refhost, substr(ALLOWED_DOMAIN, 1)))
    44.             err('DISALLOWED_DOMAIN');
    45.     }else {
    46.         if($refhost != ALLOWED_DOMAIN)
    47.             err('DISALLOWED_DOMAIN');
    48.     }
    49. }
    50.  
    51. $fonts_dir = str_replace('\\', '/', realpath(FONTS_DIR.'/'));
    52.  
    53. if(substr($fonts_dir, -1) != '/')
    54.     $fonts_dir .= '/';
    55.  
    56. $FLIR = array();
    57. $FStyle = preg_match('#^\{("[\w]+":"[^"]*",?)*\}$#i', $_GET['fstyle'])?json_decode($_GET['fstyle'], true):array();
    58.  
    59. $FLIR['mode']        = isset($FStyle['mode']) ? $FStyle['mode'] : '';
    60. $FLIR['output']        = isset($FStyle['output']) ? ($FStyle['output']=='gif'?'gif':'png') : 'auto';
    61.  
    62. $FLIR['bkg_transparent'] = is_transparent($FStyle['cBackground']);
    63.  
    64. if($FLIR['output'] == 'auto')
    65.     $FLIR['output'] = $FLIR['bkg_transparent'] ? 'png' : 'gif';
    66.    
    67. // format not supported, fall back to png
    68. if(($FLIR['output'] == 'gif' && !function_exists('imagegif')) || ($FLIR['output'] == 'jpg' && !function_exists('imagejpeg')))
    69.     $FLIR['output'] = 'png';
    70.  
    71. $FLIR['dpi'] = preg_match('#^[0-9]+$#', $FStyle['dpi']) ? $FStyle['dpi'] : 96;
    72. $FLIR['size']     = is_number($FStyle['cSize'], true) ? $FStyle['cSize'] : UNKNOWN_FONT_SIZE; // pixels
    73. $FLIR['size_pts'] = ENABLE_FONTSIZE_BUG ? $FLIR['size'] : get_points($FLIR['dpi'], $FLIR['size']);
    74. $FLIR['maxheight']= is_number($_GET['h']) ? $_GET['h'] : UNKNOWN_FONT_SIZE; // pixels
    75. $FLIR['maxwidth']= is_number($_GET['w']) ? $_GET['w'] : 800; // pixels
    76.  
    77. $font_file = '';
    78. $FStyle['cFont'] = strtolower($FStyle['cFont']);
    79. $FONT_PARENT = false;
    80. if(isset($fonts[$FStyle['cFont']])) {
    81.     $font_file = $fonts[$FStyle['cFont']];
    82.    
    83.     if(is_array($font_file)) {
    84.         $FONT_PARENT = reset($font_file);
    85.         $font_file = match_font_style($font_file);
    86.         $FONT_PARENT = $fonts_dir.(isset($FONT_PARENT['file']) ? $FONT_PARENT['file'] : $font_file);
    87.     }
    88. }elseif(FONT_DISCOVERY) {
    89.     $font_file = discover_font($fonts['default'], $FStyle['cFont']);
    90. }else {
    91.     $font_file = $fonts['default'];
    92. }
    93. $FLIR['font']     = $fonts_dir.$font_file;
    94.  
    95. //die($FStyle['cFont']);
    96.  
    97. if(!is_file($FLIR['font']))
    98.     err('FONT_DOESNT_EXIST');
    99.    
    100. if(in_array(strtolower(pathinfo($FLIR['font'], PATHINFO_EXTENSION)), array('pfb','pfm'))) { // pfm doesn't work
    101.     // You can try uncommenting this line to see what kind of mileage you get.
    102.     err('FONT_PS_UNSUPPORTED'); // PostScript will work as long as you don't set any kind of spacing... unless you are using Windows (PHP bug?).
    103.    
    104.     $FLIR['postscript'] = true;
    105.     $FLIR['ps'] = array('kerning' => 0, 'space' => 0);
    106.     if(false === (@$FLIR['ps']['font'] = imagepsloadfont($FLIR['font'])))
    107.         err('FONT_PS_COULDNT_LOAD');
    108. }
    109.    
    110. $FLIR['color']         = convert_color($FStyle['cColor']);
    111.  
    112. if($FLIR['bkg_transparent']) {
    113.     $FLIR['bkgcolor'] = array('red'         => abs($FLIR['color']['red']-100)
    114.                                     , 'green'     => abs($FLIR['color']['green']-100)
    115.                                     , 'blue'     => abs($FLIR['color']['blue']-100));
    116. }else {
    117.     $FLIR['bkgcolor'] = convert_color($FStyle['cBackground'], false, 'FFFFFF');
    118. }
    119.  
    120. $FLIR['opacity'] = is_number($FStyle['cOpacity'], true) ? $FStyle['cOpacity']*100 : 100;
    121. if($FLIR['opacity'] > 100 || $FLIR['opacity'] < 0)
    122.     $FLIR['opacity'] = 100;    
    123.  
    124. $FLIR['text']     = $_GET['text']!=''?str_replace(array('{amp}nbsp;', '{amp}', '{plus}'), array(' ','&','+'), trim($_GET['text'], "\t\n\r")):'null';
    125.  
    126. $FLIR['cache']     = get_cache_fn(md5(($FLIR['mode']=='wrap'?$FLIR['maxwidth']:'').$FLIR['font'].(print_r($FStyle,true).$FLIR['text'])), $FLIR['output']);
    127.  
    128. $FLIR['text_encoded'] = $FLIR['text'];
    129. $FLIR['text'] = $FLIR['original_text'] = strip_tags(html_entity_decode_utf8($FLIR['text']));
    130.  
    131. $SPACE_BOUNDS = false;
    132. if(is_number($FStyle['cSpacing'], true, false, true)) {
    133.     $SPACE_BOUNDS = bounding_box(' ');
    134.     $spaces = ceil(($FStyle['cSpacing']/$SPACE_BOUNDS['width']));
    135.     if($spaces>0) {
    136.         $FLIR['text'] = space_out($FLIR['text'], $spaces);
    137.         define('SPACING_GAP', $spaces);
    138.     }
    139.    
    140.     if($FLIR['postscript']) {
    141.         $FLIR['ps']['kerning'] = ($FStyle['cSpacing']/$FLIR['size'])*1000;
    142.     }
    143. }
    144.  
    145. if($FLIR['postscript'] && isset($FStyle['space_width'])) {
    146.     $FLIR['ps']['space'] = ($FStyle['space_width']/$FLIR['size'])*1000;
    147. }
    148.  
    149. if(($SPACES_COUNT = substr_count($FLIR['text'], ' ')) == strlen($FLIR['text'])) {
    150.     if(false === $SPACE_BOUNDS)
    151.         $SPACE_BOUNDS = bounding_box(' ');
    152.        
    153.     $FLIR['cache'] = get_cache_fn(md5($FLIR['font'].$FLIR['size'].$SPACES_COUNT));
    154.     $FLIR['mode'] = 'spacer';
    155. }
    156.  
    157. if(file_exists($FLIR['cache']) && !DEBUG) {
    158.     output_file($FLIR['cache']);
    159. }else {    
    160.     verify_gd();
    161.    
    162.     $REAL_HEIGHT_BOUNDS = $FStyle['realFontHeight']=='true' ? bounding_box(HBOUNDS_TEXT, (false !== $FONT_PARENT ? $FONT_PARENT : $FLIR['font'])): false;
    163.    
    164.     switch($FLIR['mode']) {
    165.         default:
    166.             $dir = dir(PLUGIN_DIR);
    167.             $php_mode = strtolower($FLIR['mode'].'.php');
    168.             while(false !== ($entry = $dir->read())) {
    169.                 $p = PLUGIN_DIR.'/'.$entry;
    170.                 if(is_dir($p) || $entry == '.' || $entry == '..') continue;
    171.                
    172.                 if($php_mode == strtolower($entry)) {
    173.                     $dir->close();
    174.                     $PLUGIN_ERROR = false;                    
    175.                    
    176.                     include($p);
    177.                                        
    178.                     if(false !== $PLUGIN_ERROR)
    179.                         break;
    180.                     else
    181.                         break(2);
    182.                 }
    183.             }
    184.             $dir->close();
    185.  
    186.             $bounds = bounding_box($FLIR['text']);
    187.             if($FStyle['realFontHeight']!='true')
    188.                 $REAL_HEIGHT_BOUNDS = $bounds;
    189.  
    190.             if(false === (@$image = imagecreatetruecolor($bounds['width'], $REAL_HEIGHT_BOUNDS['height'])))
    191.                 err('COULD_NOT_CREATE');
    192.                
    193.             gd_alpha();
    194.             imagefilledrectangle($image, 0, 0, imagesx($image), imagesy($image), gd_bkg());
    195.             render_text($bounds);
    196.             break;
    197.         case 'wrap':
    198.             if(!is_number($FStyle['cLine'], true))
    199.                 $FStyle['cLine'] = 1.0;
    200.  
    201.             $bounds = bounding_box($FLIR['text']);
    202.             if($FStyle['realFontHeight']!='true')
    203.                 $REAL_HEIGHT_BOUNDS = $bounds;
    204.    
    205.             // if mode is wrap, check to see if text needs to be wrapped, otherwise let continue to progressive
    206.             if($bounds['width'] > $FLIR['maxwidth']) {
    207.                 $image = imagettftextbox($FLIR['size_pts'], 0, 0, 0, $FLIR['color'], $FLIR['font'], $FLIR['text'], $FLIR['maxwidth'], strtolower($FStyle['cAlign']), $FStyle['cLine']);
    208.                 break;
    209.             }else {
    210.                 if(false === (@$image = imagecreatetruecolor($bounds['width'], $REAL_HEIGHT_BOUNDS['height'])))
    211.                     err('COULD_NOT_CREATE');
    212.  
    213.                 gd_alpha();
    214.                 imagefilledrectangle($image, 0, 0, imagesx($image), imagesy($image), gd_bkg());
    215.                 render_text($bounds);
    216.             }
    217.             break;
    218.         case 'progressive':
    219.             $bounds = bounding_box($FLIR['text']);
    220.             if($FStyle['realFontHeight']!='true')
    221.                 $REAL_HEIGHT_BOUNDS = $bounds;
    222.            
    223.             $offset_left = 0;
    224.            
    225.             $nsize=$FLIR['size_pts'];
    226.             while(($REAL_HEIGHT_BOUNDS['height'] > $FLIR['maxheight'] || $bounds['width'] > $FLIR['maxwidth']) && $nsize > 2) {
    227.                 $nsize-=0.5;
    228.                 $bounds = bounding_box($FLIR['text'], NULL, $nsize);
    229.                 $REAL_HEIGHT_BOUNDS = $FStyle['realFontHeight']=='true' ? bounding_box(HBOUNDS_TEXT, NULL, $nsize) : $bounds;
    230.             }
    231.             $FLIR['size_pts'] = $nsize;
    232.    
    233.             if(false === (@$image = imagecreatetruecolor($bounds['width'], $REAL_HEIGHT_BOUNDS['height'])))
    234.                 err('COULD_NOT_CREATE');
    235.  
    236.             gd_alpha();
    237.             imagefilledrectangle($image, $offset_left, 0, imagesx($image), imagesy($image), gd_bkg());
    238.            
    239.             imagettftext($image, $FLIR['size_pts'], 0, $bounds['xOffset'], $REAL_HEIGHT_BOUNDS['yOffset'], gd_color(), $FLIR['font'], $FLIR['text']);
    240.             render_text($bounds);
    241.             break;
    242.            
    243.         case 'spacer':
    244.             if(false === (@$image = imagecreatetruecolor(($SPACE_BOUNDS['width']*$SPACES_COUNT), 1)))
    245.                 err('COULD_NOT_CREATE');
    246.  
    247.             imagesavealpha($image, true);
    248.             imagealphablending($image, false);
    249.    
    250.             imagefilledrectangle($image, 0, 0, imagesx($image), imagesy($image), gd_bkg());
    251.             break;
    252.     }
    253.  
    254.     if($FLIR['postscript'])
    255.         imagepsfreefont($FLIR['ps']['font']);
    256.  
    257.     if(false !== $image) {
    258.         switch($FLIR['output']) {
    259.             default:
    260.             case 'png':
    261.                 imagepng($image, $FLIR['cache']);
    262.                 break;
    263.             case 'gif':
    264.                 imagegif($image, $FLIR['cache']);
    265.                 break;
    266.             case 'jpg':
    267.                 $qual = is_number($FStyle['quality']) ? $FStyle['quality'] : 90;
    268.                 imagejpeg($image, $FLIR['cache'], $qual);
    269.                 break;
    270.         }
    271.         imagedestroy($image);
    272.     }
    273.  
    274.     output_file($FLIR['cache']);    
    275. } // if(file_exists($FLIR['cache'])) {
    276.  
    277.  
    278. if(CACHE_CLEANUP_FREQ != -1 && rand(1, CACHE_CLEANUP_FREQ) == 1)
    279.     @cleanup_cache();
    280. ?>
    281.  
    flir.php
    PHP:
    1.  
    2. /*
    3. Facelift Image Replacement v1.2
    4. Facelift was written and is maintained by Cory Mawhorter.  
    5. It is available from http://facelift.mawhorter.net/
    6.  
    7. ===
    8.  
    9. This file is part of Facelife Image Replacement ("FLIR").
    10.  
    11. FLIR is free software: you can redistribute it and/or modify
    12. it under the terms of the GNU General Public License as published by
    13. the Free Software Foundation, either version 3 of the License, or
    14. (at your option) any later version.
    15.  
    16. FLIR is distributed in the hope that it will be useful,
    17. but WITHOUT ANY WARRANTY; without even the implied warranty of
    18. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    19. GNU General Public License for more details.
    20.  
    21. You should have received a copy of the GNU General Public License
    22. along with Facelift Image Replacement.  If not, see <http://www.gnu.org/licenses/>.
    23. */
    24.  
    25. var FLIR = {
    26.      version: '1.2.2'
    27.    
    28.     ,options: {
    29.          path: ''
    30.         ,classnameIgnore: false
    31.         ,findEmbededFonts: false
    32.         ,ignoredElements: 'BR,HR,IMG,INPUT,SELECT'
    33.     }
    34.    
    35.     ,onreplacing: null
    36.     ,onreplaced: null
    37.     ,onreplacingchild: null
    38.     ,onreplacedchild: null
    39.    
    40.     ,flirElements: {}
    41.     ,flirPlugins: []
    42.    
    43.     ,isCraptastic: true
    44.     ,isIE: true
    45.  
    46.     ,defaultStyle: null
    47.     ,classStyles: {}
    48.        
    49.     ,embededFonts: {}
    50.  
    51.     ,dpi: 96
    52.    
    53.     // either (options Object, fstyle FLIRStyle Object) or (fstyle FLIRStyle Object)
    54.     ,init: function(options, fstyle) { // or options for flir style
    55.         if(this.isFStyle(options)) { // (fstyle FLIRStyle Object)
    56.             this.defaultStyle = options;
    57.         }else { // [options Object, fstyle FLIRStyle Object]
    58.             if(typeof options != 'undefined')
    59.                 this.loadOptions(options);
    60.        
    61.             if(typeof fstyle == 'undefined') {
    62.                 this.defaultStyle = new FLIRStyle();
    63.             }else {
    64.                 if(this.isFStyle(fstyle))
    65.                     this.defaultStyle = fstyle;
    66.                 else
    67.                     this.defaultStyle = new FLIRStyle(fstyle);
    68.             }
    69.         }
    70.  
    71.         this.calcDPI();
    72.                        
    73.         if(this.options.findEmbededFonts)
    74.             this.discoverEmbededFonts();
    75.  
    76.         this.isIE = (navigator.userAgent.toLowerCase().indexOf('msie')>-1 && navigator.userAgent.toLowerCase().indexOf('opera')<0);
    77.         this.isCraptastic = (typeof document.body.style.maxHeight=='undefined');
    78.  
    79.         if(this.isIE) {
    80.             this.flirIERepObj = [];
    81.             this.flirIEHovEls = [];
    82.             this.flirIEHovStyles = [];    
    83.         }
    84.  
    85.         FLIR._call_plugin('init', arguments);
    86.     }
    87.    
    88.     ,loadOptions: function(options) {
    89.         for(var i in options)
    90.             this.options[i] = options[i];
    91.     }    
    92.    
    93.     ,installPlugin: function(plugin) {
    94.         this.flirPlugins.push(plugin);
    95.     }
    96.    
    97.     ,_call_plugin: function(func, call) {
    98.         var ret = call;
    99.         for(var i=0; i<this.flirPlugins.length; i++) {
    100.             if(typeof this.flirPlugins[i][func] == 'function') {
    101.                 var pluginret = this.flirPlugins[i][func](ret);
    102.  
    103.                 if(typeof pluginret == 'undefined') {
    104.                     continue;
    105.                 }
    106.                 if(typeof pluginret == 'boolean' && pluginret == false) {
    107.                     return false;
    108.                 }
    109.                 if(typeof pluginret != 'boolean') // passes changes on
    110.                     ret = call;
    111.  
    112.             }
    113.         }
    114.        
    115.         var ret = typeof ret != 'object' ? [ret] : ret;
    116.         if(ret.length && ret[0] && ret[0].callee)
    117.             return ret[0];
    118.         else
    119.             return ret;
    120.     }
    121.    
    122.     ,auto: function(els) {
    123.         if(!(args = FLIR._call_plugin('auto', arguments))) return;
    124.         els = args[0];
    125.        
    126.         var tags = typeof els=='undefined'?['h1','h2','h3','h4','h5']:(els.indexOf && els.indexOf(',')>-1?els.split(','):els);
    127.         var elements;
    128.         for(var i=0; i<tags.length; i++) {
    129.             elements = this.getElements(tags[i]);            
    130.  
    131.             if(elements.length>0)
    132.                 this.replace(elements);
    133.         }
    134.     }
    135.    
    136.    
    137.     ,hover: function(e) {
    138.         var o=FLIR.evsrc(e);
    139.         var targ=o;
    140.         var targDescHover = o.flirHasHover;
    141.         var hoverTree = o;
    142.        
    143.         var on = (e.type == 'mouseover');
    144.        
    145.         while(o != document.body && !o.flirMainObj) {
    146.             o = FLIR.getParentNode(o);
    147.            
    148.             if(!targDescHover) {
    149.                     targDescHover = o.flirHasHover;
    150.                     hoverTree = o;
    151.             }
    152.         }
    153.        
    154.         if(o==document.body) return;
    155.        
    156.         var FStyle = FLIR.getFStyle(o);
    157.         if(on && FStyle != FStyle.hoverStyle)
    158.             FStyle = FStyle.hoverStyle;
    159.            
    160.         if(!(args = FLIR._call_plugin('hover', [ on, targ, o, hoverTree ]))) return;
    161.         on                = args[0];
    162.         targ             = args[1];
    163.         o                 = args[2];
    164.         hoverTree     = args[3];
    165.        
    166.         var objs = FLIR.getChildren(hoverTree);
    167.         if(objs.length == 0 || (objs.length == 1 && (objs[0].flirImage || objs[0].flirHasHover))) {
    168.             objs = [hoverTree];
    169.         }else if(objs.length == 1 && !FLIR.isIgnoredElement(objs[0])) {
    170.             var subobjs = FLIR.getChildren(objs[0]);
    171.             if(subobjs.length > 0)
    172.                 if((subobjs.length==1 && !subobjs[0].flirImage) || subobjs.length > 1)
    173.                     objs = subobjs;
    174.         }
    175.  
    176.         var rep_obj;
    177.         for(var i=0; i < objs.length; i++) {
    178.             rep_obj = objs[i];
    179.             if(rep_obj.nodeName == 'IMG') continue;
    180.             if(!rep_obj.innerHTML) continue; // IE
    181.  
    182.             if(FLIR.isIE) {
    183.                 var idx = FLIR.flirIEHovEls.length;
    184.                 FLIR.flirIERepObj[idx] = rep_obj;
    185.                 FLIR.flirIEHovStyles[idx] = FStyle;
    186.                
    187.                 if(!FLIR.isCraptastic) {
    188.                     if(FStyle.useBackgroundMethod && FLIR.getStyle(rep_obj, 'display') == 'block') {
    189.                         FLIR.flirIEHovEls[idx] = rep_obj;
    190.                         setTimeout('FLIR.flirIERepObj['+idx+'].style.background = "url("+('+on+' ? FLIR.flirIEHovStyles['+idx+'].generateURL(FLIR.flirIERepObj['+idx+']) : FLIR.flirIERepObj['+idx+'].flirOrig)+") no-repeat";', 0);
    191.                     }else {
    192.                         FLIR.flirIEHovEls[idx] = rep_obj.flirImage ? rep_obj : FLIR.getChildren(rep_obj)[0];
    193.                         if(!FLIR.flirIEHovEls[idx].flirOrigWidth) {
    194.                             FLIR.flirIEHovEls[idx].flirOrigWidth = FLIR.flirIEHovEls[idx].width;
    195.                             FLIR.flirIEHovEls[idx].flirOrigHeight = FLIR.flirIEHovEls[idx].height;
    196.                         }
    197.                         var ie_js = 'FLIR.flirIEHovEls['+idx+'].src = '+on+' ? FLIR.flirIEHovStyles['+idx+'].generateURL(FLIR.flirIERepObj['+idx+'], FLIR.flirIEHovEls['+idx+'].alt) : FLIR.flirIERepObj['+idx+'].flirOrig;'
    198.                         ie_js += 'FLIR.flirIEHovEls['+idx+'].onload = function() { ';
    199.                         if(on && !FLIR.flirIEHovEls[idx].flirHoverWidth) {
    200.                             ie_js += '        FLIR.flirIEHovEls['+idx+'].flirHoverWidth = this.width; ';
    201.                             ie_js += '        FLIR.flirIEHovEls['+idx+'].flirHoverHeight = this.height; ';
    202.                         }
    203.                         ie_js += '    this.style.width = FLIR.flirIEHovEls['+idx+'].'+(on?'flirHoverWidth':'flirOrigWidth')+'+"px"; ';
    204.                         ie_js += '    this.style.height = FLIR.flirIEHovEls['+idx+'].'+(on?'flirHoverHeight':'flirOrigHeight')+'+"px"; ';
    205.                         ie_js += '}; ';
    206.                         setTimeout(ie_js, 0);
    207.                     }
    208.                 }else {
    209.                     FLIR.flirIEHovEls[idx] = rep_obj.flirImage ? rep_obj : FLIR.getChildren(rep_obj)[0];
    210.                     setTimeout('  FLIR.flirIEHovEls['+idx+'].style.filter = \'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="\'+FLIR.flirIEHovStyles['+idx+'].generateURL(FLIR.flirIERepObj['+idx+'], FLIR.flirIEHovEls['+idx+'].alt)+\'", sizingMethod="image")\';  ', 0);
    211.                 }
    212.             }else {
    213.                 if(FStyle.useBackgroundMethod && FLIR.getStyle(rep_obj, 'display') == 'block') {
    214.                     var hovURL = rep_obj.flirHoverURL ? rep_obj.flirHoverURL : FStyle.generateURL(rep_obj);
    215.                     rep_obj.style.background='url('+(on?hovURL:rep_obj.flirOrig)+') no-repeat';
    216.                 }else {
    217.                     var img = rep_obj.flirImage ? rep_obj : FLIR.getChildren(rep_obj)[0];
    218.                     var hovURL = rep_obj.flirHoverURL ? rep_obj.flirHoverURL : FStyle.generateURL(rep_obj, img.alt);
    219.                     img.src = on?hovURL:rep_obj.flirOrig;
    220.                 }
    221.             }
    222.         }
    223.     }
    224.  
    225.     ,addHover: function(obj) {
    226.         if(!(args = FLIR._call_plugin('addHover', arguments))) return;
    227.         obj    = args[0];
    228.        
    229.         obj.flirHasHover = true;
    230.        
    231.         if(obj.addEventListener) {
    232.             obj.addEventListener( 'mouseover', FLIR.hover, false );
    233.             obj.addEventListener( 'mouseout', FLIR.hover, false );
    234.         }else if (obj.attachEvent) {
    235.             obj.attachEvent( 'onmouseover', function() { FLIR.hover( window.event ); } );
    236.             obj.attachEvent( 'onmouseout', function() { FLIR.hover( window.event ); } );
    237.         }
    238.     }
    239.    
    240.     ,prepare: function(n) {
    241.         if(!(args = FLIR._call_plugin('prepare', arguments))) return;
    242.         n = args[0];
    243.        
    244.         if(n && n.hasChildNodes() && n.childNodes.length > 1) {
    245.             for(var i in n.childNodes) {
    246.                 var node = n.childNodes[i];
    247.                 if(node && node.nodeType == 3) {
    248.                     var span = document.createElement('SPAN');
    249.                     span.style.margin = span.style.padding = span.style.border = '0px';
    250.                     span.className = 'flir-span';
    251.                           span.flirSpan = true;
    252.                     var txt = node.nodeValue.replace(/[\t\n\r]/g, ' ').replace(/\s\s+/g, ' ');
    253.                     span.innerHTML = !FLIR.isIE ? txt : node.nodeValue.replace(/^\s+|\s+$/g,'&nbsp;');
    254.                     n.replaceChild(span, node);
    255.                 }
    256.             }
    257.         }
    258.     }
    259.    
    260.     ,replace: function(o, FStyle) {
    261.         if(!(args = FLIR._call_plugin('replace', arguments))) return;
    262.         o         = args[0];
    263.         FStyle     = args[1];
    264.  
    265.         if (!o || o.flirReplaced)
    266.             return;
    267.        
    268.         if(!this.isFStyle(FStyle))
    269.             FStyle = this.getFStyle(o);
    270.  
    271.         if(typeof o == 'string')
    272.             o = this.getElements(o);
    273.        
    274.         if(typeof o.length != 'undefined') {
    275.             if(o.length == 0) return;
    276.  
    277.             for(var i=0; i< o.length; i++)
    278.                 this.replace(o[i], FStyle);
    279.            
    280.             return;
    281.         }
    282.  
    283.         if(typeof FLIR.onreplacing == 'function') o = FLIR.onreplacing(o, FStyle);
    284.        
    285.         o.flirMainObj = true;
    286.         this.setFStyle(o, FStyle);
    287.         this.saveObject(o);
    288.        
    289.         if(this.options.findEmbededFonts && typeof this.embededFonts[FStyle.getFont(o)] != 'undefined')
    290.             return;
    291.        
    292.         FLIR.prepare(o);        
    293.         this._replace_tree(o, FStyle);
    294.  
    295.         if(typeof FLIR.onreplaced == 'function') FLIR.onreplaced(o, FStyle);
    296.     }
    297.    
    298.     ,_replace_tree: function(o, FStyle) {
    299.         if(typeof __flir_replacetree_recurse == 'undefined') __flir_replacetree_recurse = 1;
    300.         else __flir_replacetree_recurse++;
    301.        
    302.         if(__flir_replacetree_recurse>1000) {
    303.             console.error('Facelift: Too much recursion.');
    304.             return;
    305.         }
    306.        
    307.         var objs = !o.hasChildNodes() || (o.hasChildNodes() && o.childNodes.length==1 && o.childNodes[0].nodeType==3) ? [o] : o.childNodes;
    308.  
    309.         var rep_obj;
    310.         for(var i=0; i < objs.length; i++) {
    311.             rep_obj = objs[i];
    312.             if(typeof FLIR.onreplacingchild == 'function') rep_obj = FLIR.onreplacingchild(rep_obj, FStyle);
    313.  
    314.             if(!rep_obj.innerHTML || rep_obj.nodeType != 1) continue;
    315.             if(FLIR.isIgnoredElement(rep_obj)) continue;
    316.             if(rep_obj.flirReplaced) continue;
    317.  
    318.             if(rep_obj.nodeName == 'A' && !rep_obj.flirHasHover)
    319.                 FLIR.addHover(rep_obj);
    320.  
    321.             if(rep_obj.hasChildNodes() && (rep_obj.childNodes.length > 1 || rep_obj.childNodes[0].nodeType != 3)) {
    322.                 FLIR.prepare(rep_obj);
    323.                 FLIR._replace_tree(rep_obj, FStyle);
    324.                 continue;
    325.             }
    326.  
    327.             if(rep_obj.innerHTML == '') continue; // skip empty tags, if they exist
    328.            
    329.             if(!FLIR.isCraptastic)
    330.                 if(FStyle.useBackgroundMethod)
    331.                     FLIR.replaceMethodBackground(rep_obj, FStyle);
    332.                 else
    333.                     FLIR.replaceMethodOverlay(rep_obj, FStyle);
    334.             else
    335.                 FLIR.replaceMethodCraptastic(rep_obj, FStyle);
    336.  
    337.             rep_obj.className += ' flir-replaced';
    338.             rep_obj.flirReplaced = true;
    339.            
    340.             if(typeof FLIR.onreplacedchild == 'function') FLIR.onreplacedchild(o, FStyle);
    341.         }
    342.     }
    343.    
    344.     ,replaceMethodBackground: function(o, FStyle) {
    345.         if(!(args = FLIR._call_plugin('replaceMethodBackground', arguments))) return;
    346.         o         = args[0];
    347.         FStyle     = args[1];
    348.  
    349.         var oid = this.saveObject(o);
    350.         var url = FStyle.generateURL(o);
    351.        
    352.         if(FLIR.getStyle(o, 'display') != 'block')
    353.             o.style.display='block';
    354.        
    355.         var tmp = new Image();
    356.         tmp.onload = function() {
    357.             FLIR.flirElements[oid].style.width=this.width+'px';
    358.             FLIR.flirElements[oid].style.height=this.height+'px';
    359.            
    360.             if(FStyle != FStyle.hoverStyle) {
    361.                 var h_img = new Image();
    362.                 o.flirHoverURL = h_img.src = FStyle.hoverStyle.generateURL(o);
    363.             }
    364.         };
    365.         tmp.src = url;
    366.        
    367.         o.style.background = 'url("'+url.replace(/ /g, '%20')+'") no-repeat';
    368.         o.flirOrig = url;
    369.        
    370.         o.oldTextIndent = o.style.textIndent;
    371.         o.style.textIndent='-9999px';
    372.     }
    373.  
    374.     ,replaceMethodOverlay: function(o, FStyle) {
    375.         if(!(args = FLIR._call_plugin('replaceMethodOverlay', arguments))) return;
    376.         o         = args[0];
    377.         FStyle     = args[1];
    378.  
    379.         var oid = this.saveObject(o);
    380.         var img = document.createElement('IMG');
    381.         img.alt = this.sanitizeHTML(o.innerHTML);
    382.  
    383.         if(FStyle != FStyle.hoverStyle) {
    384.             img.onload = function() {
    385.                     var h_img = new Image();
    386.                     o.flirHoverURL = h_img.src = FStyle.hoverStyle.generateURL(o, img.alt);
    387.             };
    388.         }
    389.        
    390.         if(img.onerror) {
    391.             img.onerror = function() {
    392.                 var span = document.createElement('SPAN');
    393.                 span.innerHTML = img.alt;
    394.                 try {
    395.                     o.replaceChild(span,img)
    396.                 }catch(err) { }
    397.             };
    398.         }
    399.  
    400.         img.flirImage = true;
    401.         img.className = 'flir-image';
    402.         img.src = FStyle.generateURL(o);
    403.         img.style.border='none';
    404.         o.flirOrig = img.src;
    405.         o.innerHTML='';
    406.         o.appendChild(img);
    407.     }
    408.  
    409.     ,replaceMethodCraptastic: function(o, FStyle) {
    410.         if(!(args = FLIR._call_plugin('replaceMethodCraptastic', arguments))) return;
    411.         o         = args[0];
    412.         FStyle     = args[1];
    413.  
    414.         var oid = this.saveObject(o);
    415.         var url = FStyle.generateURL(o);
    416.        
    417.         var img = document.createElement('IMG');
    418.         img.alt = this.sanitizeHTML(o.innerHTML);        
    419.         if(FStyle != FStyle.hoverStyle) {
    420.             img.onload = function() {
    421.                     var h_img = new Image();
    422.                     o.flirHoverURL = h_img.src = FStyle.hoverStyle.generateURL(o, img.alt);
    423.             };
    424.         }
    425.  
    426.         img.flirImage = true;
    427.         img.className = 'flir-image';
    428.         img.src = this.options.path+'spacer.png';
    429.         img.style.width=o.offsetWidth+'px';
    430.         img.style.height=o.offsetHeight+'px';
    431.         img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+url+'", sizingMethod="image")';
    432.  
    433.         o.flirOrig = url;
    434.         o.innerHTML='';
    435.         o.appendChild(img);
    436.     }
    437.  
    438.     ,saveObject: function(o) {
    439.         if(typeof o.flirId == 'undefined') {
    440.             o.flirId = this.getUID();
    441.             this.flirElements[o.flirId] = o;
    442.         }
    443.        
    444.         return o.flirId;
    445.     }
    446.    
    447.     ,getUID: function() {
    448.         var prefix='flir-';
    449.         var id=prefix+Math.random().toString().split('.')[1];
    450.         var i=0;
    451.         while(typeof this.flirElements[id] != 'undefined') {
    452.             if(i>100000) {
    453.                 console.error('Facelift: Unable to generate unique id.');    
    454.             }
    455.             id=prefix+Math.random().toString().split('.')[1];
    456.             i++;
    457.         }
    458.        
    459.         return id;
    460.     }
    461.    
    462.     ,getElements: function(tag) {
    463.         if(!(args = FLIR._call_plugin('getElements', arguments))) return;
    464.         switch(args.length) {
    465.             case 1:
    466.                 tag = args[0];
    467.                 break;
    468.             case 2: // plugin returned list of elements
    469.                 return args[0];
    470.                 break;
    471.         }
    472.        
    473.         var found = [];
    474.  
    475.         if(document.querySelectorAll) {
    476.             var qsa = false;
    477.             try{
    478.                 found = document.querySelectorAll(tag);
    479.                 qsa = true;
    480.             }catch(err){ qsa=false; }
    481.  
    482.             if(qsa)
    483.                 return found;
    484.         }
    485.  
    486.         var objs,subels,cn,childs,tag,el,matches,subel,rep_el;
    487.    
    488.         el = tag;
    489.        
    490.         subel=false;
    491.         if(el.indexOf(' ')>-1) {
    492.             var parts = el.split(' ');
    493.             el = parts[0];
    494.             subel = parts[1];
    495.         }else if(el[0] == '#') {
    496.             return document.getElementById(el.substr(1));
    497.         }
    498.        
    499.         var grain_id=false;
    500.         if(el.indexOf('#') > -1) {
    501.             grain_id = el.split('#')[1];
    502.             tag = el.split('#')[0];
    503.         }
    504.  
    505.         var grain_cn=false;
    506.         if(el.indexOf('.') > -1) {
    507.             grain_cn = el.split('.')[1];
    508.             tag = el.split('.')[0];
    509.         }
    510.  
    511.         objs = document.getElementsByTagName(tag);
    512.         for(var p=0; p<objs.length; p++) {
    513.             if(objs[p].nodeType != 1) continue;
    514.             matches = false;
    515.             cn = objs[p].className?objs[p].className:'';
    516.            
    517.             if(grain_id && objs[p].id && objs[p].id == grain_id)
    518.                 matches=true;
    519.             if(grain_cn && FLIR.hasClass(objs[p], grain_cn))
    520.                 matches=true;
    521.             if(!grain_id && !grain_cn)
    522.                 matches=true;
    523.            
    524.             if(!matches) continue;
    525.             if(this.options.classnameIgnore && cn.indexOf(this.options.classnameIgnore)>-1) continue;
    526.            
    527.             subels = false != subel ? objs[p].getElementsByTagName(subel) : [objs[p]];
    528.             for(var pp=0; pp<subels.length; pp++) {
    529.                 rep_el = subels[pp];
    530.                 if(this.options.classnameIgnore && rep_el.className && rep_el.className.indexOf(this.options.classnameIgnore)>-1) continue;
    531.  
    532.                 found.push(rep_el);
    533.             }
    534.         }
    535.        
    536.         return found;
    537.     }
    538.    
    539.     ,discoverEmbededFonts: function() {
    540.         this.embededFonts = {};
    541.         for(var i in document.styleSheets) {
    542.             if(!document.styleSheets[i].cssRules) continue;
    543.             for(var ii in document.styleSheets[i].cssRules) {
    544.                 if(!document.styleSheets[0].cssRules[ii]) continue;
    545.                 var node = document.styleSheets[0].cssRules[ii];
    546.                
    547.                 if(node.type && node.type == node.FONT_FACE_RULE) {
    548.                     var nodesrc = node.style.getPropertyValue('src').match(/url\("?([^"\)]+\.[ot]tf)"?\)/i)[1];
    549.                    var font = node.style.getPropertyValue('font-family');
    550.                    if(font.indexOf(',')) {
    551.                        font = font.split(',')[0];
    552.                    }
    553.                
    554.                    font = font.replace(/['"]/g, '').toLowerCase();
    555.                    
    556.                     if(font!='' && nodesrc != '')
    557.                         this.embededFonts[font] = nodesrc;
    558.                 }
    559.             }
    560.         }    
    561.     }
    562.  
    563.     ,getStyle: function(el,prop) {
    564.         if(el.currentStyle) {
    565.             if(prop.indexOf('-') > -1)
    566.                 prop = prop.split('-')[0]+prop.split('-')[1].substr(0, 1).toUpperCase()+prop.split('-')[1].substr(1);
    567.             var y = el.currentStyle[prop];
    568.         }else if(window.getComputedStyle) {
    569.             var y = document.defaultView.getComputedStyle(el,'').getPropertyValue(prop);
    570.         }
    571.         return y;
    572.     }
    573.        
    574.     ,getChildren: function(n) {
    575.         var children=[];
    576.         if(n && n.hasChildNodes())
    577.             for(var i in n.childNodes)
    578.                 if(n.childNodes[i] && n.childNodes[i].nodeType == 1)
    579.                     children[children.length]=n.childNodes[i];
    580.    
    581.         return children;
    582.     }
    583.    
    584.     ,getParentNode: function(n) {
    585.         var o=n.parentNode;
    586.         while(o != document && o.nodeType != 1)
    587.             o=o.parentNode;
    588.    
    589.         return o;
    590.     }
    591.    
    592.     ,hasClass: function(o, cn) {
    593.         return (o && o.className && o.className.indexOf(cn)>-1);
    594.     }
    595.    
    596.     ,evsrc: function(e) {
    597.         var o;
    598.         if (e.target) o = e.target;
    599.         else if (e.srcElement) o = e.srcElement;
    600.         if (o.nodeType == 3) // defeat Safari bug
    601.             o = o.parentNode;    
    602.            
    603.         return o;
    604.     }
    605.    
    606.     ,calcDPI: function() {
    607.         if(screen.logicalXDPI) {
    608.             var dpi = screen.logicalXDPI;
    609.         }else {
    610.             var id = 'flir-dpi-div-test';
    611.             if(document.getElementById(id)) {
    612.                 var test = document.getElementById(id);
    613.             }else {
    614.                 var test = document.createElement('DIV');
    615.                 test.id = id;
    616.                 test.style.position='absolute';
    617.                 test.style.visibility='hidden';
    618.                 test.style.border=test.style.padding=test.style.margin='0';
    619.                 test.style.left=test.style.top='-1000px';
    620.                 test.style.height=test.style.width='1in';
    621.                 document.body.appendChild(test);
    622.             }
    623.            
    624.             var dpi = test.offsetHeight;
    625.         }
    626.        
    627.         this.dpi = parseInt(dpi);
    628.     }
    629.    
    630.     ,isIgnoredElement: function(el, breakIgnored) { return ((','+this.options.ignoredElements).indexOf(','+el.nodeName)>-1); }
    631.     ,sanitizeHTML: function(html) { return html.replace(/<[^>]+>/g, ''); }
    632.    
    633.     ,getFStyle: function(o, fstyle) {
    634.         var cStyle = this.getClassStyle(o);
    635.         if(this.isFStyle(cStyle))
    636.             fstyle = cStyle;
    637.  
    638.         if(this.isFStyle(fstyle)) {
    639.             return fstyle;
    640.         }else if(this.isFStyle(o.flirStyle)) {
    641.             return o.flirStyle;
    642.         }else {
    643.             return this.defaultStyle;
    644.         }
    645.     }
    646.     ,setFStyle: function(o, FStyle) { o.flirStyle = FStyle; }
    647.     ,isFStyle: function(o) { if(!o) return false; return (o.toString() == '[FLIRStyle Object]'); }
    648.  
    649.     ,addClassStyle: function(classname, FStyle) {
    650.         if(this.isFStyle(FStyle))
    651.             this.classStyles[classname] = FStyle;
    652.     }
    653.     ,getClassStyle: function(o) {
    654.         if(!(args = FLIR._call_plugin('getClassStyle', arguments))) return;
    655.         switch(args.length) {
    656.             case 1:
    657.                 o = args[0];
    658.                 break;
    659.             case 2: // plugin returned a style
    660.                 return args[0];
    661.                 break;
    662.         }
    663.  
    664.         var cn = o.className;
    665.         if(this.classStyles.length == 0 || typeof cn == 'undefined' || cn=='') return false;
    666.        
    667.         var classes = cn.split(' ');
    668.         for(var i in this.classStyles) {
    669.             for(var ii=0; ii<classes.length; ii++) {
    670.                 if(classes[ii]==i) {
    671.                     return this.classStyles[i];
    672.                 }
    673.             }
    674.         }
    675.        
    676.         return false;
    677.     }
    678. };
    679.  
    680. function FLIRStyle(options) {
    681.     this.useBackgroundMethod     = false;
    682.     this.inheritStyle             = true;
    683.     this.useExtendedStyles        = false;
    684.     this.hoverStyle             = (arguments[1] && FLIR.isFStyle(arguments[1])) ? arguments[1] : this;
    685.    
    686.     // options are sent along with the query string
    687.     this.options = {
    688.          mode: '' // none (''), wrap,progressive or name of a plugin
    689.         ,output:'auto' // auto, png, gif, jpg
    690.        
    691.         ,cSize: null
    692.         ,cColor: null
    693.         ,cFont: null // font-family
    694.        
    695.         ,realFontHeight: false
    696.         ,dpi: 96
    697.     };
    698.    
    699.     // supported css properties to internal name
    700.     this.cssStyles = {
    701.          'background-color'    : 'Background'
    702.         ,'color'             : 'Color'
    703.         ,'font-family'        : 'Font'
    704.         ,'font-size'        : 'Size'
    705.         ,'letter-spacing'    : 'Spacing'
    706.         ,'line-height'        : 'Line'
    707.         ,'text-align'        : 'Align'
    708.         ,'text-transform'    : 'Transform'
    709.     };
    710.    
    711.     this.extendedStyles = {
    712.          'font-stretch'        : 'Stretch'
    713.         ,'font-style'        : 'FontStyle'
    714.         ,'font-variant'        : 'Variant'
    715.         ,'font-weight'        : 'Weight'
    716.         ,'opacity'            : 'Opacity'
    717.         ,'text-decoration'    : 'Decoration'
    718.     }
    719.    
    720.     // legacy option support
    721.     for(var i in options) {
    722.         if(i.indexOf('css')==0)
    723.             i = 'c'+i.substr(3);
    724.  
    725.         if(typeof this[i] != 'undefined') {
    726.             this[i] = options[i];
    727.         }else {
    728.             this.options[i] = options[i];
    729.         }
    730.     }
    731.     this.options.dpi = FLIR.dpi;
    732.    
    733.    
    734.     if(this.useExtendedStyles)
    735.         for(var i in this.extendedStyles)
    736.             this.cssStyles[i] = this.extendedStyles[i];
    737.    
    738.     for(var i=0; i<FLIR.flirPlugins.length; i++)
    739.         if(FLIR.flirPlugins[i].FLIRStyleExtend && typeof FLIR.flirPlugins[i].FLIRStyleExtend.init)
    740.             FLIR.flirPlugins[i].FLIRStyleExtend.init.call(this);
    741. }
    742.  
    743. // generate a url based on an object
    744. FLIRStyle.prototype.generateURL = function(o) { // [, text]
    745.     var enc_text = (arguments[1]?arguments[1]:o.innerHTML);
    746.     var transform = this.options.cTransform;
    747.     if(transform==null)
    748.         transform = FLIR.getStyle(o, 'text-transform');
    749.  
    750.     switch(transform) {
    751.         case 'capitalize':
    752.             enc_text = enc_text.replace(/\w+/g, function(w){
    753.                               return w.charAt(0).toUpperCase() + w.substr(1).toLowerCase();
    754.                          });
    755.             break;
    756.         case 'lowercase':
    757.             enc_text = enc_text.toLowerCase();
    758.             break;
    759.         case 'uppercase':
    760.             enc_text = enc_text.toUpperCase().replace(/&[a-z0-9]+;/gi, function(m) { return m.toLowerCase(); }); // keep entities lowercase, numeric don't matter
    761.             break;
    762.     }
    763.  
    764.     enc_text = encodeURIComponent(enc_text.replace(/&/g, '{amp}').replace(/\+/g, '{plus}'));
    765.  
    766.     return FLIR.options.path+'generate.php?text='+enc_text+'&h='+o.offsetHeight+'&w='+o.offsetWidth+'&fstyle='+this.serialize(o);
    767. };
    768.  
    769. // create a custom image on the fly
    770. FLIRStyle.prototype.buildURL = function(text, o, maxwidth, maxheight) {
    771.     var enc_text = encodeURIComponent(text.replace(/&/g, '{amp}').replace(/\+/g, '{plus}'));
    772.     return FLIR.options.path+'generate.php?text='+enc_text+'&h='+(maxheight?maxheight:'200')+'&w='+(maxwidth?maxwidth:'800')+'&fstyle='+(o?this.serialize(o):this.serialize());
    773. };
    774.  
    775. FLIRStyle.prototype.serialize = function(o) {
    776.     var sdata='';
    777.     var options = this.copyObject(this.options);    
    778.    
    779.     if(o && this.inheritStyle) {
    780.         for(var i in this.cssStyles) {
    781.             var name = this.cssStyles[i];
    782.  
    783.             if(this.options['c'+name] == null || name=='Size')
    784.                 this.options['c'+name] = this.get(o, i, name);    
    785.         }
    786.     }
    787.    
    788.     for(var i in this.options) {
    789.         if(this.options[i] == null || typeof this.options[i] == 'undefined' || this.options[i] == 'NaN')
    790.             continue;
    791.         sdata += ',"'+i+'":"'+this.options[i].toString().replace(/"/g, "'")+'"';
    792.    }
    793.  
    794.    sdata = '{'+sdata.substr(1)+'}';
    795.    this.options = options;
    796.  
    797.    return escape(sdata);
    798. };
    799.  
    800. FLIRStyle.prototype.get = function(o, css_property, flirstyle_name) {
    801.    var func = 'get'+flirstyle_name;
    802.    
    803.      while(o.flirSpan && o != document.body)
    804.         o = FLIR.getParentNode(o);
    805.    
    806.    return typeof this[func] == 'function' ? this[func](o) : FLIR.getStyle(o, css_property);
    807. };
    808.  
    809. FLIRStyle.prototype.getFontStyle = function(o) {
    810.    return o.nodeName=='EM' || FLIR.getParentNode(o).nodeName=='EM' ? 'italic' : FLIR.getStyle(o, 'font-style');
    811. };
    812.  
    813. FLIRStyle.prototype.getWeight = function(o) {
    814.    var fontweight = o.nodeName=='STRONG' || FLIR.getParentNode(o).nodeName=='STRONG' ? 'bold' : FLIR.getStyle(o, 'font-weight');
    815.    
    816.    switch(fontweight.toString()) {
    817.        case '100': case '200': case '300': case 'lighter':
    818.            return 'lighter';
    819.        case '400': case 'normal':
    820.            return '';
    821.        case '500': case '600': case '700': case 'bold':
    822.            return 'bold';
    823.        case '800': case '900': case 'bolder':
    824.            return 'bolder';
    825.    }
    826. };
    827.  
    828. FLIRStyle.prototype.getFont = function(o) {
    829.    var font = FLIR.getStyle(o, 'font-family');
    830.    if(font.indexOf(',')) {
    831.        font = font.split(',')[0];
    832.    }
    833.  
    834.    return font.replace(/['"]/g, '').toLowerCase();
    835. };
    836.  
    837. FLIRStyle.prototype.getColor = function(o) {
    838.     var color = FLIR.getStyle(o, 'color');
    839.     if(color.substr(0, 1)=='#')
    840.         color = color.substr(1);
    841.    
    842.     return color.replace(/['"]/g, '').toLowerCase();
    843. };
    844.  
    845. FLIRStyle.prototype.getSize = function(o) {
    846.    if(this.options.cSize!=null && '*/+-'.indexOf(this.options.cSize[0])<0)
    847.        return this.options.cSize;
    848.    
    849.    var raw = FLIR.getStyle(o, 'font-size');
    850.  
    851.    var pix;
    852.    if(raw.indexOf('px') > -1) {
    853.        pix = Math.round(parseFloat(raw));
    854.    }else {
    855.        if(raw.indexOf('pt') > -1) {
    856.            var pts = parseFloat(raw);
    857.            pix = pts/(72/this.options.dpi);
    858.        }else if(raw.indexOf('em') > -1 || raw.indexOf('%') > -1) {
    859.            pix = this.calcFontSize(o);
    860.        }
    861.    }
    862.  
    863.    if(this.options.cSize && '*/+-'.indexOf(this.options.cSize[0])>-1) {
    864.        try {
    865.            pix = this.roundFloat(parseFloat(eval(pix.toString().concat(this.options.cSize))));
    866.        }catch(err) { }
    867.    }
    868.    
    869.    o.flirFontSize = pix;
    870.    
    871.    return pix;
    872. };
    873.  
    874. FLIRStyle.prototype.getSpacing = function(o) {
    875.    var spacing = FLIR.getStyle(o, 'letter-spacing');
    876.    var ret;
    877.    if(spacing != 'normal') {
    878.        if(spacing.indexOf('em') > -1) {
    879.            var fontsize = o.flirFontSize ? o.flirFontSize : this.getSize(o);
    880.            ret = (parseFloat(spacing)*fontsize);
    881.        }else if(spacing.indexOf('px') > -1) {
    882.            ret = parseFloat(spacing);
    883.        }else if(spacing.indexOf('pt') > -1) {
    884.            var pts = parseFloat(spacing);
    885.            ret = pts/(72/this.options.dpi);            
    886.        }
    887.        
    888.        return this.roundFloat(ret);
    889.    }
    890.  
    891.    return '';    
    892. };
    893.  
    894. FLIRStyle.prototype.getLine = function(o) {
    895.    var spacing = FLIR.getStyle(o, 'line-height');
    896.    var val = parseFloat(spacing);
    897.    var fontsize = o.flirFontSize ? o.flirFontSize : this.getSize(o);
    898.    if(spacing.indexOf('em') > -1) {
    899.        ret = (val*fontsize)/fontsize;
    900.    }else if(spacing.indexOf('px') > -1) {
    901.        ret = val/fontsize;
    902.    }else if(spacing.indexOf('pt') > -1) {
    903.        var pts = val;
    904.        ret = (pts/(72/this.options.dpi))/fontsize;
    905.    }else if(spacing.indexOf('%') > -1) {
    906.        return 1.0;    
    907.    }else {
    908.        ret = val;    
    909.    }
    910.    
    911.    return this.roundFloat(ret);
    912. };
    913.  
    914. FLIRStyle.prototype.roundFloat = function(val) {
    915.    return Math.round(val*10000)/10000;
    916. };
    917.  
    918. FLIRStyle.prototype.calcFontSize = function(o) {
    919.    var test = document.createElement('DIV');
    920.    test.style.border = '0';
    921.    test.style.padding = '0';
    922.    test.style.position='absolute';
    923.    test.style.visibility='hidden';
    924.    test.style.left=test.style.top='-1000px';
    925.    test.style.left=test.style.top='10px';
    926.    test.style.lineHeight = '100%';
    927.    test.innerHTML = 'Flir_Test';        
    928.    o.appendChild(test);
    929.    
    930.    var size = test.offsetHeight;
    931.    o.removeChild(test);
    932.  
    933.    return size;
    934. };
    935.  
    936. FLIRStyle.prototype.copyObject = function(obj) {
    937.    var copy = {};
    938.    for(var i in obj) {
    939.        copy[i] = obj[i];    
    940.    }
    941.    
    942.    return copy;
    943. };
    944.  
    945. FLIRStyle.prototype.toString = function() { return '[FLIRStyle Object]'; };
    946.  
    Das ganze Paket gibt es auf http://facelift.mawhorter.net/download/
  16. Sven Mintel

    Sven Mintel Mitglied

    Ich hab das mal probiert, man kann diesen Charset-Problemen aus dem Weg gehen, wenn man Nicht-ASCII-Zeichen wie Umlaute etc. per htmlentities() kodiert.

    Du kannst das also entweder direkt in den Überschriften tun, es sollte aber auch gehen, wenn du dies in der generate.php tust.

    Ersetze dazu in der generate.php, Zeile 125 jenes:
    Code (Text):
    1. $FLIR['text']     = $_GET['text']!=''?str_replace(array('{amp}nbsp;', '{amp}', '{plus}'), array(' ','&','+'), trim($_GET['text'], "\t\n\r")):'null';
    2.  
    hierdurch:
    Code (Text):
    1.  
    2. $FLIR['text']     = $_GET['text']!=''?str_replace(array('{amp}nbsp;', '{amp}', '{plus}'), array(' ','&','+'), trim(htmlentities($_GET['text'],ENT_COMPAT,'utf-8'), "\t\n\r")):'null';
    3.  
    Beachte, dass es dort einen Caching-Mechanismus gibt, es kann also gut sein, dass etwas noch nicht sichtbar funktioniert, weil sich das Bild bereits im Cache befindet.
  17. Fantasmo

    Fantasmo Erfahrenes Mitglied

    Also ich hab das jetzt in generate.php so ausgetauscht.

    Auch den Inhalt im Ordner "Cache" hab ich gelöscht, aber Umlaute bleiben weiterhin falsch (z.B. ä's sind Kasten mit Kreuz drin).

    Und wenn ich in Wordpress in der Überschriftenzeile eben schreibe &auml; dann bleibts trotzdem falsch.
  18. Sven Mintel

    Sven Mintel Mitglied

    Bist du sicher, dass der Font, den du da nutzt, überhaupt die Umlaute beinhaltet?
    Probiere es mal ersatzweise mit einem gebräuchlichem Font wie Arial oder dergleichen....erscheint dort auch ein Kästchen?
  19. Fantasmo

    Fantasmo Erfahrenes Mitglied

    So, jetzt konnte ich es lösen:

    Die Schrift hat schon Umlaute unterstützt, denn ich habe sie auch vorher normal auf meinem Computer getestet.

    Es war eine OTF Schriftart. Jetzt hab ich dieselbe nochmal gesucht als TTF und jetzt geht das mit den Umlauten.

    Hatte ich erst gar nicht drüber nachgedacht, denn alle anderen Buchstaben hats ja durchaus richtig dargestellt.


    Jetzt funktionierts jedenfalls:)
    Vielen Dank für die Hilfe!!

Diese Seite empfehlen