Ritagliare e centrare le immagini per lo slider, il carosello e l'elenco (e01)

venerdì 18 febbraio 2022

Olivier Gardiol, Polaris Team

Per ottenere una buona presentazione delle immagini nella vista elenco del contenuto (calendario, notizie, azioni, ecc.), e se necessario nel cursore e nel carosello, è importante

  • Avere immagini con margini di larghezza e altezza sufficienti per permettere il ritaglio intorno alla parte da visualizzare
  • Ritagliare e centrare correttamente i soggetti (vedi esempio)
  • Usare immagini di buona risoluzione e attenersi alle dimensioni dei pixel che contribuiscono a una buona resa.

L'editing in Polaris è fatto nei seguenti tre passi:

  1. Passo 1: Scaricare l'immagine completa
  2. Passo 2: Ritaglio dell'immagine per la pubblicazione nella vista elenco e, se necessario, nella vista cursore e/o carosello
  3. Passo 3: Centratura X-Y dell'immagine per queste 3 viste possibili

Un'immagine per 3 possibili visualizzazioni

Passo 1: Caricare l'immagine

Carica l'immagine completa con più margini possibili per facilitare il ritaglio

Passo 1: caricare Passo 1: caricare l'immagine

Passo 2: Ritagliare l'immagine

Si tratta di ritagliare l'immagine per le varie viste, tenendo presente che se una delle viste è il cursore, il titolo e la descrizione si sovrappongono all'immagine. Questi sono di altezza variabile a seconda della lunghezza dei testi.

Dopo aver scelto la cornice desiderata, clicca su "Crop".

Passo 2: Ritagliare l'immagine

Passo 3: Centrare l'immagine nelle tre viste

Spostando il punto di messa a fuoco con il cursore puoi spostare l'immagine ritagliata dall'alto in basso e da sinistra a destra e osservare il risultato nelle tre viste possibili del cursore, del carosello e dell'elenco dei contenuti.

Quando il risultato della/e vista/e è adeguato, clicca sul pulsante "Imposta punto di messa a fuoco".

Passo 3: Centrare l'immagine nelle tre viste

Suggerimento

Per la visualizzazione a scorrimento, è necessario lasciare il margine necessario nella parte inferiore dell'immagine per il titolo e il testo che apparirà come una sovrapposizione trasparente

Per assicurare la migliore resa, a volte è necessario fare i passi da 1 a 3 più di una volta

Slider: lascia spazio al titolo e al testo

Passo 4: Scegliere le dimensioni dell'immagine e delle descrizioni

Scegli la proporzione di larghezza che l'immagine deve occupare nella vista di dettaglio del contenuto poi inserisci l'etichetta dell'immagine e il testo

Passo 4: scegliere il rapporto tra l'immagine e il testo