Vignettes photos rectangulaires et non carrés

Question

Bonjour à tous,! Petit problème à résoudre: J'utilise le pluging "Djuve" permettant d'avoir un système de présentation photos avec vignettes. db->fetchArray("SELECT * FROM ".PX."media, ".PX."objects_prefs WHERE media_ref_id = '$rs[id]' AND obj_ref_type = 'exhibit' AND obj_ref_type = media_obj_type ORDER BY media_order ASC, media_id ASC"); // content text if (!$pages) return $s; $i 1; $a ''; $b = ''; $total = count($pages); // people will probably want to customize this up foreach ($pages as $go) { $title ($go['media_title'] '') ? '' : $go['media_title'] . ' '; $caption ($go['media_caption'] '') ? ' ' : $go['media_caption']; $png ($go['media_mime'] 'png') ? " class='png'" : ''; $a .= " "; $x = getimagesize(DIRNAME . GIMGS . '/' . $go['media_file']); $off ($i 1) ? "style='display: block;'" : "style='display: none;'"; $next ($i $total) ? 1 : $i+1; $b .= " {$title} {$caption} "; $i++; } // image $s .= " "; $s .= $b; $s .= " "; $s .= " "; // thumbs $s .= " "; $s .= " "; $s .= $a; $s .= " "; $s .= " "; $s .= $txt; $s .= " "; // exhibition text make sure process html switch is off - use .css to define 'info' and 'info' class $s .= " ".$rs['content'] ; $s .= " "; $s .= " "; return $s; } function dynamicCSS() { return "#d-image img {border: 0px solid #f2f2f2; margin: 9px 0px 0px 0px; } #d-thumbs { margin: 0px 0px 0px 0px;} #d-thumbs img {padding: 0; border: none; height: 40px; width: 40px; } #d-image { }; #text { margin-left: 1em; float: right; width: 200px; }"; #info {width: 800; border: none;} } ?> Ce plugging génère des vignettes carrées (ex; http://www.juliedebieve.com/index.php?/stylisme01/creation/ ), mais je souhaite avoir des vignettes de taille rectangulaire lorsque je modifie le code Css: #d-thumbs img {padding: 0; border: none; height: 40px; width: 40px; } en #d-thumbs img {padding: 0; border: none; height: 40px; width: auto; } les vignettes restent carrées ?! par contre en utilisant le code: #d-thumbs img {padding: 0; border: none; height: 40px; width: 80px; } les images des vignettes sont écrasées et étirées mais j'obtiens des rectangle. Comment faire pour obtenir des rectangles, qui même si leurs tailles n'est pas proportionnel à celles des photos d'origine permettant d'avoir des vignettes non déformées. En faite j'aimerais le même principe qu'avec les carrés sauf que ce sont des rectangles. Faut-il changer quelque chose dans le code php ? Merci pour votre réponse

bobertin89 · Answer

Salut Donzus, je ne cois pas que width:auto; soit valable... Ce qui est sur : - Si tu ne spécifie pas de height dans ton css, les proportions de l'image seront respectées. Par contre, ta largeur sera fixe et ce sera la hauteur qui changera. - Si tu veux que ce soit ta hauteur qui soit fixe, il faut que tu calcul ta largeur en php pour que la hauteur soit de 40px sans modifier les proportions. La fonction getimagesize te renvoi un tableau dans lequel l'index 0 est la largeur. Ton $x[0] est donc la largeur de ton image, et $x[1] est la hauteur. Après, tu fais une règle de trois pour trouver la largeur qui correspond à une hauteur de 40px : (si ton image fais 300 de large par 200 de haut, ta nouvelle hauteur doit être(300X40)/200). Tu peux mettre ta nouvelle largeur dans le css avec ta function dynamicCss En espérant avoir été assez clair. Bon dev

TychoBrahe · Answer

Salut,

Comment faire pour obtenir des rectangles, qui même si leurs tailles n'est pas proportionnel à celles des photos d'origine permettant d'avoir des vignettes non déformées.
Deux solutions parmis d'autres :
1. Tu fais un script php qui manipule l'image d'origine afin d'obtenir une image de taille fixe qui te permet donc d'ajouter la bordure nécessaire pour obtenir la bonne taille tout en gardant les bonnes proportions.
2. Tu émule le principe précédent en utilisant HTML/CSS. Dans ce cas, tu créé un bloc de taille fixe qui simulera la bordure (avec une couleur de fond afin de le voir) et qui contiendra l'image, image dont les dimensions maximales en longueur et largeurs seront celles du cadre (dimensions maximales, max-width et max-height).

je ne cois pas que width:auto; soit valable...
Tu devrais réviser le CSS, "width: auto;" est parfaitement valable et c'est même sa valeur par défaut.

donzus · Answer

Bonjour à vous,
merci pour vos réponses!


En faite j'aimerais que les vignettes rectangulaires gardent le même principe que les carées.
Si mon bloc vignette n'est pas proportionnel à l'image, celle-ci doit être rognée et non déformée.

Les vignettes sont apparement générées par le code suivant qui se trouve dans media.php.

* Returns array of file size
* (natural dimensions)
*
* @param integer $maxwidth
* @return array
*/
function resizing($maxwidth)
{
$width_percentage = $maxwidth / $this->size[0];
$height_percentage = $maxwidth / $this->size[1];

if (($this->size[0] > $maxwidth) || ($this->size[1] > $maxwidth))
{
if ($width_percentage <= $height_percentage)
{
$this->new_size['w'] = round($width_percentage * $this->size[0]);
$this->new_size['h'] = round($width_percentage * $this->size[1]);
} 
else
{
$this->new_size['w'] = round($height_percentage * $this->size[0]);
$this->new_size['h'] = round($height_percentage * $this->size[1]);
}	
}
else
{  // square images ?
$this->new_size['w'] = $this->size[0];
$this->new_size['h'] = $this->size[1];
}
}

/**
* Returns array of file size
* (square thumbnails)
*
* @param void
* @return array
*/
function sys_resize()
{
$this->sys_size['w'] = $this->size[0];
$this->sys_size['h'] = $this->size[1];

if ($this->sys_size['w'] > $this->sys_size['h']) 
{
   $this->offset['w'] = ($this->sys_size['w'] - $this->sys_size['h'])/2;
   $this->offset['h'] = 0;
   $this->sys_size['w'] = $this->sys_size['h'];
} 
elseif ($this->sys_size['h'] > $this->sys_size['w']) 
{
   $this->offset['w'] = 0;
   $this->offset['h'] = ($this->sys_size['h'] - $this->sys_size['w'])/2;
   $this->sys_size['h'] = $this->sys_size['w'];
} 
else
{
$this->offset['w'] = 0;
$this->offset['h'] = 0;
$this->sys_size['w'] = $this->sys_size['h'];
}
}



On m'a conseillé de modifier les lignes suivantes en leur donnant une valeur en pixel.
Mais le problème reste le même, les vignettes se déforment!
Peut-être faut-il modifier autre chose dans le code ?

soit:

	function sys_resize()
{
$this->sys_size['w'] = $this->size[0]; 
$this->sys_size['h'] = $this->size[1]; 

en

		$this->sys_size['w'] = '35px'; // ta largeur en pixel 
$this->sys_size['h'] = '55px';// ta hauteur en pixel 

Après avoir fait ces changement, j'adapte le css dans le plugging Djuve mais rien ne change:


    #d-thumbs img {padding: 0; border: none; height: 55px; width: 35px ; }


Mes connaissances en php sont très limitées, 
j'arrive à faire deux trois changement en suivant des conseils, mais de là à en écrire c'est autre chose. Si vous avez une solution simple, ce serait génial.

merci merci

TychoBrahe · Answer

Salut,

Si mon bloc vignette n'est pas proportionnel à l'image, celle-ci doit être rognée et non déformée.
Une autre solution en HTML/CSS un peu plus adaptée à ce cas là : tu met l'image en background d'un bloc à dimensions fixes.

Mes connaissances en php sont très limitées,
Ça tombe bien, ce n'est pas du PHP qu'il faut faire, enfin très peu vu que dans le code que tu montre tout est mélangé.

donzus · Answer

ok merci,


Une autre solution en HTML/CSS un peu plus adaptée à ce cas là : tu met l'image en background d'un bloc à dimensions fixes. 




mais heuu,... suis un peu perdu
concrètement je dois modifier/rajouter quoi, dans quel code?

donzus · Answer

une âme généreuse pourrait-elle m'orienter ?
:) merci

Vignettes photos rectangulaires et non carrés

6 réponses

Votre réponse

Discussions similaires