We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 17883
    • 1,039 Posts
    Hi,

    I needed a method for converting text into an image using a TTF font. So I tried it with a plugin. I´m not a coder, just learned a little bit regular expressions yesterday (uff!). So don´t mind if it´s not the best code wink A GD library is needed.

    What it does:

    This plugin converts a text into a graphic using a TTF font. I´ve choosen the <h6>-tag for selection, because it´s unused normally..

    How it works:

    The plugin searches the document output (onPagePrerender) for <h6>-tags. Only "pure" h6-tags will be found, no <h6 class...> and so on. Advantage: You can format any text via editor (format:...). The text between the h6-tags is stored and after that the plugin looks for images that are already created (cached) and replaces the complete tag including the text in it with the call for the image. Additional HTML tags within the h6 tag(like <strong> are deleted. It is also possible to render the text on a background image (see comments in the script)

    If there is no such image (like after the first saving) nothing gets replaced, but the image is created. So just refresh and you should see the image(s).

    Files

    The plugin itself (see below)
    text2image.php (located in assets/plugins/text2image/...)
    a folder "images" (located in assets/plugins/text2image/images...) for the TTF file and the created images

    Known issues

    I´ts possible to create images with special chars (also with german Umlaut), but the call for them doesn´t work properly. They are saved as e.g. "Anmeldung%3A.gif" and are called like that by the script, but this doesn´t work, don´t know why. "Normal" text should work. It is also possible to format the pagetitle with <h6>here the title</h6>, it will also be rendered! But there we come to the next issue... If you´re logged in as administrator the quick edit bar renders in the title, so the plugin doesn´t work. For usual guests of your site it will work though.

    Plugin:

    $path=$modx->config['base_path'].'assets/plugins/text2image/';  //path
    require_once($path.'text2image.php');  // the create image function
    $e = &$modx->Event;
    switch ($e->name) {
    case "OnWebPagePrerender":
    $o = &$modx->documentOutput; // get a reference of the output
    $count_hits = preg_match_all('/\<h6\>(.+)<\/h6\>/',$o,$stored_hits); //look for all h6-tags and store them
    for($i=0;$i<$count_hits;$i++) { 
         $filename = strip_tags($stored_hits[1][$i]); //stript additional tags in the h6-tag (like <strong>)
         $filename = html_entity_decode($filename); //decode entities
         $filename = urlencode($filename); //encode for proper filename (doesn´t work properly yet,or rather the call does´nt work for special chars)
         $filenamefull = $modx->config['site_url'].'assets/plugins/text2image/images/'.$filename.'.gif'; // name and location of the image
         $filepath = $path.'/images/'.$filename.'.gif'; //path to the image
    
         if (file_exists($filepath)) { //is the image already created?
             $o = str_replace($stored_hits[0][$i],'<img src="'.$filenamefull.'" />',$o); //...then show it (doesn´t work properly with special chars yet)
         }
         else { 
             text2image(strip_tags($stored_hits[1][$i]),$filenamefull) ; //...if there is no image: create it
         }
         // $o.= strip_tags($stored_hits[1][$i]).'<br />'.$stored_hits[0][$i].'<br />'.$count_hits.'<br />'.$filenamefull.'<br />'.$filepath.'<br />'.$check.'<br />'; //control output
    }
    
    
    break;
    default :
    return; // stop here.
     break;
    }
    


    text2image.php

    <?php 
    
    function text2image($text,$filenamefull) {
    $text=html_entity_decode($text);                                        //decode entities (otherwise entities will show up in graphic
    $path=$modx->config['base_path'].'assets/plugins/text2image/images/';
    $imgname = $path.'background_image.gif';
    if(file_exists($imgname)) {
    $im = @imagecreatefromgif ($imgname);    				// open background image if exists
    } else                                                                  
    { $im = imagecreate (350, 30);											// ... or create one with the dimensions 350x30
    } 										
    $black = ImageColorAllocate ($im, 255, 255, 255);                       //background color
    $white = ImageColorAllocate ($im, 142, 172, 213);                       // font color
    ImageTTFText ($im, 16, 0, 0, 20, $white, $path.'xfiles.ttf',$text);     // function, size, x, y, antialias, color, path to TTF file, text
    $title= urlencode ($text);                                              //make sensefull filename
    ImageGif ($im,$path.$title.'.gif');                                     //create image and store it
    ImageDestroy ($im); 
    
    ?>
    


    So the structure is like this:

    modX_root/assets/plugins/text2image/

    -text2image.php

    modX_root/assets/plugins/text2image/images/

    -YOURTTF.ttf

    Suggestions welcome, especially the special chars thing...

    PS: See it in action on www.modxcms.de

    PPS: For the System Events in the plugin config set OnParseDocument and OnWebPagePrerender (for the last I´m not sure if it is necessary)
      • 2762
      • 1,198 Posts
      Cool plugin!! Thanks!
        Free MODx Graphic resources and Templates www.tattoocms.it
        -----------------------------------------------------

        MODx IT  www.modx.it
        -----------------------------------------------------

        bubuna.com - Web & Multimedia Design
        • 33337
        • 3,975 Posts
        Nice plugin,

        Thanks for sharing,

        regards,

        zi
          Zaigham R - MODX Professional | Skype | Email | Twitter

          Digging the interwebs for #MODX gems and bringing it to you. modx.link
          • 7455
          • 2,204 Posts
          I use a snippet (originaly made for eto)to do the same but then it makes png and you can control the transparency of the image and background also.

          // ------------------------------------------------------------------------------------------------------------
          //                             Snippet by pemacviper webmedia, www.pemacviper.de
          // ------------------------------------------------------------------------------------------------------------
          //
          // This Snippet makes a PNG-Image out of the dynamic logtitle, pagetitle
          // or description in every textcolor and backgroundcolor you want with or
          // without shadow, with or without transparency.
          // Just insert a new menu, the True Type Font you want and the PNG
          // will be genereated and put into the page where you want it to be.
          //
          // Beware! True Type Fonts like "Times New Roman(R)" underlie Copyrights.
          // Look for some FREE True Type Fonts in the net to be out of the wood.
          // a good place to look is http://www.dafont.com/
          //
          // Configure the data below to make the snippet work.
          //
          // Have fun.
          //
          // This peace of code is free in the terms of the GNU GPL.
          //
          // ------------------------------------------------------------------------------------------------------------
          //                                                      HISTORY
          // ------------------------------------------------------------------------------------------------------------
          //
          // Ver. 1.3 Final - 23/10/2005 - pemacviper
          //	-added shadown function
          //
          // Ver. 1.2 Final - 18/06/2005 - pemacviper
          //	-XHTML-conform output
          //	-corporate-conform Snippetname(Makeimage > MakeImage)
          //
          // Ver. 1.1 Final - 17/05/2005 - Dimmy
          //	some small changes e.g. adding transparancy support
          //
          // Ver. 1.0 Final - 11/05/2005 - pemacviper
          //	authoring
          //
          // ------------------------------------------------------------------------------------------------------------
          
          
          
          // ------------------------------------------------------------------------------------------------------------
          //                                           Start Configuration
          // ------------------------------------------------------------------------------------------------------------
          
          
          // Height and width of the pic
          $height = "222";
          $width = "140";
          
          
          // Color of background in RGB, transparency from 0-127 (127=100%, 0=0%)
          // Alpha transparancy added by Dimmy
          $r1 = "255";
          $g1 = "255";
          $b1 = "255";
          $tr1 = "0";
          
          
          // Color of text in RGB, transparency from 0-127 (127=100%, 0=0%)
          // Alpha transparancy added by Dimmy
          $r2 = "43";
          $g2 = "55";
          $b2 = "140";
          $tr2 = "0";
          
          
          // Color of shadow in RGB, transparency from 0-127 (127=100%, 0=0%)
          // Alpha transparancy added by Dimmy
          $r3 = "200";
          $g3 = "200";
          $b3 = "200";
          $tr3 = "0";
          
          
          // Define her the image-text where "$text1" is the forground-text
          // and "$text2" is the text of the shadown-text.
          // If you don't want a shadow just leave "$text2" blank e.g. "$text2= "";"
          // You can use here all the variables which are supported by Etomite e.g.
          // "Pagetitle" of the site = $etomite->documentObject['pagetitle']
          // "Longtitle" of the site = $etomite->documentObject['longtitle']
          // "Description" of the site = $etomite->documentObject['description']
          $text1 = $etomite->documentObject['pagetitle'];
          $text2 = $etomite->documentObject['pagetitle'];
          
          
          // Define here the name of the generated pic e.g.
          // "Pagetitle" of the site = $etomite->documentObject['pagetitle']
          // "Longtitle" of the site = $etomite->documentObject['longtitle']
          // "Description" of the site = $etomite->documentObject['description']
          $imgname = $etomite->documentObject['pagetitle'];
          
          
          // Path where to save the pic
          $imagepath = "assets/site/makeimage/images";
          
          
          // Path to True Type Font where "$font1" is the font of the foreground-text
          // and "$font2" is the font of the shadown-text.
          $font1 = "/assets/site/makeimage/ttf/arial.ttf";
          $font2 = "/assets/site/makeimage/ttf/arial.ttf";
          
          
          // Define here the font size of the text and the shadow in px where
          // "$fontsize1" is the size of the foreground-text and "$fontsize2"
          // is the size of the shadow-text.
          $fontsize1 = "25";
          $fontsize2 = "25";
          
          
          // Define here the rotation of the text and the shadow in degrees
          // where "$rotate1" is the rotation of the foreground-text and "$rotate2"
          // is the rotation of the shadow-text.
          // "0" means text readable form left to right
          // "90" means text readable from down to up
          // "-90" means text readable from up to down
          // "180" means text readable upsidedown
          $rotate1 = "90";
          $rotate2 = "90";
          
          
          // Define here the distance from 0 on x-axis and y-axis of the text and
          // the shadow in px where "$x1"/"$y1" is the position of the foreground-text
          // and "$x2"/"$y2" is the position of the shadow-text.
          $x1 = "90";
          $y1 = "163";
          $x2 = "120";
          $y2 = "220";
          
          
          // ------------------------------------------------------------------------------------------------------------
          //                                             End of Configuration
          // ------------------------------------------------------------------------------------------------------------
          
          
          // ------------------------------------------------------------------------------------------------------------
          //                                                Start Code
          // ------------------------------------------------------------------------------------------------------------
          
          
          Header ("Content-type: image/png");	// Generates the Header
          $im = imagecreate ($width, $height);	// Creates frame of pic
          $backcolor = ImageColorAllocatealpha ($im, $r1, $g1, $b1, $tr1);	// Creates back-color
          $fontcolor1 = ImageColorAllocatealpha ($im, $r2, $g2, $b2, $tr2);	// Creates shadown-text
          $fontcolor2 = ImageColorAllocatealpha ($im, $r3, $g3, $b3, $tr3);	// Creates foreground-text
          ImageTTFText ($im, $fontsize2, $rotate2, $x2, $y2, $fontcolor2, $font2, $text2);	// Shadowcreation
          ImageTTFText ($im, $fontsize1, $rotate1, $x1, $y1, $fontcolor1, $font1, $text1);	// Textcreation
          ImagePNG ($im, "$imagepath/$imgname.png");	// Output of the pic
          ImageDestroy ($im);	// Clean the cache
          
          return "<img src=\"$imagepath/$imgname.png\" border=\"0\" alt=\"$imgname\" />";	//Output for the Browser
          
          // ------------------------------------------------------------------------------------------------------------
          //                                               End of Code
          // ------------------------------------------------------------------------------------------------------------
          
            follow me on twitter: @dimmy01
            • 21112
            • 156 Posts
            I’m having trouble getting this to run. When I load a page with <h6> on I get the following error:

            Parse error: parse error, unexpected $ in /home/orioscom/public_html/wip/ppps/assets/plugins/text2image/text2image.php on line 19

            I’ve re-uploaded and re-created the php file several times, so I don’t think it’s a corrupt or incomplete upload.

            While I’m here, how would I intergrate this with a DropMenu generated list menu?
              • 21112
              • 156 Posts
              Is anyone able to help with this one please?

              Thanks!
                • 7923
                • 4,213 Posts
                Quote from: neilcreek at Jun 15, 2006, 07:23 PM

                I’m having trouble getting this to run. When I load a page with <h6> on I get the following error:

                Parse error: parse error, unexpected $ in /home/orioscom/public_html/wip/ppps/assets/plugins/text2image/text2image.php on line 19

                I’ve re-uploaded and re-created the php file several times, so I don’t think it’s a corrupt or incomplete upload.

                While I’m here, how would I intergrate this with a DropMenu generated list menu?

                Quote from: neilcreek at Jun 18, 2006, 07:29 PM

                Is anyone able to help with this one please?

                Thanks!


                It seems that the function declaration is missing ending brace.. so Add } before the ?> tag to the text2image.php file.


                  "He can have a lollipop any time he wants to. That's what it means to be a programmer."