Replace 1st letter in string with graphical equivalent

[Leao]

Hi,

I would like the first letter in a string I retrieve from an mySQL database to be converted into a graphic (an ornamental rendering of the same letter).

E.g. a text such as:
Somewhere in the Middle East.

Would automatically turn into:
<img src="pictures/s.jpg" alt="S">omewhere in the Middle East.

The following is the code I am currently using on a dynamic PHP webpage. The code at the mo just retrieves a text from a database, formats the text and then echoes it:

$goatswiththe=$_GET['goatswiththe'];
mysql_connect("server","user","password") or die(mysql_error());
mysql_select_db("goatswi_db") or die(mysql_error());
$result = mysql_query("SELECT * FROM goattext_eng") or die(mysql_error());
$row = mysql_fetch_array( $result );$goattext = $row[$goatswiththe];

function nl2p($goatfunction)
{
$goatfunction = str_replace("\r\n\r\n", "</p><p class='english'>", $goatfunction);
$goatfunction = str_replace("\r\n", "<br>", $goatfunction);
$goatfunction = str_replace("</p><p class='english'>", "</p>\n<p class='english'>", $goatfunction);
$goatfunction = str_replace("\r", '', $goatfunction);
$goatfunction = str_replace("<p class='english'></p>", '', $goatfunction);
return $goatfunction;
}

$fomattedtext = nl2p($goattext); 

echo "$fomattedtext" 

ANY IDEAS?

Many, many thanks,

Leao

[nrg_alpha]

E.g. a text such as:
Somewhere in the Middle East.

Would automatically turn into:
<img src="pictures/s.jpg" alt="S">omewhere in the Middle East.
...

ANY IDEAS?
Leao

Well, one method could be:

setlocale(LC_CTYPE, 'C'); // ensure ctyp_alpha = [a-zA-Z] and not include accented characters like Â,É,é etc...
$str = 'Somewhere in the Middle East.';
$firstLetter = $str[0];
if (ctype_alpha($firstLetter)) {
    $str = str_replace(substr($str, 0, 1), '<img src="pictures/' . strtolower($firstLetter) . ".jpg\" alt=\"$firstLetter\">", $str);
    echo $str;
} else {
    echo 'Error! First letter is not [a-zA-Z].';
} 

[Waffles]

perhaps consider a css alternative
http://www.users.globalnet.co.uk/~ar.../dropcaps.html

might be more efficient than using an image, unless the images are very "graphical" and can't be reproduced in css.

[nrg_alpha]

Come to think of it.. why did I even bother with $firstLetter in the first place? Why not use $str[0] all over the place?

setlocale(LC_CTYPE, 'C'); // ensure ctyp_alpha = [a-zA-Z] and not include accented characters like Â,É,é etc...
$str = 'Somewhere in the Middle East.';
if (ctype_alpha($str[0])) {
    $str = str_replace($str[0], '<img src="pictures/' . strtolower($str[0]) . ".jpg\" alt=\"$str[0]\">", $str);
    echo $str;
} else {
    echo 'Error! First letter is not [a-zA-Z].';
} 

[Salathe]

nrg_alpha, your snippet will replace every occurrence of whatever the first letter is with the image string. A quick alternative would be to use substr_replace like:

// …
$img = sprintf(
    '<img src="pictures/%s.jpg" alt="%s">',
    strtolower($str[0]),
    $str[0]
);
$str = substr_replace($str, $img, 0, 1);
// … 

That basically says, replace characters from offset 0 to offset 1 in subject string $str with replacement string $img.

[nrg_alpha]

You're right.. I stand corrected.. when I tested it in the sample string, I hadn't made that realization in the event it would replace any additional characters like the starting character that might be present in the string. *I'm not on the ball as of late*.

[Leao]

Thank yous all round. The last code works perfectly.

Is there a way to only let the code execute if the first letter is (for example) b, e, f, g, m or s? I have made a font but haven't done all the letters. So, for example, nothing would change if the the phrase was something like: 'Among the hills'. In Firefox this is not an issue as if the browser can't find the image it is looking for it just replaces it with the alt text but in Safari and probably many other Internet browsers it displays an ugly box with a question mark when it can't find an image.

Many thanks,

Leao

[nrg_alpha]

That's up to you to ensure that you have all the appropriate graphics as well as the appropriate file path.

[Salathe]

You could change the condition to make sure the first character is one that you specify. As usual, there are a number of different ways to do it so the following example may or may not be suited to your script:

<?php

$str = 'Somewhere in the Middle East.';

// If first character is one of B, E, F, G, M or S.
if (strpbrk($str[0], 'BEFGMS'))
{
    $img = sprintf('<img src="pictures/%s.jpg" alt="%s">', strtolower($str[0]), $str[0]);
    // Replace first character with <img> tag
    $str = substr_replace($str, $img, 0, 1);
}

echo $str;

?>

Off Topic:


You'll probably never remember the name of the strpbrk function, hence the comment in the code. The function simply returns the portion of the subject string (first argument) starting at one of the characters provided in the second argument. If none of the characters are found, it will return FALSE (which is useful for us). For example, strpbrk("foo", "aeiou") will return "oo" and strpbrk("abcdef","xyz") will return FALSE. This is useful to us because a) we're only using a single character as the subject string (i.e., S in the previous posts) and b) letters get evaluated as TRUE in if statements. In summary, if our string starts with one of those letters then the body of the if statement will be executed.

P.S. Not particularly off-topic, but a pleasant aside.

[Leao]

I can't say how thankful I am for all of your help Salathe and Alpha! Many blessings

[nrg_alpha]

Well, in this case, I don't wager I helped much, considering my solution wasn't adequate at all lol - I'm being absent minded lately. Salathe did all the heavy lifting so to speak

Off Topic:


I like how salathe included these offtopic explanations (although, they aren't really 'off topic' per say, as they are very relevant to the issue at hand).