logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.

Add WebCards+Send+Form+Thumbnail to Twitter Add WebCards+Send+Form+Thumbnail to Facebook Add WebCards+Send+Form+Thumbnail to MySpace Add WebCards+Send+Form+Thumbnail to Del.icio.us Digg WebCards+Send+Form+Thumbnail Add WebCards+Send+Form+Thumbnail to Yahoo My Web Add WebCards+Send+Form+Thumbnail to Google Bookmarks Add WebCards+Send+Form+Thumbnail to Stumbleupon Add WebCards+Send+Form+Thumbnail to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Getting Started Photoshop Elements by TeachUcomp

Scalloped Circle and Illustrator Shape Builder

Honeycomb Xmas Ornament SVG Cut Design

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor