Problème de crop avec php list et CSS
Nomadique
Messages postés
6
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Mon client demande que les miniatures soit 'croppés' carré au centre de l'image.
Pour ce faire, j'utilise la commande PHP list et du css
Voici le 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>";
}
?>
Le crop se fait mais pas au centre de l'image et curieusement j'ai des images qui ont une valeur hauteur et largeur alors qu'il s'agit d'un else ???
On peut voir le résultat à http://irenefw.com/fr/portfolio.php?categorie=1
Il s'agit probablement d'un bête problème de logique mais je bloque dessus, vos suggestions seraient les bienvenus.
Pour ce faire, j'utilise la commande PHP list et du css
Voici le 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>";
}
?>
Le crop se fait mais pas au centre de l'image et curieusement j'ai des images qui ont une valeur hauteur et largeur alors qu'il s'agit d'un else ???
On peut voir le résultat à http://irenefw.com/fr/portfolio.php?categorie=1
Il s'agit probablement d'un bête problème de logique mais je bloque dessus, vos suggestions seraient les bienvenus.
A voir également:
- Problème de crop avec php list et CSS
- List disk - Guide
- Easy php - Télécharger - Divers Web & Internet
- Directory list & print - Télécharger - Divers Utilitaires
- Expert php pinterest - Télécharger - Langages
- Liste déroulante de choix excel - Guide
3 réponses
Salut,
Une autre solution possible uniquement en css en utilisant les propriétés background-size et background-position (nécessite de remplacer les balises img par des div avec background-image). Exemple :
http://jsfiddle.net/283tss75/
Bonne journée
Une autre solution possible uniquement en css en utilisant les propriétés background-size et background-position (nécessite de remplacer les balises img par des div avec background-image). Exemple :
http://jsfiddle.net/283tss75/
Bonne journée
Merci Pitet, mais pour des raisons de référencement et de manipulation je ne veux pas utiliser "background".
merci quand même pour ta proposition,
Nomade
merci quand même pour ta proposition,
Nomade
En regardant un peu ton code, il semble que ton problème vient de l'utilisation de isset() sur des variables initialisées à l'intérieur de ta boucle.
En effet, au premier tour de boucle uniquement une seule des 2 variables $largeur2 et $hauteur2 est définie (en fonction de la première image).
Mais dès qu'une de ces 2 variables est initialisées, elle le reste pour les prochains tour de boucle.
La solution la plus simple pour ne pas modifier ton code est de supprimer ces 2 variables au début de chaque tour de boucle, soit :
Bonne journée
En effet, au premier tour de boucle uniquement une seule des 2 variables $largeur2 et $hauteur2 est définie (en fonction de la première image).
Mais dès qu'une de ces 2 variables est initialisées, elle le reste pour les prochains tour de boucle.
La solution la plus simple pour ne pas modifier ton code est de supprimer ces 2 variables au début de chaque tour de boucle, soit :
while($ligne_diapo=mysql_fetch_array($sql_diapo)){
unset($largeur2);
unset($hauteur2);
Bonne journée
