Cropping and centering images for the slider, the carousel and the listview (T)

Share
Terug
vrijdag 18 februari 2022

Team Polaris

Pour obtenir un bon affichage des images dans la vue du contenu sous forme de liste (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 pour permettre le rognage autour de la partie à afficher
  • Rogner et centrer correctement les sujets (voir exemple)
  • Utiliser des images de bonne résolution et respecter les dimensions en pixels contribuant à un bon rendu.

Dans Polaris, le processus d'édition 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

Schritt 1: Hochladen des Bildes

Laden Sie das komplette Bild mit möglichst viel Rand, um das Zuschneiden zu erleichtern

Schritt 1: Hochladen des Bildes

Schritt 2: Zuschneiden des Bildes

Hier muss das Bild für die verschiedenen Ansichten zugeschnitten werden, wobei zu beachten ist, dass bei einer der Ansichten, dem Schieberegler, der Titel und die Beschreibung das Bild überlagern. Diese sind je nach Länge der Texte unterschiedlich hoch.

Nachdem Sie den gewünschten Rahmen ausgewählt haben, klicken Sie auf "Zuschneiden".

Schritt 2: Zuschneiden des Bildes

Schritt 3: Zentrieren des Bildes in den drei Ansichten

Wenn Sie den Fokuspunkt mit dem Cursor / Maus bewegen, können Sie das zugeschnittene Bild von oben nach unten und von links nach rechts verschieben und das Ergebnis in den drei möglichen Ansichten des Schiebereglers, des Karussells und der Inhaltsliste betrachten.

Wenn das Ergebnis für die Ansicht(en) ausreichend ist, klicken Sie auf die Schaltfläche "Fokuspunkt setzen".

Schritt 3: Zentrieren des Bildes

Tipp

Für die Slider-Ansicht müssen Sie am unteren Rand des Bildes den notwendigen Platz für den Titel und den Text lassen, der als transparente Überlagerung erscheint.

Um eine optimale Anzeige zu gewährleisten, ist es manchmal notwendig, die Schritte 1 bis 3 mehrmals auszuführen.

Slider: Lassen Sie Platz für den Titel und den Text

Schritt 4: Wählen Sie die Größe des Bildes und der Beschreibungen

Wählen Sie den Breitenanteil, den das Bild in der Inhaltsdetailansicht einnehmen soll.

Geben Sie dann die Bildbeschriftung und den Text ein

Schritt 4: Wählen Sie das Verhältnis von Bild und Text