Crop thumbnail with PHP and CSS

[nomade]

My client ask for a page where I crop the thumbnail to be square evenly cropped from top, bottom ,left and right.

here's my code :

<?php	
$sql_diapo=mysql_query("SELECT * FROM diapo WHERE categorie = '".$_GET['categorie']."' ORDER BY ordre ASC"); 
while($ligne_diapo=mysql_fetch_array($sql_diapo)){ 

// ================ CALCULER HAUTEUT ET LARGEUR ================ 
$laphoto="http://irenefw.com/media/photo/petit/".$ligne_diapo['id_diapo'].".jpg "; 
$laphoto_g="http://irenefw.com/media/photo/grand/".$ligne_diapo['id_diapo'].".jpg "; 

list($width, $height) = getimagesize($laphoto); 

if($width > $height){ // paysage 
$trop_large = $width - $height; //largeur moins hauteur 
$coupe_large=$trop_large / 2; //resultat divisé par 2 (gauche-droite) 
$largeur=$coupe_large / $width * 100; // en pourcentage 
$largeur2=ceil($largeur); // arrondi 
} 
else{ // portrait 
$trop_haut = $height - $width; //hauteur moins largeur 
$coupe_haut=$trop_haut / 2; //resultat divisé par 2 (haut-bas) 
$hauteur=$coupe_haut / $height *100; // en pourcentage 
$hauteur2=ceil($hauteur); // arrondi à l'entier supérieur 
} 

echo "<div class=diapo>L:".$largeur2." H:".$hauteur2."<br><div style=' "; 
if (isset($largeur2)){ echo "left: -".$largeur2."%;"; echo "right: -".$largeur2."%;";} 
if (isset($hauteur2)){ echo " top: -".$hauteur2."%;"; echo " bottom: -".$hauteur2."%;";} 

echo " '><a class=fancybox href=".$laphoto_g." data-fancybox-group=".$_GET['categorie']." title='".$ligne_diapo['legende']."'><img src=".$laphoto."></a></div></div>"; 
}	

?>

The crop is working but not centered. You can view the result on this page : http://irenefw.com/fr/portfolio.php?categorie=1

Any suggestion will be welcomed.

 

[elppa]

Hi - your English reads a lot better than my French - so we may be better off this way around… I hope you understand

You can fix it with CSS.

First position the top left corner of the image in the middle of your picture frame (div.diapo).

div.diapo {
    float: left;
    width: 96px;
    height: 96px;
    margin: 0 4px 4px 0;
    overflow: hidden;
    position: relative;
}

div.diapo img {
    position: absolute;
    width: 240px;
    height: 320px;
    top: 50%;
    left: 50%
}

After this step you page should look like this (I have put a grey background on div.diapo to illustrate the positioning):

Then you can center the images in the frame with a negative margin -(height / 2) and -(width / 2).

div.diapo img {
    position: absolute;
    width: 240px;
    /* (240 / 2) */
    margin-left: -120px;
    height: 320px;
    /* (320 / 2) */
    margin-top: -160px;
    top: 50%;
    left: 50%;
}

The page should then look like this - with all images centered:

It might also be worth doing the resizing in PHP and creating thumbnails.

There is a good example of the PHP site of how to do proportional scaling:

Resampling an image proportionally

You could then write the thumbnail out as a file.

Important

You have a security vulnerability you have exposed to the world. Please read up on parameter validation and in particular PDO prepared statements.

PDOStatement::execute

Why you Should be using PHP's PDO for Database Access

 

[nomade]

Thank you very much, your solution is simple and accurate. I adapt it to my need and it work perfectly. Thanks for you time.