View Full Version : Embedding Images: Providing Embed Code for users to share on their site
bornegraphics
04-25-2012, 06:02 PM
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
04-26-2012, 12:29 AM
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='<a href="http://www.charitywater.org/whywater"><img src="http://www.charitywater.org/media/banners/468x60_8glasses.jpg" width="468" height="60" border="1" style="border-color: #CCC"/></a>'
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/function.htmlspecialchars.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
04-27-2012, 03:35 PM
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
04-27-2012, 03:49 PM
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
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.