I have a website that freelancers can sign up and in their profile they can upload some images of work they have done, these images are automatically shown on the home page with the designer’s name and a link to there portfolio.

There are 3 things I would like to know:

• How do I limit the amount shown on the home page? I would like to show 3 rows of 5.
• How to get it to break after the 5th image so it starts the second row and then after the second row has g images it would go to the next row?
• How to make it cycle through others portfolios so if the page is refreshed then other designers will have there portfolio showing.

I have made the modifications myself and the code that I use to get the portfolios to display on the home page is pasted below, how do I change this code to get it to work properly, any help with this would be absolutely great.

PHP Code:

<td><?
                                    $freelance_user_portf = SQLact ("query","SELECT * FROM freelancers_programmers WHERE portfolio > 0");
                            $freelance_user_portf_rows  = SQLact("num_rows",  $freelance_user_portf);
                                    if ($freelance_user_portf_rows > 0){
                                                while ($row = SQLact ("fetch_array", $freelance_user_portf)){
                                                            $arg = $row[portfolio];
                                                            $rcc = explode("
", $arg);
                                                            $k=0;
                                                             $max_upload = count($rcc);
                                                            for ($i=0;$i<count($rcc);$i++) {
                                                                        $lem = explode("&&", $rcc[$i]);
                                                                        $image_id[$k] = $lem[0];
                                                                        $image[$k] = $lem[1];
                                                                        $k++;
                                                            }
                                                            //print_r($image);
                                                               $rand_num = rand(0,$max_upload-1);
                                                                        echo '<td class="BlackB"><a href="' . $siteurl . '/freelancers.php?viewprofile=' . $row[username] 
                                                                        .'" target="_blank"><img src="' . 
                                                                                    $attachurl . '/' . $image[$rand_num] . '" width="100" height="100" border="0"></a><br><br>';
                                                                        echo $row[username].'</td>';
                                                            //}
 
                                                ?>
 
                                                <?
                                                }
                                    }
                                    ?></td>

The key here is XHTML/CSS. Although this can be done with tables, it would require additional and unnecessary PHP.

How to do it:

I would suggest printing the list of images as an unordered list.

The xhtml would look somethign like this:

<ul id="image-list">
  <li>image 1</li>
  <li>image 2</li>
  ...
  <li>image n</li>
</ul>

<!--I'm throwing this in so you don't forget to clear the float, in turn screwing the layout up-->
<br class="clear" />

You would then add some simple css:

/*
150px * 5          = 750px  ( minmum width of ul if each image is 150px wide)
800px - 750px    = 50px ( if using 800px for the ul width, 50px is left for spacing )
50px / ( 2 * 5 )  = 5px ( 5px on each side of the image )
*/

ul#image-list{
  width:800px;
  list-style-position:inside;
  }

  ul#image-list li{
    float:left;
    width:150px; /* max width of each image/profiledata */
    margin:5px; /* creates 5px spacing between rows and images */
    }

.clear {
  clear:both;
  }

Here is an article for reference:
http://www.alistapart.com/articles/multicolumnlists

I haven't tested the exact code above, but it should work. It should allow for a list of images 150px wide each, to appear in rows of 5. You can of course put your other data in the <li> along with the image.

Post back if you have any problems implementing this.