I believe in unnecessary HTML code should NOT be used inside PHP code, simply because it's hard to adopt it to your template.
Here is a replacement for entire Step 3 that also gives support for remote images:
In details.php find:
show_image($image_row, $mode, 0, 1);
Insert above:
//-----------------------------------------------------
//--- ImageCodes v1.1 Begins --------------------------
//-----------------------------------------------------
// Mod: ImageCodes v1.1
// Version: 1.1
// Description : Get image path, link and bbcode on the details page
// Contact: arjoon@gmail.com
// Last update: August 15 2008
$site_template->register_vars(array(
"uploaded_image_path" => str_replace("'", "'", (is_remote($image_row['image_media_file']) ? $image_row['image_media_file'] : $script_url."/".str_replace(ROOT_PATH, "", get_file_path($image_row['image_media_file'], "media", $cat_id, 0, 0)))),
"uploaded_thumb_path" => str_replace("'", "'", (is_remote($image_row['image_thumb_file']) ? $image_row['image_thumb_file'] : $script_url."/".str_replace(ROOT_PATH, "", get_file_path($image_row['image_thumb_file'], "thumb", $cat_id, 0, 0)))),
"uploaded_image_link" => $script_url."/details.php?".URL_IMAGE_ID."=".$image_id,
"uploaded_file_name" => str_replace("'", "'", $image_row['image_media_file']),
"homepage" => $script_url."/index.php"
));
//-----------------------------------------------------
//--- end of ImageCodes v1.1 --------------------------
//-----------------------------------------------------
After that in Step 2 instead of using {image_codes} you'll have more control over your design, you can use these new tags:
{uploaded_image_path} - full image path
{uploaded_thumb_path} - thumbnail image path
{uploaded_image_link} - url to image details page
{uploaded_file_name} - image filename
{homepage} - site homepage url
i.e.<table border="0" width="500px" align="center">
<tr>
<td>
<font size="2" face="Tahoma"><b>Image Codes:</b></font><br />
<input onfocus='highlight(this);' onclick='highlight(this);' style='border-style:solid; border-width:1; padding:2; width: 300px; background-color:#FFFFFF; color:#000000' size='70' value='<a href="{uploaded_image_link}"><img src="{uploaded_thumb_path}" border="0" alt="{uploaded_file_name}"></a>' type='text' name='image'> Thumbnail for websites<br />
<input onfocus='highlight(this);' onclick='highlight(this);' style='border-style:solid; border-width:1; padding:2; width: 300px; background-color:#FFFFFF; color:#000000' size='70' value='[URL={uploaded_image_link}][IMG]{uploaded_thumb_path}[/IMG][/URL]' type='text' name='image'> Thumbnail for forums<br /><br />
<font size='1' face='Tahoma'>Use the below codes to post the full sized image on other websites or forums</font><br />
<input onfocus='highlight(this);' onclick='highlight(this);' style='border-style:solid; border-width:1; padding:2; width: 300px; background-color:#FFFFFF; color:#000000' size='70' value='<a href="{homepage}"><img src="{uploaded_image_path}" border="0" alt="{uploaded_file_name}"></a>' type='text' name='image'> Hotlink for websites<br />
<input onfocus='highlight(this);' onclick='highlight(this);' style='border-style:solid; border-width:1; padding:2; width: 300px; background-color:#FFFFFF; color:#000000' size='70' value='[URL={homepage}][IMG]{uploaded_image_path}[/IMG][/URL]' type='text' name='image'> Hotlink for forums<br /><br />
<font size='1' face='Tahoma'>Share this image with your friends</font><br />
<input onfocus='highlight(this);' onclick='highlight(this);' style='border-style:solid; border-width:1; padding:2; width: 300px; background-color:#FFFFFF; color:#000000' size='70' value='{uploaded_image_link}' type='text' name='image'> Share this image<br />
<input onfocus='highlight(this);' onclick='highlight(this);' style='border-style:solid; border-width:1; padding:2; width: 300px; background-color:#FFFFFF; color:#000000' size='70' value='{uploaded_image_path}' type='text' name='image'> Direct path to image<br /><br />
</td>
</tr>
</table>