8796 sujets

Développement web côté serveur, CMS

Bonjour à tous,

La question du jour :
"Comment faire pour afficher une image (vignette) redimensionnée en conservant les proportions"

Ma problèmatique est la suivante:

J'ai une sorte de mur d'images alimenté par les internautes. Ceux-ci uploadent des images de dimensions différentes les unes des autres. Par souci d'esthetisme je voudrais pouvoir afficher des miniatures ayant les memes dimensions (100px * 100px) sans que cela déforme les images.

Alors, faut-il traiter les images en amont (lors de l'upload, générer une vignette) ou alors est il possible de réaliser une sorte de "cropping" pour prendre qu'une partie de l'image tout en l'affichant dans un cadre de 100*100.

Avez-vous déjà été confronté à ce problème ?

Merci d'avance pour vos avis et solutions.
Bonjour,

Tu peux par exemple générer un thumb de l'image uploadé avec cropping automatique de 100*100 qui prend le centre de l'image ou proposer aux utilisateurs de le faire manuellement à l'aide de jcrop (par exemple).
Bon j'ai avancé, j'arrive a afficher des vignettes de meme taille en gardant les proportions
Maintenant mon souci est que j'affiche les images sur 1 colonne et je voudrais pouvoir le faire sur 3 colonnes. Je pense que c'est possible mais je m'arrache les cheveux. Smiley bawling

Voici mon code

<table width="100" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th scope="col"><?php require('connexion.inc.php'); 
		$sql_rub = 'Select rubrique_user, nom_rubrique From rubriques Order By rand()'; 
$result_rub = mysql_query($sql_rub) or die(mysql_error()); 	
while($row_rub = mysql_fetch_assoc($result_rub)) 
{
$sql_img = 'Select chemin_image From users_images Natural Join users Where rubrique_user='.$row_rub['rubrique_user'].' Order By Rand() Limit 1';
$result_img = mysql_query($sql_img);
$row_img = mysql_fetch_assoc($result_img);	
		 //met les données dans un tableau

  
  {
  $tablo[]=$row_img;
  
  }
  //d"termine le nombre de colonnes
  $nbcol=3;

  echo '<table>';
  $nb=count($tablo);
  for($i=0;$i<$nb;$i++){
   
  //les valeurs &agrave; afficher
  $valeur1=$tablo[$i]['chemin_image'];
$taille= getimagesize($valeur1);
$affiche=118; 

            $image='uploads/$valeur1'; // adresse de l'image 
           
            $taille=getimagesize($valeur1); 
            $largeur=$taille[0]; 
            $hauteur=$taille[1]; 

            //si mon image est verticale ou carr&eacute;e 
            if ($hauteur>=$largeur) 
            { 
            $hauteur2=$affiche; 
            $largeur2=round(($hauteur2/$hauteur)*$largeur); 
            } 

            //si mon image est horizontale ou carr&eacute;e 
            else 
            { 
            $largeur2=$affiche; 
            $hauteur2=round(($largeur2/$largeur)*$hauteur); 
            } 
        } 
  if($i%$nbcol==0)
  echo '<tr >';
   echo '<td bgcolor="#ffffff"  width="125" height="125">
   <a href="',$valeur1,'" title="title" rel="splash.image">
   
   <div class="contour"><img src="',$valeur1,'" width=',$largeur2,' height=',$hauteur2,'></div>
   </a>
 </td>
';
  if($i%$nbcol==($nbcol-1))
  echo '</tr>';
  }
  echo '</table>';
?> </th>
      </tr>
    </table></td>
  </tr>
</body>
</html>

Si quelqu'un pouvait me dire comment faire...
merci d'avance
Modifié par pareto (23 Mar 2010 - 11:45)
Ok j'ai trouvé, une accolade etait mal positionnée (ça m'a pris 2 jours quand même !!!)
voici le script à présent
 require('connexion.inc.php'); 
	$sql_rub = 'Select rubrique_user, nom_rubrique From rubriques Order By rand()'; 
	$result_rub = mysql_query($sql_rub) or die(mysql_error()); 	
while($row_rub = mysql_fetch_assoc($result_rub)) 
		{
$sql_img = 'Select chemin_image From users_images Natural Join users Where rubrique_user='.$row_rub['rubrique_user'].' Order By Rand() Limit 1';
		$result_img = mysql_query($sql_img);
		$row_img = mysql_fetch_assoc($result_img);	
		 //met les données dans un tableau
  $tablo[]=$row_img;
  } 
  //détermine le nombre de colonnes
			$nbcol=3;
			echo '<table>';
			$nb=count($tablo);
			for($i=0;$i<$nb;$i++){ 
			//les valeurs &agrave; afficher
			$valeur1=$tablo[$i]['chemin_image'];
			$taille= getimagesize($valeur1);
			$affiche=122; 
            $image='uploads/$valeur1'; // adresse de l'image 
            $taille=getimagesize($valeur1); 
            $largeur=$taille[0]; 
            $hauteur=$taille[1]; 
            //si mon image est verticale ou carée 
            if ($hauteur>=$largeur) 
            { 
            $hauteur2=$affiche; 
            $largeur2=round(($hauteur2/$hauteur)*$largeur); 
            } 
            //si mon image est horizontale ou carr&eacute;e 
            else 
            { 
            $largeur2=$affiche; 
            $hauteur2=round(($largeur2/$largeur)*$hauteur); 
            } 
    
if($i%$nbcol==0)
echo '<tr >';
echo '<td  width="130" height="130" align="center" class="contour2">
   <a href="',$valeur1,'" title="image" rel="splash.image">
   	<div>
   		<img src="',$valeur1,'" width=',$largeur2,' height=',$hauteur2,'>
   			</div>
   </a>				
  </td> 
  <td><img src="img/pix.gif" width=12px"></td>';}
  if($i%$nbcol==($nbcol-1))
  echo '</tr>';
  echo '</table>';  
		


Smiley biggrin Smiley biggrin
Modifié par pareto (24 Mar 2010 - 16:59)