how to restict number of images in a row to three ?

Question

Hi i am populating the images from my database in a table,, how to restrict the images to three per row

<table border="0" align="center" height="25%" width="25%"  >
<tr><td align="center" width="50px"  bgcolor="#4b2d0e"><strong><font color="#FFFFFF">Friend List</font></strong></td></tr>
<? foreach($Selected as $row)

{?>
<? $value = $row['dPath'];
$imgp =  base_url()."images"."/".$value;
?>
<tr><td bgcolor="#999999">
<strong ><?=$row['dFrindName'].'</br>';?></strong>
<? if($value!="") {?>
 <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
<? } else { ?>
<a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
<? }?>
</td></tr>

<? }}?>

</table>

Thi is my table

Answer 1

<?php 

$x=0;

    foreach($Selected as $row){

        if($x%3 == 0)
            echo '<tr>';

        $value = $row['dPath'];
        $imgp =  base_url()."images"."/".$value;
?>

        <td style="background-color:#999999;">
            <strong ><?=$row['dFrindName'].'</br>';?></strong>

            <?php if($value!="") {?>
                <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
            <?php } else { ?>
                <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
            <?php }?>
        </td>
<?php
        if($x%3 == 0)
            echo '</tr>';
        x++; 
    }

    if(($x-1)%3 != 0)
        echo '</tr>'; //Prints out the last '<tr>' if one isn't printed.
?>

You need to use an if with a modulus operator.

Answer 2

You can use CSS as an alernative if the images are of a fixed width and you can do without the tables - create a wrapper div with a fixed width around your entire image list, and simply float each image left.

Answer 3

Hey, would you try this.

Notice that I replaced the if...else with a ternary operator. I prefer it compact.

Hope it helps you and anyone else interested.:)

<table border="0" align="center" height="25%" width="25%"  >
<tr>
    <td colspan="3" align="center" width="50px"  bgcolor="#4b2d0e">
        <strong><font color="#FFFFFF">Friend List</font></strong>
    </td>
</tr>
<? 
 $imgs=0;
 foreach($Selected as $row){

 $value = $row['dPath'];
 $imgp =  base_url()."images"."/".$value;

if($imgs%3 == 0){
echo '<tr>';
}
?>

    <td bgcolor="#999999">
        <strong ><?=$row['dFrindName'].'</br>';?></strong><a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$value!=""? $imgp: '../images/us.png' ?>" name="b1" width="90" height="80" border="0"/></a>
    </td>
<? 
$imgs++;
if($imgs%3 == 0){
echo "</tr>\n";
}

}//end loop
echo '</tr>';//end last row
?>

</table>

Answer 4

Here, I cleaned up your invalid HTML, used CSS, and used a more recommended PHP coding style.

Please note: you need to be aware that if $Selected contains user-inputted (or otherwise non-HTML-safe) data, you need to wrap your output in htmlspecialchars or be open to XSS vulnerabilities.

It was a little unclear what you meant by wanting to "restrict the images to three per row" considering that it was only showing 1 per row currently. If I am to assume that you want to show 3 per row rather than 1, than you need to use the modulus operator and only open a new <tr> after every third element, and then close it at the right time. Like this:

<style type="text/css">
    a img { border: none; }
    .friend-list { border: none; width: 25%; height: 25%; margin: 0 auto; }
    .friend-list th { text-align: center; background-color: #4b2d0e; color: #fff; font-weight: bold; }
    .friend-list td { background-color: #999999; }
</style>

<?php 
$numCols = 3;
$colCount = -1;
?>
<table class="friend-list">
    <tr>
        <th colspan="<?php echo $numCols; ?>">Friend List</th>
    </tr>
    <?php
    foreach($Selected as $row) {

        $value = $row['dPath'];
        $imgp = ($value) ? base_url().'images/'.$value : '../images/us.png';

        if(++$colCount % $numCols == 0) {
            echo '<tr>';
        }
        ?>
            <td>
                <strong><?php echo $row['dFriendName']; ?></strong><br />
                <a class="Tab_Link" href="<?php echo site_url(); ?>/friends/View_FProfile/<?php echo $row['dMember_Id']; ?>">
                    <img src="<?php echo $imgp; ?>" width="90" height="80" />
                </a>
            </td>
        <?php 
        if(($colCount + 1) % $numCols == 0) {
            echo '</tr>';
        } elseif (($colCount + 1) == count($Selected)) {
            // if 16 elements are to fit in 3 columns, print 2 empty <td>s before closing <tr>
            $extraTDs = $numCols - (($colCount + 1) % $numCols);
            for ($i = 0; $i < $extraTDs; $i++) {
                echo '<td>&nbsp;</td>';
            }
            echo '</tr>';
        }
    }
    ?>
</table>

Answer 5

Tables should be reserved for situations where columns and rows have meaning... A better solution is to use floated block elements instead of table cells. When you float a bunch of similar blocks, they wrap automatically, so the key is making their parent container just wide enough to hold 3 of them.

You don't need to do anything special with php to create new rows, so i'll just display the html and css, letting you write the php to make it happen.

html:

<div id="replacesTable">
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="clear">&nbsp;</div>
</div>

css:

#replacesTable{
    width: 300px;
}
div.replacesTableCell{
    float:left;
    width: 100px;

    /* styles below are just to make it easier to see what's happening */
    text-align:center;
    font-size: 10px;
    margin: 20px 0;
}
/* this just stretches the parent container #replacesTable around the entries*/
.clear{
    clear:both;
    height:1px;
    overflow:hidden;
}

Answer 6

Here is a simplified example without the extraneous styling information to show the principal. Every 3rd image we want to write the opening and closing tags (though not at the same time).

So we loop through the list of images and use the moduulus operator to know when we should print the <tr> tags.

<?php
    $column_count = 3;
    $image_list = get_images();

?>
<table>

<?php
    for($i=0; $i < sizeof($image_list); i++) {
        $cur_img = $image_list[$i];
        $img_url = $cur_img['url'];

        // open a we row every 3rd column
        if($i % $column_count == 0) {
            print '<tr>';
        }

        // for every image we want a table cell, and an image tag
        print "<td> <img src='$img_url'> </td>";

        // close the row every 3rd column, but offset by 3 from the opening tag
        if($i % $column_count == $column_count - 1) {
            print '<tr>';
        }
    }

    // what if the number of images are not div by 3? Then there will be less
    // than 3 items in the last row, and no closing tag. So we look for that and
    // print a closing tag here if needed
    if(sizeof($image_list) % $column_count != 0) {
        print '</tr>';
    }
?>
</table>

Answer 7

You can try using http://www.php.net/manual/en/function.array-chunk.php