Riferito a:

  • tipo di contenuto utilizzato: testo con immagini o solo immagini
  • bootstrap per TYPO3, tutte le versioni

Premessa:

il personale tecnico della struttura informatica non effettua elaborazioni di loghi, come descritto in questa pagina. Si rimanda pertanto al tecnico che si occupa del sito, grafico di fiducia e/o redattore che può seguire le istruzioni per gestire correttamente i contenuti.

Descrizione del problema

il redattore desidera pubblicare un gruppo di loghi, disposti in una o più righe, come nell'esempio seguente, e le immagini caricate appaiono tutte disallineate e differenti in altezza e larghezza. Con il risultato di ottenere effetti indesiderati e loghi troppo differenti nelle dimensioni di pubblicazione.

come si nota nell'output più sopra, i loghi sono allineati tutti in alto; hanno dimensioni differenti (altezza e larghezza); alcuni sono disposti in orizzontale a causa della forma (logo della Regione Fvg e dell'Acquedotto Poiana). Il logo CAFC sembra eccessivamente grande rispetto gli altri e cosi' via. L'aspetto è piuttosto disordinato e poco estetico.

Soluzioni possibili

L'inestetismo deriva da alcuni fattori, che non dipendono dal CMS TYPO3 in quanto il CMS non è un programma di grafica nè può risolvere questi problemi.

Le cause sono molteplici e assimilabili alle seguenti:

  • i loghi hanno dimensioni e risoluzioni differenti
  • i loghi hanno proporzioni  / base e altezza / differenti
  • TYPO3 CMS allinea le immagini al bordo superiore

pertanto, prima leggere le seguenti note:

  • l'inserimento dei loghi avviene facendo l'upload di immagini separate e utilizzate singolarmente nel server
  • il sistema permette di configurare l'output in: 1,2,3,4,6 colonne, secondo le regole del bootstrap
  • pertanto se scelte tre colonne (come ora si vede nel sito) e ci sono 6 loghi questi appaiono in due righe
  • essendo tutti differenti nelle dimensioni alcuni appaiono più grandi, altri più piccoli
  • altri sono disposti in orizzontale (es- Regione FVG) e pertanto appaiono più piccoli in quanto...
  • ogni logo viene ospitato nella colonna assegnata; quindi su 3 colonne ognuna è larga il 33%. Disponendo ad esempio di una immagine di 600px questa sarà ridimensionata sulla colonna al 100% della larghezza della stessa.... ma....
  • se l'immagine è più piccola, es. 180px x 80, questa sarà sistemata al centro della colonna nella grandezza massima della immagine, quindi non allargata, pena la perdita della risoluzione.
  • variando il numero delle colonne si ottengono differenti effetti
  • alcuni loghi hanno un ingombro in verticale altri in orizzontale pertanto non possono essere ottimizzati nell'output
  • quelli in orizzontale dovrebbero essere sostituiti (se esistono) con analoghi ad ingombro verticale
  • la variazione la fa direttamente online il redattore cosi' da trovare la soluzione estetica più gradita / migliore
  • l'allineamento delle immagini avviene sul bordo superiore
  • pertanto desiderando uniformarli va chiarito che nessun CMS o prodotto è in grado di disporre online di un editor grafico o programma pari a Photoshop
  • indifferentemente dal metodo scelto (vedi sotto) il redattore potrà collegare ogni logo a un sito esterno
  • si sconsiglia di sistemare tutti i loghi all'interno di una unica immagine perchè apparirebbero troppo piccoli nelle periferiche smart, e non sarebbe possibile collegare ogni logo ad un sito esterno

 

e scegliere una soluzione tra quelle proposte:

primo metodo

  • disponendo di photoshop o altro programma di grafica ridimensionare le singole immagini in modo che abbiano una altezza identica, ad esempio basandosi su un quadro largo almeno 512px
  • ovviamente le immagini differenti in altezza andranno ridimensionate seguendo le dimensioni verticali del quadro e in ogni caso a seconda delle preferenze
  • salvarle e ricaricarle nel server

secondo metodo

è il metodo consigliato anche se richiede l'uso di Photoshop o altro software per la gestione grafica

  • utilizzare photoshop o altro programma di grafica e creare una immagine vuota ad esempio di 512px x 320px; la dimensione del quadro va aggiustata dal grafico tenendo un minimo di 512px in orizzontale; dovrà configurare l'altezza sulla base delle esigenze. Si consiglia di non lasciare troppo spazio vuoto in alto e in basso rispetto ai loghi inseriti, altrimenti questi risulteranno troppo "spaziati" in fase di pubblicazione
  • scaricare il documento in formato PSD per Photoshop  (quadro da 512px x 220px)  con i loghi usati in questo esempio
  • inserire le immagini dei loghi su diversi livelli in modo che siano centrate verticalmente e orizzontalmente
  • ridimensionare le immagini una ad una e livello per livello,  a piacimento,  mantenendo la dimensione del  frame originale
  • salvare una ad una le immagini dei loghi (nascondendo di volta in volta gli altri livelli) con la funzione "salva per web"
  • in questo modo tutti i loghi hanno un box  identico e quando ridimensiionati appariranno sempre ottimizzati

output del secondo metodo:

Suggerimento:

per ogni logo associare l'immagine al link esterno del sito dello sponsor; vedi il manuale d'uso del redattore