How to work with main images in articles (v01)

viernes, 18 de agosto de 2023

Team Polaris

A partir de la version R1.3.6, l'ajout d'une image principale fait appel à de nouvelles fonctions. L'image principale correspond à l'image du premier bloc de contenu dans les articles tels qu'événements, lettres, actualités, projets et autres. Elle apparaît dans le Slider, le Carrousel, la vue en liste, le mode "portrait" (sur mobile) et la page détaillée de l'article. Les autres images des blocs de contenu sont ajoutées de la même manière qu'auparavant. Ceci est décrit dans l'article "Recadrage et centrage des images pour le Slider, le Carrousel et la liste".

Pour réussir une bonne mise en page, vous devez toujours utiliser des images dont la résolution et la taille sont suffisantes. Si vous utilisez des images de faible résolution, votre site web pourrait présenter un piètre aspect.

Lorsque vous choisissez des images sur Internet, veillez à respecter les lois sur les droits d'auteur et les éventuelles conséquences juridiques en cas de non-respect de ces lois.

Une image pour 4 formats possibles.

Etape 1: télécharger l'image

Téléchargez l'image en la faisant glisser dans la zone de téléchargement ou en cliquant dans la zone de téléchargement et en sélectionnant l'image dans votre système de fichiers.

Taille maximale de fichier

Etape 2: Recadrer l'image

Utilisez les boutons bleus en haut pour effectuer un zoom arrière, un zoom avant, déplacer ou faire pivoter l'image, ou utilisez les points bleus sur le pourtour de l'image pour redimensionner l'image à l'aide de la souris.

Les lignes blanches en pointillé et la croix blanche au milieu vous aident à voir ce qui sera visible.

À cette étape, vous ne pouvez pas ajouter d'espace blanc à l'image. Cela ne devrait cependant pas être nécessaire, ainsi que vous le verrez à l'étape suivante. Si vous voulez quand même le faire, vous devrez le faire dans un autre programme, hors Polaris, et télécharger à nouveau l'image.

Etape 3: choisir le mode d'affichage

Vous avez le choix entre deux modes d'affichage :

3.1 Réglage "Couvrir toute la zone avec l'image"" sur ON.

3.2 Réglage de "Couvrir toute la zone avec l'image" sur OFF (réglage de la zone de mise au point).

Pour visualiser les effets, basculez le bouton situé sous l'image.

Etape 3.1: Mode d'affichage = Réglage "Couvrir toute la zone avec l'image" sur ON

Avec ce mode d'affichage, l'intégralité de l'image reste visible dans tous les formats d'affichage.

Selon le format de l'image, un espace blanc peut être ajouté à droite et à gauche de l'image dans le slider ou dans les portraits, ou au-dessus et au-dessous de l'image dans le carrousel. Dans la liste et dans la vue détaillée, la taille de l'image peut être ajustée proportionnellement.

Vous pouvez voir les résultats dans les exemples de format ci-dessous.

Etape 3.2: Mode d'affichage = Réglage "Couvrir toute la zone avec l'image" sur OFF (point de focalisation)

Ce mode d'affichage remplit entièrement le format disponible en recadrant l'image aux dimensions du format et en maintenant le point de focalisation au centre de l'image. Aucune zone blanche n'est ajoutée. Par contre, l'image peut être légèrement recadrée pour s'adapter au format disponible.

Un petit cercle blanc apparaît dans l'image et peut être déplacé à l'aide de la souris pour définir la zone de focalisation.

Déplacez la zone de focalisation et observez les effets dans les exemples de formats ci-dessous.

Régler le point de focalisation

Etape 4. Définir la taille de l'image en %

Enfin, vous pouvez définir la taille de l'image en %. Cela n'a d'impact que sur l'affichage dans la page de détail. 

Une bonne pratique consiste à mentionner la source de votre image si vous souhaitez publier l'article pour que tout le monde puisse le voir.

N'oubliez pas de cliquer sur le bouton "SAUVEGARDER" pour enregistrer l'article !

Taille d'image size en %