Displaying Images

[Wilgar]

I have a website that allows users to regsiter, login and then create/update their user profiles. Users are allowed to also upload a profile picture, but the next time a user logs in the profile picture sometimes has some associated display problems i.e. it could happen that the picture does not display properly, is missing or has some other problem. This problem seems to be random in nature. Is there any way of making the display of this picture better? My website is using HTML/PHP/MySQL for its development.

[Dormilich]

how do you save the pictures exactly?

[Wilgar]

See below table containing image coding...any ideas?

<table width="100%" border="0" cellspacing="0" cellpadding="4">
                        <tr>
                          <td width="15%" valign="top"><b>User Type</b>&nbsp;<span title="This field is required" class="form-required">*</span></td>
                          <td width="85%" valign="top"><table width="50%" border="0" cellspacing="0" cellpadding="3">
                            <tr>
                              <td width="18%"><b><label for="_UserType_P">Private User</label></b></td>
                              <td width="9%"><input id="_UserType_P" type="radio" name="_UserType" value="P" <?php echo (($_UserType=='P') ? ' checked="checked"' : ''); ?> onclick="javascript:fnToggleBus(0);" /></td>
                              <td width="22%"><b><label for="_UserType_B">Business User</label></b></td>
                              <td width="51%"><input id="_UserType_B" type="radio" name="_UserType" value="B" <?php echo (($_UserType=='B') ? ' checked="checked"' : ''); ?> onclick="javascript:fnToggleBus(1);" /></td>
                            </tr>
                          </table></td>
                        </tr>
                        <tr>
                          <td valign="top"><strong>Profile Picture </strong></td>
                          <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="9%"><iframe id="frmImage" frameborder="0" src="/proc/images.php" <?php echo (($_SESSION['User']['Picture']!='' || count($_SERVER['Images'])>0) ? ' height="200"' : ' height="50"'); ?>></iframe></td>
                                <td width="91%"></td>
                              </tr>
                            </table></td>
                        </tr>
                        <tr>
                          <td valign="top"><strong>Username</strong></td>
                          <td valign="top"><input class="form-text" id="_Email2" type="text" name="_Email2" value="<?php echo $_Username; ?>" maxlength="255" /></td>
                        </tr>
                        <tr>
                            <td valign="top"><b>Login Email</b>&nbsp;<span title="This field is required" class="form-required">*</span></td>
                            <td valign="top"><input class="form-text" id="_Email" type="text" name="_Email" value="<?php echo $_Email; ?>" maxlength="255" /></td>
                        </tr>
                        <tr>
                          <td valign="top"><b>Password</b></td>
                          <td valign="top"><input class="form-text" id="_Password" type="password" name="_Password" maxlength="100" value="0123456789" /></td>
                        </tr>
                        <tr>
                          <td valign="top"><b>Name</b>&nbsp;<span title="This field is required" class="form-required">*</span></td>
                          <td valign="top"><input class="form-text" id="_Name" type="text" name="_Name" value="<?php echo $_Name; ?>" maxlength="100" /></td>
                        </tr>
                        <tr>
                          <td valign="top"><b>Surname</b>&nbsp;<span title="This field is required" class="form-required">*</span></td>
                          <td valign="top"><input class="form-text" id="_Surname" type="text" name="_Surname" value="<?php echo $_Surname; ?>" maxlength="100" /></td>
                        </tr>
                        <tr>
                          <td valign="top"><b>Date of birth</b>&nbsp;<span title="This field is required" class="form-required">*</span></td>
                          <td valign="top"><select name="_DOB_d" id="_DOB_d" style="width:auto;">
                            <option value="" selected="selected">Day</option>
                            <?php
                            for ($d=1; $d<=31; $d++){
                                echo '<option value="' . $d . '"';
                                if($_DOB_d == $d){
                                    echo ' selected="selected"';
                                }
                                echo '>' . $d . '</option>';
                            }
                            ?>
                        </select>&nbsp;<select name="_DOB_m" id="_DOB_m" style="width:auto;">
                            <option value="" selected="selected">Month</option>
                            <?php
                            foreach(Array(1 => 'January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December') as $m => $mM){
                                echo '<option value="' . $m . '"';
                                if($_DOB_m == $m){
                                    echo ' selected="selected"';
                                }
                                echo '>' . $mM . '</option>';
                            }
                            ?>
                        </select>&nbsp;<select name="_DOB_y" id="_DOB_y" style="width:auto;">
                            <option value="" selected="selected">Year</option>
                            <?php
                            for($y=2011; $y>=1900; $y--){
                                echo '<option value="' . $y . '"';
                                if($_DOB_y == $y){
                                    echo ' selected="selected"';
                                }
                                echo '>' . $y . '</option>';
                            }
                            ?>
                        </select>                        </td></tr>
                        <tr>
                            <td valign="top"><b>Gender</b>&nbsp;<span title="This field is required" class="form-required">*</span></td><td valign="top"><label>Male&nbsp;<input id="_Gender" type="radio" name="_Gender" value="M" <?php echo (($_Gender=='M') ? ' checked="checked"' : ''); ?> /></label>&nbsp;&nbsp;<label>Female<input id="_Gender" type="radio" name="_Gender" value="F" <?php echo (($_Gender=='F') ? ' checked="checked"' : ''); ?> /></label></td>
                        </tr>
                        <tr>
                            <td valign="top"><b>Interests</b></td><td valign="top">
                            <select name="_Interest" id="_Interest">
                                <option value="" selected="selected">Select Interest</option>
                                <?php
                                $rsInterest = $oConn->query("SELECT ID,Description FROM TblInterest ORDER BY Description");
                                foreach($rsInterest as $aInterest){
                                    echo '<option value="' . $aInterest[0] . '"' . (($_Interest == $aInterest[0]) ? ' selected="selected"' : '') . '>' . $aInterest[1] . '</option>';
                                }
                                ?>
                            </select>            
                            </td>
                        </tr>
    </table>

[Dormilich]

I may be blind, but I’m not seeing any code that saves the image.

[Wilgar]

Please see the piece of code extracted from the above:

<td width="9%"><iframe id="frmImage" frameborder="0" src="/proc/images.php" <?php echo (($_SESSION['User']['Picture']!='' || count($_SERVER['Images'])>0) ? ' height="200"' : ' height="50"'); ?>></iframe></td> 
 

Also please see attached print-screen pic, which shows an example display error. Where the red rectangle is there should be a profile picture displayed, but it is missing...

What do you think the best way of saving and displaying a profile pic should be?

This is all the information I have at the moment, the rest will be with the developer...

[Dormilich]

why in the world would you display an image by an <iframe>? that’s what the <img> tag is for. and for upload I’d just use a file upload field ...

and unless I know what images.php does, how am I supposed to know whether it is wrong or right what you see?

[Wilgar]

Apologies for the delay. Please check out the info below contained in the file "images.php" and let me know if you can maybe pic up a problem with regards to the profile image framing?

<?php
 
@session_start();
/*echo '<pre>';
print_r($_SESSION);
echo '</pre>';*/
 
$sError ='';
if(isset($_SESSION['uploadError'])){
    $sError .= $_SESSION['uploadError'];
}
if(isset($_SESSION['Images'])){$Images = $_SESSION['Images'];}
else{$Images = Array();}
 
echo "
<html>
    <head>
        <style>*{padding:0; margin:0; font:Normal 13px Tahoma;} table.gallery{padding-right:10px;}table.gallery td{vertical-align:bottom;}table.gallery td{padding:5px;}table.gallery td div{padding-bottom:3px; text-align:center;}</style>
    </head>
<body style='background-color:#f0f0f0;'><form method='post' enctype='multipart/form-data'>\n";
 
$iImgCount = count($Images);
if($iImgCount<1){
    echo"<input name='flImage' type='file' onchange='javascript:fnAddImage()' /><br />";
    echo"<script language='javascript'>function fnAddImage(){var f=document.forms[0];if(f.flImage.value.length!=0){f.action='default.php';f.submit();}}</script>\n";
}
 
if($iImgCount>0){
    if(count($Images)>0){
        $sImage = 'Photos/' . $Images[0] . "_t.jpg";
        $_SERVER['User']['Picture'] = $Images[0];
        echo "<br /><table border='0' class='gallery'><tr><td><img src='/$sImage' width='150' /></td></tr><tr><td align='center'><a href='images_rem.php?id=0' title='Remove'>Remove</a></td></tr></table>\n";
    }
    else{
        echo "<table class='gallery' cellspacing='10'><tr>";
        $iCount = 0;
        foreach($Images as $i => $Image){
            $sImage = 'Photos/' . $Image . "_t.jpg";
            $iCount++;
            echo "<td><div class='item'><img src='/$sImage' width='150' /></div><div><a href='images_rem.php?id=$i'>Remove</a></div></td>\n";
            if($iCount>=2){
                echo '</tr><tr>';
                $iCount=0;
            }
        }
        echo "</table>";
    }
}
 
echo "</form>";
echo ($sError !='') ? "<div style='color:red;'>$sError</div>\n" : '';
echo "<script language='javascript'>window.onload=function(){window.parent.document.getElementById('frmImage').height=(window.document.body.scrollHeight+20);}</script></body</html>";
 
if(isset($_SESSION['uploadError'])){
    unset($_SESSION['uploadError']);
}