413

Playout Intelligence

Text-To-Font WordPress Plugin

I adjusted the Text-to-Image Wordpress Plugin “TTF Titles” by John Leavitt to include css classes and wrote a quick and dirty Wordpress plugin to use TTF Titles within the “Write Post” text area.

John Leavitt over at Hostscope has an excellent WordPress plugin to convert text to images, “TTFTitles”. Originally it was intended to create images of your special font’ed WordPress post titles, but you can also create images from text on-the-fly with the <?php the_ttftext( … ) ?> function:

I’m in distress!

The Heroin Font

The original plugin had a few drawbacks:

1/
Default settings for fonts were in a dark red, and the shadow was enabled by default.
2/
Images always had the css style ‘ttf’, which was limiting for me, as I needed different kind of css classes.
3/
obviously, you cannot easily enter the function above in the “write post” textarea, as php code will not get interpreted unless you have some extra (and dangerous) plugin installed.

I edited the ttftitles.php file to address 1. & 2. and created a quick and dirty plugin for 3.. You have to rename both files’ extensions to “.php” – ttftitles.php goes into the TTF Titles plugin subdirectory, thinkstorm-ttf.php goes into your plugin root directory. (You will have to activate the newly created “Generate Text To Font” Plugin). Now you can do two things:

1/
The TTF Titles settings page for styles will have a new entry field ‘css_classes’. You can enter several classes separated by a space, just like in html code, for example “ttf aligncenter”, which would then apply both classes “ttf” and “aligncenter” to the <img> tag.
2/
Within the textarea for writing posts, you can enter “¦¦your text goes here¦[style, optional]¦[overrides, optional]¦¦” (without the quotes) to insert the the_ttftext() function. All pipe symbols are mandatory, you cannot ommit any of them. So for selection the default style and just enter some text, you’d have to enter “¦¦some text¦¦¦¦” (without the quotes). Yes, a bit odd, and dirty, but it works as long as you don’t need the pipe symbol.

Hello, World“¦¦Hello, World¦heroin¦font_size=16&css_classes=right¦¦” produces the image shown on the right. There are a few issues with this quick and dirty hack:

You have to enter the pipe symbols in the “HTML” mode of the textarea, the “Visual” tab will not work, as the pipe symbols get encoded. After you entered them, you can switch back into “Visual” mode.
The most common mistake is missing some pipe symbols in the beginning, middle, or end. There are 2 (two) of them at the beginning and end.

Have fun!

Update from 2009-06-21

Michael had a question in comment number 7 regarding centering text in the TTF plugin instead of having it “left-aligned”. In my experience, the width of the TTF images is exactly the length of the text. If you want text to be centered, you would have to enclose it in a <div> or <p> or <h1> tag etc. and then center the enclosed TTF image via CSS. In case your image also has a background color, your enclosure tag needs to have that background color as well. So if you’re using my plugin, this helped:

<p style="text-align:center">¦¦Super Header¦¦¦¦</p>

which would then be rendered as:

Super Header

 

Also: for compatibility reasons with non-image browsers as well as for Search Engine Optimization (SEO) reasons, you should never render important text (like headings) into images and then not set the ALT tag accordingly. An even better solution is something called “StateScoping” of CSS, shown here:

http://alt.skybound.ca/statescope/

In the upper right corner of the main text content there is a link to switch “scopes”, and you can see the difference between the page rendered with images and without. The example is also somewhat SEO safe, even with images switched on, as the text will still be included in the page and just displaced by CSS.I say “somewhat”, because my latest experience is that Google does interpret the CSS placement for otherwise higher ranking sites to avoid tweaking of sites with SEO code that would never be displayed – such as putting “Nokia, N95, Gizmodo, Samsung, LG, G1, iPhone” within an <div> container that is placed off the screen just so to improve the hit rate on these keywords without actually displaying them :).

11 Responses

You can follow the comments for this article with the RSS 2.0 feed.

Great ! Great Job ! I finally have this plug in functionning for me, without any coding ! Thank you very much.
I still have one question, do you know how is it possible to have my post title as a permalink, like this blog here : http://neojaponisme.com or here : http://ilovetypography.com/2008/11/28/the-week-...

thank again keep up the good work !
Christian

1 christian December 28, 2008 10:46 pm

An other problem with the search field : when i want to find the title of one of my post, the result is ok but there is no displaying of title, so you can't click on it to read it ! Annoying…

Thanks again

2 christian December 28, 2008 10:59 pm

I don't know exactly what you mean: do you want the image to link to the permalink? I would suggest to alter your WordPress theme accordingly instead of using the Text-To-Font build-in automatic captions. I'll shoot you an email about it…

3 thinkstorm December 29, 2008 1:38 pm

you will have to edit the search.php template of your theme accordingly – I can help you with it if you want to, just send it to me via email as .txt attachment.

4 thinkstorm December 29, 2008 1:58 pm

I don't know exactly what you mean: do you want the image to link to the permalink? I would suggest to alter your WordPress theme accordingly instead of using the Text-To-Font build-in automatic captions. I'll shoot you an email about it…

5 Thorsten Claus December 29, 2008 6:38 pm

you will have to edit the search.php template of your theme accordingly – I can help you with it if you want to, just send it to me via email as .txt attachment.

6 Thorsten Claus December 29, 2008 6:58 pm

Oh, my, I should have used WordPress SHORTCODES, as described in: http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/

7 Thorsten Claus February 04, 2009 5:48 pm

Вы производите обмен постовыми?

здесь видел ет gamebulletin.ru

8 jashdauts May 24, 2009 3:57 pm

great adjustment to the plugin. i do have one question that maybe you can answer. is there a way to have ttftitles render the text inside of the image as center-aligned instead of left?

9 michael June 19, 2009 4:19 pm

Hi Michael,

[I have to put spaces between the "< ", ">", and the tags so they don't get interpreted or filtered ;))]

Can you give me an example where your TTF plugin renders text “centered”? In my experience, the width of the TTF images is exactly the length of the text. If you want text to be centered, you would have to enclose it in a < div > or < p > or < h1 > tag etc. and then center the enclosed TTF image via CSS. In case your image also has a background color, your enclosure tag needs to have that background color as well. So if you’re using my plugin, this helped:

< h1 style="text-align:center">||Super Header||||< /h1 >

Also: for compatibility reasons with non-image browsers as well as for Search Engine Optimization (SEO) reasons, you should never render important text (like headings) into images and then not set the ALT tag accordingly. An even better solution is something called “StateScoping” of CSS, shown here:

http://alt.skybound.ca/statescope/

In the upper right corner of the main text content there is a link to switch “scopes”, and you can see the difference between the page rendered with images and without. The example is also somewhat SEO safe, even with images switched on, as the text will still be included in the page and just displaced by CSS.I say “somewhat”, because my latest experience is that Google does interpret the CSS placement for otherwise higher ranking sites to avoid tweaking of sites with SEO code that would never be displayed – such as putting “Nokia, N95, Gizmodo, Samsung, LG, G1, iPhone” within an < div > container that is placed off the screen just so to improve the hit rate on these keywords without actually displaying them :).

Cheers,
Thorsten

10 Thorsten Claus June 21, 2009 4:17 pm

thx… great

11 ttf June 08, 2010 12:40 am

Leave a Reply

Required fields are marked with an asterisk (*), you may use these tags in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

blog comments powered by Disqus

Recent Tweets

Archives

Content © Playout Intelligence
Proudly powered by WordPress
Theme designed by Artisan Themes

Entries (RSS)
Comments (RSS)

31 queries.
2.160 seconds.

Creative Commons License
This Playout Intelligence blog post by Thorsten Claus is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors.

Except where stated, all materials contained in this Web site are the copyrighted property of Thinkstorm. Permission is granted to use, copy and distribute these materials as presented in this Web site for personal, non-commercial use only. All copyright and other notices must appear in all copies as they appear in the original. All other uses are prohibited. (please also see these two articles about “All Rights Reserved” and general copyright law, with some focus on the US).

This site contains links to other sites that are not owned or maintained by Thinkstorm. These links are provided for your convenience. Thinkstorm makes no warranties about the contents of or products and services offered by such sites.

Thinkstorm shall not be liable for any injury, claim or damage whether direct or indirect which arises out of the use of this site or its contents or the inability to use this site. Thinkstorm shall not be liable for any injury, claim or damage whether direct or indirect which arises from the unauthorized access to or alteration of your transmission unless it results from the gross negligence or intentional actions of Thinkstorm.