Pas un pas deux mais trois probleme pour le prix d'un !! ( php et html)

table {
    min-width : 10% ; 
    max-width : 30% ;  
    width : 50px;
}
tr {
    min-width : 10% ; 
    max-width : 30% ;  
    width: -moz-max-content;
}
td {
    min-width : 10% ; 
    max-width : 30% ;  
    width: -moz-max-content;
    width: 50px ;
}

 // mise en place image
       $path = 'upload/'; // chemin vers le dossier contenant tes images (ne pas oublier le slash final)
      
      // $tab = scandir($path); // Place tes images dans un tableau
    //   $tab = array_slice($tab, 2); // J'avais oublie que scandir listait . et .. donc on les vires aussi 
       /*
  //   shuffle($tab); // Mélange le tableau  


*/    //   $tab = array_slice($tab, 1, 1); 
// Garde les 3 premières images      
//on  fait une boucle du tableau pour l'affichage      
// foreach (glob("*.jpg") as $img)     
 //foreach ($tab as $img)    
 //  foreach ($img as $img)  
// condition texte   
 if (mysqli_num_rows($result) > 0) {   
  while ($row = mysqli_fetch_array($result)) {  
  ?>      
<!--  <tbody> -->           
<!--  <pre> -->        
   <!--  <div class="boxgrid caption" color="#fff" > -->         
   <td>
<tr>       
<?php          
  echo '<div class="float_foto"><img src="'.$path.$img.'" alt=""  width="300px" ><br/>  ';        echo '</div>'; // fin disclass float foto        ?>       </td></tr>       <td><tr>       <p><?php  echo $row['name']; ?></p>        </td></tr>       <td><tr>       <p><?php  echo $row['price']; echo '€'; ?></p>
       </td></tr>                 
<!--   </div> <!-- fin div class boxgrid -->       <!--   </pre> -->       <!--  </tr> -->       <!-- </tbody> -->     <?php            
  } // fin foreach 

 //pagination
$retour_total = $conn->query("SELECT COUNT(*) AS total FROM produits ");
//var_dump($retour_total);
$donnees_total=mysqli_fetch_assoc($retour_total); //On range retour sous la forme d'un tableau.
$total=$donnees_total['total']; //On récupère le total pour le placer dans la variable $total.
$messagesParPage=10; //Nous allons afficher 30 messages par page.
 
//Nous allons maintenant compter le nombre de pages.
$nombreDePages=ceil($total/$messagesParPage);

//Nous allons maintenant compter le nombre de pages.
$nombreDePages=ceil($total/$messagesParPage);
$sql = "SELECT * FROM produits LIMIT 10";
//$messagesParPage=30; //Nous allons afficher 30 messages par page.
 
//Nous allons maintenant compter le nombre de pages.
$nombreDePages=ceil($total/$messagesParPage);
 
if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
{
     $pageActuelle=intval($_GET['page']);
 
     if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
     {
          $pageActuelle=$nombreDePages;
     }
}
else // Sinon
{
     $pageActuelle=1; // La page actuelle est la n°1    
} 
 // $messagesParPage=10; //Nous allons afficher 30 messages par page.
 
$nombreDePages=ceil($total/$messagesParPage);
 
if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
{
     $pageActuelle=intval($_GET['page']);
 
     if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
     {
          $pageActuelle=$nombreDePages;
     }
}
else // Sinon
{
     $pageActuelle=1; // La page actuelle est la n°1    
}
 
$premiereEntree=($pageActuelle-1)*$messagesParPage; // On calcul la première entrée à lire
//Affichage la liste des pagesSélectionnez
//$messagesParPage=10; //Nous allons afficher 30 messages par page.
 
//Nous allons maintenant compter le nombre de pages.
$nombreDePages=ceil($total/$messagesParPage);
 
if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
{
     $pageActuelle=intval($_GET['page']);
 
     if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
     {
          $pageActuelle=$nombreDePages;
     }
}
else // Sinon
{
     $pageActuelle=1; // La page actuelle est la n°1    
}
 
$premiereEntree=($pageActuelle-1)*$messagesParPage; // On calcule la première entrée à lire

//pagination suite
  echo '<p align="center">Page : '; //Pour l'affichage, on centre la liste des pages
for($i=1; $i<=$nombreDePages; $i++) //On fait notre boucle
{
     //On va faire notre condition
     if($i==$pageActuelle) //S'il s'agit de la page actuelle...
     {
         echo ' [ '.$i.' ] '; 
     }    
     else //Sinon...
     {
          echo ' <a href="article.php?page='.$i.'">'.$i.'</a> ';
     }
}
echo '</p>';

  <!--  <pre> -->    
       <!--  <div class="boxgrid caption" color="#fff" > -->
     
       <td><tr>
       <div class="float_foto"><img src="upload/31f965i-QiS._AC_UL320_.jpg" alt=""  width="300px" ><br/>  </div>       </td></tr>
       <td><tr>
       <p>text</p> 
       </td></tr>
       <td><tr>
       <p>0€</p>
       </td></tr>
    
       
      <!--   </div> <!-- fin div class boxgrid --> 
      <!--   </pre> -->
       <!--  </tr> -->
       <!-- </tbody> -->
           <!--  <tbody> -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/design.css" />
    <script src="/js/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>Articles</title>

    <style>
        .bloc-max350 {
            max-width: 350px;
        }

        .article {
            color: #fff;
        }

        .article-name {
            font-size: 1.17em;
        }

        .article-images img {
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>articles :</h1>

    <?php
    // Connect to database
    include("db_connect_mysqli.php");
    // recherche du texte
    $sql = "SELECT * FROM produits";
    $result = mysqli_query($conn, $sql);
    //recherche de l'image      
    require_once("db_connect_mysqli.php");
    $sql_2 = "SELECT name FROM file";
    $req = mysqli_query($conn, $sql_2);
    ?>

    <div class="style">Page de travail</div>

    <div class="bloc bloc-max350">

        <?php
        if (mysqli_num_rows($result) > 0) :
            while ($row = mysqli_fetch_array($result)) : 
        ?>

        <div class="article boxgrid caption">
            <h2 class="article-name"><?php echo $row['name']; ?></h2>

            <div class="article-images">
                <?php
                $path = 'upload/';
                $images = glob($path . '*.jpg');

                if ($images) {
                    $images = array_slice($images, 0, 4);

                    foreach ($images as $img) {
                        echo '<img src="' . $path . $img . '" alt="">';
                    }
                }
                ?>
            </div>

            <p><?php echo $row['description']; ?></p>

            <p><?php echo $row['price'] . '€'; ?></p>
        </div> <!-- /.article -->

        <?php
            endwhile;
        endif;
        ?>

    </div> <!-- fin div class bloc -->
</body>

</html>

 $repertoire = "upload/";
 $iteration = opendir($repertoire);  
 $fichier = readdir($iteration);
 $fichier_info = finfo_open(FILEINFO_MIME_TYPE);
 $mime_type = finfo_file($fichier_info, $repertoire.$fichier);
//lister_images("upload/");