Recadrage et centrage des images pour le slider, le carrousel et la liste (e01)

Share
vendredi 18 février 2022

Team Polaris

Pour atteindre une bonne présentation des images la vue liste du contenu (calendrier, actualités, actions, etc...), et le cas échéant dans le slider et dans le carrousel , il est important de

  • Disposer d'images avec suffisamment de marge en largeur et hauteur permettant le rognage autour de la partie à afficher
  • Rogner et centrer correctement les sujets (voir exemple)
  • Utiliser des images de bonne résolution et se tenir dans les dimensions en pixels contribuant à un bon rendu.

Pour ce faire le processus suit dans Polaris les trois étapes suivantes:

  1. Etape 1: Téléchargement de l'image complète
  2. Etape 2: Rognage de base de l'image en vue de sa publication dans la vue liste, et le cas échéant dans sa vue du slider et/ou du carrousel
  3. Etape 3: Centrage X-Y de l'image pour ces 3 vues possibles

Une image pour 3 vues possibles

Etape 1: Télécharger l'image

Télécharger l'image complète avec le plus de marges possibles pour faciliter le recadrage

Etape 1: télécharger l'image

Etape 2: Recadrer l'image

 Il s'agit de recadrer l'image en vue de sa ou ses diverses vues, en tenant compte que si une des vues est le slider il faut tenir compte de la surimpression du titre et de la description. Ces derniers sont de hauteur variable selon la longueur des textes.

Après avoir choisi le cadre désiré, cliquez sur "Recadrer"

Etape 2: recadrer l'image

Etape 3: Centrer l'image dans les trois vues

Déplacer avec son curseur le point de focalisation permet de déplacer l'image rognée de haut en bas et de gauche à droite et d'observer le résultat dans les trois vues possibles du slider, du carrousel et de la liste de contenus. 

Lorsque le résultat pour la ou les vues est adéquat, on clique sur le bouton "Définir le point de focalisation"

Etape 3: ajuster le point de focalisation

Astuce

Pour la vue slider il faut avec le point de focalisation laisser en bas d'image la marge nécessaire pour  le titre et le texte qui apparaîtront en surimpression transparente

Pour assurer le meilleur rendu il faut parfois faire plus d'une fois les étapes 1 à 3.

Slider: laisser de la place pour le titre et le texte

Etape 4: choisir la taille de l'image et les descriptifs

Choisir la proportion en largeur que l'image doit occuper dans la vue détaillée du contenu

puis saisir le libellé de l'image et le texte

Etape 4: choisir le rapport de l'image et le texte