A partir de Ametys 4.10
Lorsqu’une image est insérée dans un champ de type image, Ametys permet de définir :
- une zone de recadrage, c’est-à-dire la partie de l’image qui sera conservée ;
- un point d’intérêt, aussi appelé POI, qui indique la zone importante de l’image.
Cette fonctionnalité est particulièrement utile lorsqu’une même image peut être affichée dans plusieurs formats selon les pages, les services ou les composants de la charte graphique : bannière horizontale, vignette carrée, illustration d’actualité, avatar, etc.
Le recadrage permet de supprimer les parties inutiles de l’image.
Le point d’intérêt permet quant à lui d’indiquer ce qui doit rester visible en priorité si l’image est ensuite adaptée automatiquement à un autre format.
Par exemple, pour une photo de personne, le point d’intérêt sera généralement placé sur le visage. Pour une photo de bâtiment, il pourra être placé sur l’élément principal de la façade.
Boîte de dialogue de recadrage
Après avoir sélectionné une image locale dans un champ image, la boîte de dialogue de recadrage s’affiche.
Elle permet de contrôler l’image avant son enregistrement :
- au centre, l’image à recadrer ;
- sur l’image, la zone de recadrage et le point d’intérêt ;
- à droite, les aperçus des formats d’affichage éventuellement déclarés par la charte graphique.
Définir la zone de recadrage
La zone de recadrage correspond à la partie de l’image qui sera conservée et stockée.
Pour définir cette zone :
- Cliquez sur l’image.
- Maintenez le clic enfoncé.
- Faites glisser le curseur pour dessiner la zone à conserver.
- Relâchez le clic lorsque la sélection vous convient.
La zone sélectionnée représente l’image finale qui sera enregistrée.
Pour supprimer le recadrage et revenir à l’image entière, cliquez en dehors de la sélection. L’image complète sera alors utilisée.
Définir le point d’intérêt (POI)
Le point d’intérêt, ou POI, est représenté par un marqueur circulaire rouge affiché sur l’image.
Il sert à indiquer la zone la plus importante de l’image : visage, objet principal, bâtiment, logo, détail significatif, etc.
Par défaut, le point d’intérêt est placé au centre de l’image ou du recadrage.
Pour le déplacer :
- Cliquez sur le marqueur rouge.
- Faites-le glisser vers la zone importante de l’image.
- Relâchez le clic lorsque le marqueur est correctement positionné.
Le point d’intérêt n’est pas un recadrage supplémentaire. Il sert de repère pour les affichages qui doivent adapter l’image à un format particulier.
Si vous modifiez la zone de recadrage et que le point d’intérêt se retrouve en dehors de celle-ci, il est automatiquement replacé au centre de la zone recadrée.
Aperçus des formats de recadrage
Le panneau situé à droite de la boîte de dialogue affiche les formats d’image déclarés par la charte graphique.
Ces aperçus permettent de vérifier comment l’image pourra être affichée dans différents contextes : format carré, format paysage, vignette, illustration principale, etc.
Chaque aperçu tient compte :
- de la zone de recadrage définie ;
- du point d’intérêt ;
- du ratio du format concerné.
Les aperçus sont également visibles directement sur l’image sous la forme de cadres en pointillés. Chaque cadre correspond à un format d’affichage.
Vous pouvez cocher ou décocher un aperçu pour l’afficher ou le masquer dans la boîte de dialogue.
Les aperçus sont uniquement indicatifs : ils permettent de contrôler le rendu probable de l’image dans différents formats, mais ils ne modifient pas l’image réellement stockée. Seule la zone de recadrage définit l’image enregistrée.
Si aucun aperçu n’est déclaré dans la charte graphique, le panneau des aperçus n’est pas affiché.
Déclarer les aperçus de recadrage dans la charte graphique
Les aperçus de recadrage sont déclarés par la charte graphique dans le fichier XML conf/image-crop-previews.xml de la charte graphique.
Chaque aperçu permet de simuler un format d’affichage utilisé par la charte graphique.
Un aperçu est défini par :
- un identifiant unique ;
- un libellé ;
- une largeur et une hauteur, utilisées pour déterminer le ratio du format ;
- une liste de types de contenus auxquels l’aperçu s’applique.
L’application aux types de contenus peut fonctionner :
- en inclusion, pour limiter l’aperçu à certains types de contenus ;
- en exclusion, pour l’appliquer à tous les types de contenus sauf certains.
Exemple de configuration
<image-crop-previews> <preview id="newsCarousel" width="510" height="395"> <label i18n="true">SKIN_CROP_PREVIEW_HOME_NEWS_CAROUSEL</label> <content-types mode="include"> <content-type id="org.ametys.plugins.news.Content.news"/> </content-types> </preview> <preview id="userAvatar" width="100" height="100"> <label i18n="true">SKIN_CROP_PREVIEW_AVATAR</label> <content-types mode="include"> <content-type id="org.ametys.plugins.userdirectory.Content.user"/> </content-types> </preview> <preview id="mainIllustration" width="700" height="500"> <label i18n="true">SKIN_CROP_PREVIEW_MAIN_ILLUSTRATION</label> <content-types mode="exclude"> <content-type id="org.ametys.plugins.userdirectory.Content.user"/> </content-types> </preview> </image-crop-previews>
Dans cet exemple :
- newsCarousel propose un aperçu destiné aux actualités ;
- userAvatar propose un aperçu carré pour les images d’utilisateurs ;
- mainIllustration propose un aperçu au format 7/5 pour tous les contenus sauf les utilisateurs.
Ces aperçus permettent aux contributeurs de vérifier que l’image reste lisible dans les principaux formats utilisés par le site.
Héritage des aperçus
Une charte graphique peut hériter d’une charte parente déclarant déjà des aperçus de recadrage.
Dans ce cas, la charte enfant n’a pas besoin de redéclarer tous les aperçus. Elle peut compléter ou adapter uniquement les aperçus nécessaires dans son propre fichier conf/image-crop-previews.xml
La charte enfant peut ainsi :
- redéfinir les dimensions d’un aperçu existant ;
- modifier son libellé ;
- modifier les types de contenus auxquels il s’applique ;
- ajouter de nouveaux aperçus ;
- supprimer des aperçus hérités, lorsque ceux-ci ne sont pas pertinents pour la charte.
Pour redéfinir un aperçu hérité, il faut déclarer un aperçu avec le même identifiant id que celui défini dans la charte parente.
Seules les propriétés redéfinies dans la charte enfant sont modifiées. Les autres propriétés de l’aperçu restent héritées de la charte parente.
Exemple de surcharge :
<image-crop-previews> <!-- Modification des dimensions de l'aperçu --> <preview id="newsCarousel" width="580" height="410"/> <!-- Modification du libellé de l'aperçu --> <preview id="userAvatar"> <label i18n="false">Image de profil</label> </preview> <!-- Modification des types de contenus auxquels l'aperçu s'applique --> <preview id="mainIllustration"> <content-types mode="exclude"> <content-type id="org.ametys.plugins.userdirectory.Content.user"/> <content-type id="org.ametys.plugins.faq.Content.faq"/> </content-types> </preview> <!-- Suppression d'un aperçu --> <preview id="banner2cols" remove="true"/> <!-- Ajout d'un nouvel aperçu --> <preview id="agenda" width="400" height="200"> <label i18n="false">Agenda</label> <content-types mode="include"> <content-type id="org.ametys.plugins.news.Content.news"/> </content-types> </preview> </image-crop-previews>
Bloquer l'héritage
Pour désactiver l'héritage, utiliser l'attribut inherit="false" sur la balise racine
<image-crop-previews inherit="false"> <!-- Définition des aperçus propre à la charte enfant --> </image-crop-previews>
Retour en haut