Ulyssesonline

the tech surfer

You are here: Home / General / Turning Text Into Graphics

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

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”/>

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';

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

Comments

  1. 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. 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.

  6. 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. 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=” />>

  10. 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. 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 🙂

    • 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.

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

    Thanks,

    Rob

    • 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.