g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

WebCards Send Form Thumbnail

We will continue to work on customizing the WebCards system to work within a Facebook iframe which is only 510 px wide.

If you have clicked on one of the thumbnails on the front page of the system, you will be taken to the form that collects the sender/receiver information. Notice that we only see the large image or swf on the page. The rest of the page goes beyond our 510 px and the form disappears. We have two options for fixing this problem.

Option 1
Our first option is to change the preview of the ecard from the full size to the thumbnail, giving us more room for the form to be displayed. However, this will prevent the user from viewing the full size swf animation or image until after they have filled in the form and clicked the Preview button at the bottom of the page. If you prefer to let the user preview the animation or image before submitting the form, you will want to use Option 2 in the next tutorial.

For Option 1, we need to change a few lines of code in the index.html file. First we will add a few more variable names to the SELECT code that collects the data from our database. The variables will be the thumb and thumb_type variables. Then we will replace the variable names in a few if statements to work with the thumbnail variables instead of the image variables.

webcards/index.html

line 1360 - grab the thumbnail information from the database

if (!$DB->query("SELECT id, cost, name, url, thumb, img_type, thumb_type, width, height, keywords, freetext FROM " . $conf['dbprefix'] . "images WHERE id=\"" . escape_string($selected_pic_id) . "\" AND slug=\"" . escape_string($selected_pic_name) . "\" LIMIT 1"))

line 1372, 1374 and 1376

if($row['thumb_type'] == "free_text")
{
$dsp_image .= stripslashes($row['thumb']);
}
elseif(substr($row['thumb'], "-3") == "swf")

line 1388, 1390, 1392 and 1394

if($row['thumb_width'] != "" && $row['thumb_width'] != "0")
{
$width = "width=\"" . $row['thumb_width'] . "\" ";
}
if($row['thumb_height'] != "" && $row['thumb_height'] != "0")
{
$height = "height=\"" . $row['thumb_height'] . "\" ";
}

line 1399, 1401 and 1405

if($row['thumb_type'] == "upload")
{
$dsp_image = str_replace("{{img}}", $conf['url'] . "images/" . $row['thumb_url'], $dsp_image);
}
else
{
$dsp_image = str_replace("{{img}}", $row['thumb'], $dsp_image);
}

After saving our changes, we can refresh the webpage and see that with the thumbnail at the left, the form is back on the page.

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor