Embedding Images: Providing Embed Code for users to share on their site

[bornegraphics]

I was hoping someone could shed some light on how the embed code is created for the images on this page.

http://www.charitywater.org/media/banners.php

I am looking to setup a similar concept for my non-profit organization. For the life of me I can't figure out how to generate the Embed Code:

Please help.

Thanks,
Alan

[jscheuer1]

You could hard code it, which looks to be how they've done it. Either that or something server side because if javascript is disabled the embed code is still there. Essentially:

<td height="160" align="left" valign="top"><span class="simplebody_big_bold_caps">Embed Code</span>:<br />
      <input name="embed_code2" type="text" class="embedField marginBottom45" id="embed_code2" 
value='&lt;a href=&quot;http://www.charitywater.org/whywater&quot;&gt;&lt;img src=&quot;http://www.charitywater.org/media/banners/468x60_8glasses.jpg&quot; width=&quot;468&quot; height=&quot;60&quot; border=&quot;1&quot; style=&quot;border-color: #CCC&quot;/&gt;&lt;/a&gt;' 
size="28" /></td>

Javascript could be used, but then the embeds wouldn't be available to non-javascript users. Converting all those <, >, and quote characters to their HTML entity equivalents can be easily done in PHP though, so that might be being used. See:

http://www.php.net/manual/en/functio...ecialchars.php

Example (Note - PHP requires a PHP enabled server):

<?php
$isrc = 'http://www.charitywater.org/media/banners/468x60_8glasses.jpg';
$image = '<img src="' . $isrc . '" width="468" height="60" border="1" style="border-color: #CCC"/>';
$embed = '<a href="http://www.charitywater.org/whywater">' . $image . '</a>';
echo $image;
echo '<br>';
echo '<input type="text" value="' . htmlspecialchars($embed) . '" size="28">';
?>

They also have javascript to select the embed code on click, but that's not working because the text inputs containing the embed code are not part of a form and the code to select them assumes that they are. Even if they were, that code is incorrect though and as a result would select the wrong embed code in most cases.

Here's a more elaborate PHP approach, one that can take any number of images of varying sizes that also has a corrected javascript for selecting the embed code:

<?php
$images = array(
    'someimage.jpg' => 'width="40" height="100"',
    'anotherimage.jpg' => 'width="80" height="75"',
    'thirdimage.jpg' => 'width="60" height="120"'
);
$relpath = 'images/';
$abspath = 'http://www.somedomain.com/images/';
$link = '<a href="http://www.somedomain.com/">';
$output = array();
foreach ($images as $src => $dims){
    $imgsuffix = ' ' . $dims . ' border="1" style="border-color: #CCC"/>';
    $image = '<img src="' . $relpath . $src . '"' . $imgsuffix;
    $embed = $link . '<img src="' . $abspath . $src . '"' . $imgsuffix . '</a>';
    array_push($output, $image, '<span>Embed Code:</span>',
        '<input type="text" value="' . htmlspecialchars($embed) . '" onfocus="this.select();" size="28">'
    );
}
echo implode("<br>\n", $output);
?>

[bornegraphics]

John,

I appreciate you taking the time to respond to my problem. I have altered the code you supplied. When you have a chance can you review it and let me know if I have it correct or if I am missing something.

<td height="160" align="left" valign="top"><span class="embedField">Embed Code</span>:<br />
<input name="embed_code2" type="text" class="embedField marginBottom45" id="embed_code2" 
value='<a href="http://www.bornegraphics.com/evc_test"><img src="http://www.bornegraphics.com/evc_test/images/spread_the_word/images/spread_the_word/EVC_Spread_the_word_720x90.jpg" width="468" height="60" border="1" style="border-color: #CCC>'/></a></td>

Will that work?

Thoughts or suggestions on how to improve it should it not work.

Again your help is greatly appreciated.

Many thanks,
Alan

[bornegraphics]

John,

Thank you, thank you, thank you!
I got it working

Can't thank you enough.

This is the code I used:

<td height="160" align="left" valign="top"><span class="simplebody_big_bold_caps">Embed Code</span>:<br />
      <input name="embed_code2" type="text" class="embedField marginBottom45" id="embed_code2" 
value='<a href="http://www.bornegraphics.com/evc_test"><img src="http://www.bornegraphics.com/evc_test/images/spread_the_word/EVC_Spread_the_word_720x90.jpg" width="468" height="60" border="1" style="border-color: #CCC"/></a>' 
size="28" /></td>

Cheers,
Alan