Results 1 to 4 of 4

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

  1. #1
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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 Code:
    <?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 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);
    ?>
    Last edited by jscheuer1; 04-26-2012 at 05:04 AM. Reason: add examples
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bornegraphics (04-27-2012)

  4. #3
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    <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

  5. #4
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    John,

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

    Can't thank you enough.

    This is the code I used:

    HTML Code:
    <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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •