CODEWITHSUNDEEP
phpmysql
user657847
user657847

Reputation: 151

How do I create an order in which my images appear? (a MySQL+PHP question)

Right now, all my images are basically inserted onto my page at the same time (or so it appears). How can I create an order, so my images appear one being one left, left to right, top to bottom?

I'm using MySQL to store the image name by the way. So maybe I should create an order by ascending ID for which the image name is processed onto my php? I don't know, any recommendations would be appreciated.

This is a small bit of the code to illustrate what I mean. It's the image code being looped:

echo '<img src="https://s3.amazonaws.com/pictures/' . $objResult["Image"] . '.png" />

EDIT: Here's the code for more context:

<html>
<body>
    <?php
        $objConnect = mysql_connect("localhost","root","") or die(mysql_error());
        $objDB = mysql_select_db("dfvdfv");
        $strSQL = "SELECT * FROM images";
        if (!isset($_GET['Page']))  $_GET['Page']='0';
        $objQuery = mysql_query($strSQL);
        $Num_Rows = mysql_num_rows($objQuery);
        $Per_Page = 16;   // Per Page
        $Page = $_GET["Page"];
        if(!$_GET["Page"])
        {
            $Page=1;
        }
        $Prev_Page = $Page-1;
        $Next_Page = $Page+1;
        $Page_Start = (($Per_Page*$Page)-$Per_Page);
        if($Num_Rows<=$Per_Page)
        {
            $Num_Pages =1;
        }
        else if(($Num_Rows % $Per_Page)==0)
        {
            $Num_Pages =($Num_Rows/$Per_Page) ;
        }
        else
        {
            $Num_Pages =($Num_Rows/$Per_Page)+1;
            $Num_Pages = (int)$Num_Pages;
        }

        $strSQL .=" order  by ImagesID ASC LIMIT $Page_Start , $Per_Page";
        $objQuery  = mysql_query($strSQL);
$cell = 0;
echo '<table border="1" cellpadding="2" cellspacing="1"><tr>';
while($objResult = mysql_fetch_array($objQuery))
{
  if($cell % 4 == 0) {
    echo '</tr><tr>';
  }

if($cell == 2) {
    echo '<td>RESERVED</td>';
} elseif ($cell == 3) {
    echo '<td>The other cell</td>';
} else {
    echo '
    <td><img src="https://s3.amazonaws.com/images/' . $objResult["Image"] . '" />' .
    $objResult["ImagesName"] . '</td>'; }
    $cell++;
}
echo '</tr></table>';
    ?>

        <br />
view more:
<?php
        if($Prev_Page)
        {
            echo " <a href='$_SERVER[SCRIPT_NAME]?Page=$Prev_Page'>prev</a> ";
        }
            {
                echo "|";
        }
        if($Page!=$Num_Pages)
        {
            echo " <a href ='$_SERVER[SCRIPT_NAME]?Page=$Next_Page'>next</a> ";
        }
        ?>
<?php
mysql_close($objConnect);
?>
</body>
</html>

Upvotes: 0

Views: 181

Answers (2)

Nick Weaver
Nick Weaver

Reputation: 47241

Assuming your iterating through a single loop to write your html and therefor the images it could be easily done by setting the css float attribute to left, put the images in a div container with a size of your choice, so the images row will break if they reach the right border. This will lead to building up the images from left to right.

A code example with your snippet embedded:

// open container
echo '<div style="width:\'500px\'">';

foreach ($results as $key => $objResult) {
    echo '<img style="float:left;" src="https://s3.amazonaws.com/pictures/' . $objResult["Picture"] . '.png" />';
}
// close container
echo '</div>';

I suggest using stylesheet instead of setting the style attribute directly but for simplicity of the example it's just this way.

example for second question in comments

if ($objResult["description"]) {
    $imageTitle = $objResult["description"];
} else {        
    $imageTitle = $objResult["number"];
}       
echo 
    '<td>'.
        '<img src="https://s3.amazonaws.com/images/' . $objResult["Image"] . '" />' .
        $imageTitle . 
    '</td>';

Upvotes: 2

simshaun
simshaun

Reputation: 21466

If you want to change the order in which images appear, add a sort_order column to your database and put an index on it. When you add pictures, increment the sort_order. I prefer to increment by 10 so I have room to move images in-between others.

When you select from the database make sure you ORDER BY sort_order.

Upvotes: 1

Related Questions