Have you ever though, "Man oh man, I wish I could make my text look a lot better." If so, then this tutorial is for you! How would you like all your text to come up completely different? Actually come up as predesigned graphics instead of the text you entered. This is how.

First you need a graphic library, the one I made is simple and was made in photoshop. I didnt take a whole lot of time making the letters so some arnt centered properly. The library I made up looks like this, but is not limited to:

A =
B =
C =
D =
E =
F =
G =
H =
I =
J =
K =
L =
M =
N =
O =
P =
Q =
R =
S =
T =
U =
V =
W =
X =
Y =
Z =
! =
. =

Below type any letters you see above and click submit. The CF code will replace the letters with letter graphics.

Lets see exactly whats going on in the window above. Here is the code (I have commented the code to explain what is going on here):
<!--- We are defining #FORM.title# --->
<cfparam name=
"FORM.title" default=""
<!--- A simple form to submit the text to be processed --->
<form name=
"cool" method="post" action="word.cfm">
<textarea name="title" cols="70" rows="8" id="title"></textarea>
<input type="submit" name="Submit" value="Submit">

<!--- If the form has been filled out then process the following code --->
#FORM.title# NEQ "">
<!--- Tell ColdFusion that instead of typing #FORM.title#, we can use #title# instead --->
<cfset title = #FORM.title#>
<!--- We are just showing how many charcters were submited in the form, this is for show --->
Length of String:
Graphic Version:
<!--- #number# has to atleast be defined once before being called and #word3# as well --->
<cfset number = 0>
<cfset word3 = "">
<!--- We want to run this code as many times as there are letters. #len(title)# is how many characters were submited --->
<cfloop from="1" to="#len(title)#" index="i">
<!--- Make #number# increment by 1 during each loop --->
<cfset number = #val(number + 1)#>
<!--- We are grabbing each letter one by one for processing, increments by one from #number# --->
<cfset word2 = mid(title,number,1)>
<!--- If the letter being processed is not a period, a space, or the enter key then process the following code -->
<cfif #word2# NEQ " " AND #word2# NEQ "." AND #word2# NEQ chr(13) AND #word2# NEQ chr(10)>
<!--- Replace the text letter with the graphic letter .jpg file --->
<cfset word3 = word3 & Replace(word2,word2,'<img src="/images/letter_images/#word2#.jpg" alt="#word2#">',"all")>
<!--- If #word2# is a space then process this code --->
<cfif #word2# EQ " ">
<!--- Replace the space with the graphic space .jpg file --->
<cfset word3 = word3 & Replace(word2,word2,'<img src="/images/letter_images/blank.jpg" alt="space">',"all")>
<!--- If #word2# is a period then process this code --->
<cfif #word2# EQ ".">
<!--- Replace the period with the graphic period .jpg file --->
<cfset word3 = word3 & Replace(word2,word2,'<img src="/images/letter_images/dot.jpg" alt="period">',"all")>
<!--- If #word2# is the enter key then process this code --->
<cfif #word2# EQ chr(13)>
<!--- Replace the enter key with the enter key .jpg file --->
<cfset word3 = word3 & Replace(word2,chr(13),'<br>',"all")>
<!--- Output the graphics --->


You can download a full working version of this code which you can modify here. Otherwise, enjoy!

Wesley Geddes, Owner
Complete Creations

About This Tutorial
Author: Wesley Geddes
Skill Level: Intermediate 
Platforms Tested: CFMX
Total Views: 96,087
Submission Date: July 15, 2005
Last Update Date: August 27, 2011
All Tutorials By This Autor: 2
Discuss This Tutorial
  • Thanks Randy Morse!

  • This tutorial is a great example of some of the things you can do using the replace fuctionality of CF, you could also use something like this to display email addresses in a format that search engines cant spider (spammers) and Its just a really fun way to demonstrate the process, Thanks Wes.

  • I guess if we used alternatives for everything then there would be no point of learning any languages. Why dont we all just pack up and start using php nuke. Sound good Harry? The point of a tutorial is not only whats happening but understanding whats making it happen so it can be applied or parts of it can be applied to actual development projects.


Website Designed and Developed by Pablo Varando.