Ulyssesonline

the tech surfer

  • Home
  • About
  • Archives
You are here: Home / General / Turning Text Into Graphics

December 5, 2006

Turning Text Into Graphics

How do you turn text into graphics? Easy. I’m using a small PHP script which converts any text into a graphic image. This article goes through the step-by-step process on how to turn your titles into graphic images in your WordPress Themes or on any HTML page that you like.

All you need is this neat and powerful little file called titles.php created by Patrick Stuart.

1. Before we get started, let’s test the script by cutting and pasting the following URL to your browser.

http://ulyssesonline.com/files/titles.php?letters=Hello World

http://ulyssesonline.com/files/titles.php?letters=Hello World

Awesome, it works. This script passes the text “Hello World” to the titles script via the browser. As you may have noticed, by default, we are using the Boston True Type Font.

2. Now, let’s try the simple PHP script. Download the titles.php and the Boston files and place both files on your web server. Assuming the file is in the root directory, you can call the PHP file using this HTML code:

<img src=”titles.php?letters=Hello Universe”/>

<img src=”titles.php?letters=Hello Universe”/>

3. Cool. How about using other fonts? Well, you can use hundreds of fonts that are freely available at webpublicity.com. Just download the fonts. For simplicity sake, rename the files in small caps without any spaces. Upload the fonts to your directory, then edit the titles.php file to reflect the new font. The sample code shows the Parisian True Type Font is now the default.

$font = './parisian.ttf';

$font = './parisian.ttf';

4. To change font size, text margin, angle, color, background color, shadows, etc. just edit titles.php and change the following variables. Save and refresh the page.

$txt_size = 24;   // Size of Text
$x_margin = 5;   // Set Margin of x of text
$y_margin = 10;   // Set Margin of y of text
$txt_angle = 0;   // Angle of Text
$shdw_angle = 0;   // Angle of Text Shadow
$shdw_x_offset = 1;   // Horizontal Shadow offset
$shdw_y_offset = 1;   // Vertical Shadow offset
$bg_r = 255;   // Background Color Red
$bg_g = 255;   // Background Color Green
$bg_b = 255;   // Background Color Blue
$txt_r = 0;   // Text Color Red
$txt_g = 0;   // Text Color Green
$txt_b = 0;   // Text Color Blue
$shdw_r = 255;   // Text Shadow Color Red
$shdw_g = 255;   // Text Shadow Color Green
$shdw_b = 255;   // Text Shadow Color Blue

$txt_size = 24; // Size of Text $x_margin = 5; // Set Margin of x of text $y_margin = 10; // Set Margin of y of text $txt_angle = 0; // Angle of Text $shdw_angle = 0; // Angle of Text Shadow $shdw_x_offset = 1; // Horizontal Shadow offset $shdw_y_offset = 1; // Vertical Shadow offset $bg_r = 255; // Background Color Red $bg_g = 255; // Background Color Green $bg_b = 255; // Background Color Blue $txt_r = 0; // Text Color Red $txt_g = 0; // Text Color Green $txt_b = 0; // Text Color Blue $shdw_r = 255; // Text Shadow Color Red $shdw_g = 255; // Text Shadow Color Green $shdw_b = 255; // Text Shadow Color Blue

Filed Under: General, WordPress

Comments

  1. Andy Beard says

    December 5, 2006 at 7:11 pm

    What a useful little script. I actually have another use for it

    I am not sure I would use this for the purpose you are using it for, because headings and page titles play such an important part in SEO

  2. Mike says

    December 6, 2006 at 9:09 am

    Thank you.. it’s very generous of you to share that with everyone. If it’s okay with you, I’d like to share this link in the WordPress support forum.

  3. ulyssesr says

    December 6, 2006 at 10:53 am

    No problem, Mike.

  4. the english guy says

    March 9, 2008 at 9:17 am

    Very useful script – thank you!

  5. Michael says

    February 3, 2009 at 12:32 pm

    This is a perfect little script. Thank you. Is it possible to use a background image instead of a color?

    • ulyssesr says

      February 4, 2009 at 10:42 am

      I am sure you can. You need to use PHP GD library functions to create the background image. It’s possible.

  6. Vince says

    May 30, 2009 at 1:36 pm

    I can’t get to work unfortunately, not sure what I’m missing! I’ve uploaded titles.phps (that’s the way it saved, do I change it to titles.php?) and a couple of fonts… I edited the file to reflect the font I want to use. The stylesheet_directory for the font and php files is http://www.domainname.com/wp-content/plugins/

    I’ve replaced the call to title in page.php to <a href=”” rel=”bookmark” title=”Permanent Link to “><img src=”
    /titles.phps?letters=” />

    What am I missing or doing wrong? Thanks for any help you can provide.

  7. Vince says

    May 30, 2009 at 1:39 pm

    Sry it didn’t place the code correctly in this blog… lets try this

    <<a href=”” rel=”bookmark” title=”Permanent Link to “><img src=”
    /titles.php?letters=” />>

  8. Vince says

    May 30, 2009 at 1:56 pm

    nevermind figured it out, sorry!

  9. Paul says

    June 7, 2009 at 2:29 pm

    This is fantastic. Thanks for the help

  10. Laurent says

    July 28, 2009 at 3:13 pm

    Hi,

    This is a very nice script and it works properly 🙂
    First in a long row of script testing that actually works.

    But i’ve got a little problem. The text I wanna show is quite long and I would like to split it over a couple of new lines instead of getting an image of one big long row. Is there a way that this can be done?

    Thx

  11. Laurent says

    July 28, 2009 at 3:15 pm

    For example this url:
    http://www.goedkoop-op-wintersport.be/includes/titles.php?letters=Naast%20de%20r%E9sidences%20in%20de%20wijk%20La%20Falaise%20bieden%20wij%20ook%20appartementen%20in%20de%20andere%20wijken%20in%20Avoriaz.%20Deze%20appartementen%20liggen%20verspreid%20over%20de%20gebouwen%20C%E9drat%20en%20Alpages%20I%20en%20II.%20Ter%20plaatse%20verneemt%20u%20in%20welk%20gebouw%20uw%20appartement%20is%20gerese

    The text that it is showing should be splitted over 3 or 4 lines 🙂

    • ulyssesr says

      July 28, 2009 at 3:44 pm

      Laurent, Yes it’s possible. You need to use the URL encoding for ‘new line’ which is %0A. You can try it, but you need to make sure your image is tall enough to display the text. You may need to adjust the height of the image being displayed.

  12. Simone says

    August 31, 2010 at 12:30 am

    Sorry, but the file titles.php is no longer available. Could someone help me?
    Thanks

    • Ulysses says

      August 31, 2010 at 8:19 am

      Simone,

      The link works now. I had a problem with my .htaccess file. Enjoy.

  13. Rob says

    October 19, 2010 at 6:03 am

    Unfortunately, I can’t access the file at th1s point, I get a 404 error. Is it still available?

    Thanks,

    Rob

    • Ulysses says

      October 19, 2010 at 11:07 am

      Hi Rob,

      The file is now available for download. When I re-installed WordPress, the new .htaccess file prevented the file from being seen. It works now.

Copyright © 2003 - 2018