Crop thumbnail with PHP and CSS

Discussion in 'Web Design and Development' started by nomade, Dec 5, 2014.

  1. nomade macrumors member

    nomade

    Joined:
    Dec 2, 2006
    #1
    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 :

    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.
     
  2. elppa, Dec 5, 2014
    Last edited: Dec 5, 2014

    elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    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).

    Code:
    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):

    [​IMG]

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

    Code:
    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:

    [​IMG]

    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
     

    Attached Files:

  3. nomade thread starter macrumors member

    nomade

    Joined:
    Dec 2, 2006
    #3
    Thank you very much, your solution is simple and accurate. I adapt it to my need and it work perfectly. Thanks for you time.
     

Share This Page