Recadrer une image avec imagemagick sous eZpublish

Bonjour,

On a besoin de temps en temps de centrer une image, qui est réduite, dans un bloc. Soit on fait appel au CSS avec des hauteurs fixes, soit on fait appel au javascript sachant que le JS peut être appelé avant que l’image soit chargée, du coup le JS ne peut pas lire les dimensions de l’image pour un centrage correct.

Le problème est facile à résoudre sous ezpublish en utilisant imagemagick pour recadrer l’image à l’intérieur d’une autre image qui elle a des dimensions fixes.

Créer une image au format png (transparent, couleur, ou avec un motif) et placer ce fichier dans votre design

ex: /extension/tonextension/design/tondesign/images/vide.png 

Ensuite modifier le fichier image.ini.append.php dans votre répertoire settings/override

[ImageMagick]
# Ça permet de créer un calque avec une gravité au centre
Filters[]=composite=-gravity center -composite extension/tonextension/design/tondesign/images/vide.png 

[AliasSettings]
AliasList[]=monlogo

[monlogo]
Reference=reference
#redimensionner
Filters[]=geometry/scaledownonly=largeur;hauteur
# applique le filtre et balance logo_adherent_home dans le calque en suivant la gravité
Filters[]=composite

Il se pourrait que les images téléchargées soient en mode CMYK, et ceci causera un problème d’affichage sous Internet Explorer 6. Pour les convertir en RGB, vous pouvez créer un filtre :

Filters[]=colorspace=RGB

et pour réduire le poids de ton image pour une meilleure optimisation, il suffit d’ajouter le filtre suivant:

Filters[]=optimize

Voila tout, et n’oubliez pas de vider les caches :)

Nb : Cette manipulation ne fonctionne pas avec la version 6.3.7 d’imagemagick

Pour verifier la version d’IM en ligne de commande  : convert -version

Bon recadrage

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>