Vignettes photos rectangulaires et non carrés

Signaler
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011
-
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011
-
Bonjour à tous,!
Petit problème à résoudre:
J'utilise le pluging "Djuve" permettant d'avoir un système de présentation photos avec vignettes.


<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Djuve
*
* Exhibition format
* 
* @version 0.1 (experimental copy&paste)
* @author Kjetil Djuve (http://www.kjetildjuve.com/)
* @based on/mix of: Vaska's Iwakami/Backgrounded/Deux Column Exhibition formats (http://indexhibit.org/)
*/


// defaults from the general libary - be sure these are installed
$exhibit['dyn_css'] = dynamicCSS();
$exhibit['dyn_js'] = dynamicJS();
$exhibit['exhibit'] = createExhibit();

function dynamicJS()
{
return "function show_image(id)
{

$('.pic').hide();
$('#p' + id).fadeIn();
return false;
}";
}

function createExhibit()
{
$OBJ =& get_instance();
global $rs;

$pages = $OBJ->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 .= "\n\n";

$x = getimagesize(DIRNAME . GIMGS . '/' . $go['media_file']);

$off ($i 1) ? "style='display: block;'" :  "style='display: none;'";

$next ($i $total) ? 1 : $i+1; 

$b .= "\n
<djuvetitreleg>{$title}</djuvetitreleg>
{$caption}

\n";

$i++;
}
// image
$s .= "
\n";
$s .= $b;
$s .= "
\n";
$s .= "
\n\n";




// thumbs
$s .= "
\n";
$s .= "
\n";
$s .= $a;
$s .= "
\n";
$s .= "
";
$s .= $txt;
$s .= "
\n";
// exhibition text make sure process html switch is off - use .css to define 'info' and 'info' class
$s .= "
".$rs['content'] ;
$s .= "
\n";


$s .= "
<!-- -->
\n\n";



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

6 réponses

Messages postés
38
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
2 septembre 2011

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 :
<?php
$nouvellelargeur=($x[0]X40)/$x[1];?>

(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
<?php
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; width:".$nouvellelargeur"; }
    #d-image { };
#text { margin-left: 1em; float: right; width: 200px; }";

}
?>



En espérant avoir été assez clair.
Bon dev
Messages postés
1309
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
5 juin 2013
12
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.
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011

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
Messages postés
1309
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
5 juin 2013
12
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é.
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011

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?
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011

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