[Smarty] Redimensionner une image

smarty_plugin

Il existe diverses techniques pour redimensionner une image sur internet :

  • La technique dynamique : Utiliser une librairie PHP (au hasard, GD) qui permettrait de créer une nouvelle image dans laquelle coller une partie seulement de l’image originale. C’est compliqué, long, lourd et surtout, ça ne marche pas à tous les coups (pas de prise en compte des animations GIF, de la transparence PNG, etc …).
  • La technique statique : Rien ne vaut le bon vieux HTML (ou pas), on renseigne la hauteur et la largeur est calculée automatiquement, ou alors on rentre les deux et l’image est toute déformée. Quel plaisir !
  • La technique néandertalienne : On télécharge la photo sur son ordinateur, on ouvre Paint, on crop, et hop ! Mais il ne faut pas pousser mémé dans les orties, quand on a quelques dizaines de milliers de photos par jour à redimensionner, il faudrait alors un bon paquet de stagiaire pour en venir à bout.

Bien sûr, je ne peux pas tout lister, d’une part parce que je ne les connais pas toutes, d’autre part, parce que celles-ci évoluent tous les jours. Ainsi, je vais proposer, aux utilisateurs de smarty, un petit plugin de ma conception que j’utilise tous les jours. Le concept est très simple : un peu de php et un peu de CSS pour une image parfaitement adaptée et centrée sur tous les navigateurs web, que j’ai appelé, la cropbox.

Un peu de CSS

.cropbox {
overflow: hidden;
display: inline-block;
}

.cropbox img {
margin:auto;
}

Jusque là, pas vraiment besoins d’explication.

Un peu de PHP

Construisons notre plugin smarty (voir le tutoriel) ! Nous allons donc créer une fonction smarty que nous appellerons « crop » :

<?php
function smarty_function_crop($params, &amp;amp;amp;amp;amp;$smarty) {

$info = @getimagesize($params['img']); // On récupère les informations liées à l'image

if(!$info): // Si l'image n'existe pas
return false;
endif;

// Définition des styles de la cropbox
if(isset($params['align'])): // On imite le paramètre HTML "align"
$style .= "float: ".$params['align'].";";
endif;

if(isset($params['border'])): // On définie la présence d'une bordure
$style .= "border: ".$params['border'].";";
endif;

if(isset($params['margin'])): // On défini les marges
$style .= "margin: ".$params['margin'].";";
endif;

// On calcules le format optimal de l'image ainsi que les marges associées

$img = $params['img'];
$alt  = $params['alt'];
$x_orig  = $info[0];
$y_orig = $info[1];
$x_crop = $params['width'];
$y_crop = $params['height'];
$margin_x = 0;
$margin_y = 0;
$ratio_orig = $y_orig/$x_orig;
$ratio_crop = $y_crop/$x_crop;
$ratio_x = $x_crop/$x_orig;
$ratio_y = $y_crop/$y_orig;

// On calcul les dimensions en se basant sur la hauteur fixe
$y_final  = $y_crop;
$x_final  = $x_orig * $ratio_y;
$margin_x = -($x_final - $x_crop)/2;
if($x_final < $x_crop): // Si ça ne colle pas
$y_final  = $y_orig * $ratio_x;
$x_final  = $x_crop;
$margin_y = -($y_final - $y_crop)/2;
$margin_x = 0;
endif;

return '<span style="width:'.$x_crop.'px; height:'.$y_crop.'px; '.$style.'">
<img src="'.$img.'" alt="'.$alt.'" width="'.$x_final.'" height="'.$y_final.'" style="margin-left:'.$margin_x.'px; margin-top:'.$margin_y.'px;" />
</span>';
} ?>

Ce qui donne

 {crop img="http://www.tiloweb.com/claramorgan.png" width="110" height="150"} 

Votre image sera parfaitement centrée dans le cadre aux bonnes dimensions.

Rendu du plugin cropbox

Image 245×210 redimensionnée en 110×150 sans être déformée.

 

PS : Oui, j’ai choisi comme modèle Clara Morgan, simplement pour optimiser mon SEO : Sexy Engine Optimizer, histoire de fidéliser mes lecteurs masculins.