Documentazione del modulo Team

Guida rapida

1. In Team Manager, seleziona Origine: Articoli, Elementi personalizzati o Cartella.
2. Compila i campi visualizzati per la fonte selezionata. Per un primo test veloce, scegli Elementi personalizzati e crea un elemento pubblicato con un'immagine e un nome.
3. In "Impostazioni generali", scegli uno "Stile" e imposta la "Versione" su "Slider" o "Standard".
4. Per la modalità Standard, scegli larghezze delle colonne responsive e, se lo desideri, attiva il filtro. Per la modalità Slider, imposta il numero di elementi responsive, la navigazione, il looping e la riproduzione automatica.
5. Pubblica il modulo in una posizione visibile del modello, quindi verifica sia la larghezza per desktop che quella per dispositivi mobili.

Molte impostazioni sono condizionali. Ad esempio, i campi degli articoli compaiono solo per la fonte “Articoli”, i breakpoint cambiano a seconda della modalità “Standard” o “Slider” e diversi controlli specifici dello stile compaiono solo per i layout che li utilizzano.

Come funziona il modulo

1. Selezione della fonte: il campo “Fonte” consente di scegliere i dati degli articoli di Joomla, gli elementi gestiti manualmente o i file individuati all’interno di una cartella “Immagini”.
2. Preparazione degli elementi: i record degli articoli vengono filtrati e arricchiti con link agli articoli, tag e immagini; i record personalizzati vengono letti dal sottomodulo ripetibile; i file della cartella vengono convertiti in elementi immagine o video.
3. Selezione del layout: lo Stile selezionato sceglie un layout PHP da tmpl. I layout differiscono nella composizione e potrebbero non utilizzare tutti i campi opzionali.
4. Modalità di presentazione: la modalità Slider avvia il carosello e i relativi punti di interruzione reattivi. La modalità Standard visualizza una griglia reattiva e può utilizzare il filtro Isotope.
5. Risorse: il layout e le opzioni selezionati determinano quali stili e script del modulo vengono aggiunti. Le trasformazioni delle immagini, gli effetti di disegno e i filtri vengono caricati solo quando pertinenti.

Il modulo memorizza nella cache i dati degli articoli preparati tramite la cache dei moduli di Joomla. Se un articolo o un file appena aggiunto non è visibile, svuotare la cache di Joomla e verificare le impostazioni della cache del modulo.

Fonti dei dati

Articoli

La modalità Articoli recupera gli elementi pubblicati dal com_content . I campi in questa sezione determinano quali articoli vengono selezionati e come vengono visualizzati il testo, i link e le immagini derivati dagli articoli stessi.

Testo dell’articolo e metadati

• Titolo della categoria: mostra o nascondi il titolo della categoria dell'articolo.
• Titolo elemento: mostra o nascondi il titolo dell'articolo.
• Lunghezza massima del titolo: lunghezza massima del titolo in caratteri. Utilizzare 0 per mantenere il titolo completo.
• Visualizzazione della descrizione: mostra o nasconde il testo introduttivo dell’articolo.
• Lunghezza massima della descrizione: lunghezza massima dell’introduzione in caratteri. Utilizzare 0 per mantenere la descrizione completa.
• Mostra “Leggi tutto”: mostra o nasconde il link “Leggi tutto”.
• Testo “Leggi tutto”: etichetta personalizzata per il link “Leggi tutto”; lasciarlo vuoto per utilizzare il layout predefinito di Joomla.

Immagini dell’articolo

L'estrazione delle immagini è controllata da quattro selettori di fonte e dall'opzione "Ordine di recupero". Il modulo verifica le fonti configurate alla ricerca di immagini disponibili e utilizza il primo risultato idoneo secondo quell'ordine di priorità. Le fonti disponibili sono:

• image_intro: l’immagine introduttiva dell’articolo in Joomla.
• image_fulltext: l’immagine del testo completo dell’articolo in Joomla.
• inline_introtext: immagini incorporate nel codice HTML dell’introduzione dell’articolo.
• inline_fulltext: le immagini incorporate nel codice HTML del testo completo.

I valori dell’ordine sono separati da virgole, spazi o punti e virgola. Se non viene trovata alcuna immagine, il «Percorso segnaposto» (o URL) fornisce l’immagine di riserva. Questo campo segnaposto è disponibile per la fonte «Articoli». .

Caricamento dei membri del team dagli articoli.

Creazione di un campo personalizzato.

Il primo passo consiste nel creare il campo personalizzato necessario per aggiungere le icone social per ciascun membro del team. Se non è necessario includere i social media, saltare questo passaggio e passare al passaggio successivo "Creazione delle categorie".

1. Nel backend di Joomla, vai su Contenuto - Campi.
2. Fare clic sul pulsante verde "Nuovo".

Nel campo "Titolo" inserisci "Social".

1. In "Tipo" seleziona "Campo di testo".
2. In "Filtro" selezionare "HTML sicuro".

Fai clic sulla scheda "Opzioni" e in "Etichetta" seleziona "Nascondi".

Fai clic su "Salva e chiudi"

Creazione delle categorie

1. Vai su Contenuto - Categorie.
2. Fai clic sul pulsante verde "Nuovo".

Crea una categoria denominata "Team" e, all'interno di essa, aggiungi delle sottocategorie con le professioni dei membri del team. Nella demo utilizziamo CEO, Manager, Lavoratore.

Creazione di articoli

Una volta create le categorie, vai su Contenuti - Articoli e clicca sul pulsante verde "Nuovo".

1. Inserisci il titolo.
2. Seleziona la categoria corrispondente alla professione del membro del team.
3. Scrivi le informazioni, la biografia, ecc.
4. Fai clic sulla scheda "Immagini e link" e aggiungi la foto.

Se è stato creato un "Campo personalizzato", procedi al punto 5; altrimenti salta questo passaggio

5- Clicca sulla scheda "Campi" e inserisci lì il codice per i link ai social.

Inserisci il codice riportato di seguito in modalità codice, apportando le modifiche necessarie, aggiungendo o eliminando le icone dei social media.

Le modifiche possono essere apportate eliminando o aggiungendo le righe

 È inoltre possibile modificare le icone dei social. Ad esempio, se non è necessario avere Instagram ma Digg, modificare fab fa-instagram in fab fa-digg

Non dimenticare di sostituire i link href="#" con quelli corretti corrispondenti a ciascun social media.

Carica gli articoli nel modulo

In Estensioni - Moduli, clicca sul Modulo Team. Seleziona una posizione presente nel template e inseriscila nelle voci di menu che desideri visualizzare.

Fare clic sulla scheda "Team Manager" e, in "Seleziona sorgente", scegliere "Articoli".

In "Seleziona categoria" selezionate tutte le categorie create per i membri del team.

Imposta "Articoli delle sottocategorie" = Includi.

Se nei passaggi precedenti sono stati creati i social media per i membri del team, impostare "Campi personalizzati" = Sì. Per il resto, impostare le opzioni desiderate.

Voci personalizzate

Gli elementi personalizzati vengono inseriti nel campo "Elementi ripetibili". Aggiungi un record per ogni persona o voce del team, pubblicalo e ordina i record nell'ordine in cui desideri che appaiano. Il sottomodulo supporta fino a 250 voci.

Gli elementi personalizzati non utilizzano categorie di articoli, tag, link agli articoli o estrazione delle immagini degli articoli. Il loro contenuto proviene dal sottomodulo. Un layout potrebbe omettere alcuni campi, quindi verifica che lo stile scelto visualizzi le informazioni che intendi inserire.

Creare elementi personalizzati

Nella scheda "Team Manager", in "Seleziona origine", scegli "Elementi personalizzati".

In tutti i campi inserisci tutte le informazioni relative alla persona, quali foto, nome, titolo principale ecc. Utilizza il pulsante "Aggiungi" per aggiungere tutti i membri del team necessari.

Se è necessario includere i social media, imposta "Social Network" su "Sì". Utilizza anche in questo caso il pulsante "Aggiungi" per aggiungere i social media. In "Icona social" seleziona una delle icone disponibili e aggiungi un link URL valido corrispondente a quel social media.

Selezionare la cartella di origine

1. Nelle impostazioni del modulo, imposta "Origine" su "Cartella".
2. Scegli una directory all’interno della images/ utilizzando l’opzione “Directory cartella”.
3. Selezionare uno stile visivo in "Stile".
4. Imposta il numero di elementi, se necessario. Il valore 0 indica tutti i file supportati.

La cartella selezionata e le sue sottocartelle vengono analizzate in modo ricorsivo. Le estensioni supportate sono jpg, jpeg, png, gif, webp, bmpe mp4.

Formato del nome del file nella cartella

Utilizzare il nome del file senza estensione per indicare il nome della persona, il titolo e la descrizione:

01 - Jane Doe | Creative Director || Designs brand systems and campaigns.jpg

Utilizzare questo modello consigliato:

ORDER - NAME | TITLE || DESCRIPTION.ext

Prefissi numerici

Un numero iniziale seguito da un separatore viene rimosso dal nome e dal titolo visualizzati. Questi esempi vengono visualizzati come Jane Doe:

01 - Jane Doe.jpg
02_Jane Doe | Designer.jpg
03. Jane Doe | 02: Lead Developer.jpg

I trattini e i caratteri di sottolineatura presenti nel resto del testo vengono visualizzati come spazi. Il nome del file originale e l'URL dell'immagine non vengono modificati.

Nomi file semplici

Jane-Doe | Designer || Short biography.webp

Se non è presente alcuna barra verticale, il nome del file completo diventa il nome. Se non viene fornito alcun titolo dopo la barra verticale, il campo del titolo rimane vuoto.

Presentazione e layout

Stile

Il manifesto offre le opzioni Predefinito, Mostra, Parete, Diapositiva e Stile da 1 a 65. Si tratta di un totale di 69 opzioni di layout. Utilizza le anteprime in miniatura nel selettore Stile per confrontarle; ogni layout può posizionare immagini, titoli, descrizioni, link e controlli social in modo diverso. Non tutti i layout visualizzano ogni campo o rispondono a ogni opzione di presentazione allo stesso modo.

I controlli specifici per ogni stile includono:

• Stile 12: espone l’altezza della foto.
• Stile 60: espone la larghezza dell’immagine, da 200px a 550px.
• Stile 63: rende disponibili le versioni "Chiaro" o "Scuro".
• Diapositiva: espone le opzioni "Mostra impaginazione", "Mostra frecce" e "Stile frecce".
• "Mostra": consente di impostare il colore dello sfondo e del testo.

Versione: Standard o Slider

La versione "Slider" presenta il team come un carosello in movimento. Consente la riproduzione automatica, il loop, la navigazione e le impostazioni responsive relative al numero di elementi. La versione "Standard" presenta una griglia responsive e abilita l'opzione di filtro Isotope. Scegliete prima la versione, poiché questa determina quali controlli vengono visualizzati nel modulo di amministrazione.

Colonne della griglia reattiva

In modalità Standard, scegli il numero di colonne separatamente per Desktop, Tablet in orizzontale, Tablet in verticale, Mobile in orizzontale e Mobile in verticale. Ogni impostazione offre da 1 a 10 colonne. I valori salvati sono percentuali delle colonne; ad esempio, il 25% corrisponde a quattro colonne uguali e il 50% a due. Selezionare un numero maggiore di colonne solo se l’area del modulo e lo stile scelto lasciano spazio sufficiente per ogni elemento.

Numero di elementi dello slider adattivo

In modalità Slider, l’impostazione “Elementi” determina quanti elementi sono visibili per ciascuna delle stesse cinque dimensioni di dispositivo. Per ogni breakpoint è possibile impostare da 1 a 10 elementi visibili. Per gli schermi stretti, uno o due elementi sono solitamente più leggibili rispetto a ridurre il numero di elementi del desktop per adattarlo al mobile.

Comportamento e controlli dello slider

Impostazioni generali

Modalità ridimensionamento

Si applica ai file immagine utilizzati da articoli, elementi personalizzati ed elementi delle cartelle. L'helper comune per le immagini del modulo elabora l'immagine quando un layout richiede l'URL dell'immagine, pertanto l'impostazione è condivisa tra le modalità di presentazione Standard e Slider e tra gli stili che visualizzano l'immagine dell'elemento. Il layout scelto può comunque applicare le proprie impostazioni CSS di ridimensionamento o ritaglio visivo dopo il caricamento dell'immagine elaborata.

Questi controlli sono separati dagli interruttori di origine immagine e dal segnaposto specifici per gli articoli. Essi modificano il modo in cui viene preparata un’immagine selezionata; non determinano da dove proviene l’immagine. Per i file MP4 delle cartelle, il modulo utilizza anche la modalità di ridimensionamento e le dimensioni configurate quando genera una miniatura lato browser; l’MP4 stesso rimane un video.

Ad esempio, scegli "Riempi" per miniature in formato verticale di dimensioni uniformi quando il ritaglio dei bordi è accettabile; scegli "Adatta" quando ogni parte di ciascuna foto sorgente deve rimanere visibile; scegli "Allunga" solo quando la distorsione è accettabile o le proporzioni della sorgente corrispondono già. "Nessuno" è utile quando è necessario mantenere le dimensioni e il formato originali.

Filtri e spaziatura degli elementi

Il filtro mostra una riga di pulsanti sopra gli elementi del team. I visitatori possono scegliere "All" o una singola etichetta per visualizzare solo gli elementi corrispondenti senza uscire dalla pagina. L’allineamento del filtro può essere "Right" (predefinito), "Center" o "Left".

Importante: i filtri non vengono visualizzati nel layout a cursore. Impostare "Versione" su "Standard". Il filtro richiede inoltre almeno un'etichetta non vuota nella fonte selezionata.

01 - Jane Doe | Creative Director.jpg
02 - John Smith | Engineering.jpg

images/team/
├── 01 - Jane Doe | Creative Director || Brand and campaign systems.jpg
├── 02 - John Smith | Engineering Lead || Platform and infrastructure.mp4
└── 03 - Alex Lee | Product Designer || Product experience and research.webp

La distanza tra gli elementi regola lo spazio tra gli elementi della squadra, laddove il layout attivo lo supporti. L’effetto di focus sugli elementi controlla il comportamento al focus o al passaggio del mouse nei layout che lo implementano. Poiché questi effetti dipendono dal layout, visualizzali in anteprima con lo stile effettivamente selezionato.

9. Effetti immagine

Forma dell’immagine

La forma dell’immagine controlla il contorno visibile di ciascuna immagine ed è indipendente dal suo trattamento visivo. Scegliere Rettangolo, Cerchio, Ellisse, Rombus, Esagono, Splash, Forma da 1 a 6 o Casuale (Forme da 1 a 6). L’opzione Rettangolo lascia l’immagine non ritagliata da alcuna forma. L’opzione Casuale seleziona una delle sei maschere di forma fornite per le singole immagini.

Cerchio, ellisse, rombo, esagono e splash utilizzano il ritaglio del browser. Le forme da 1 a 6 utilizzano maschere WebP trasparenti fornite con il modulo. La selezione della forma può essere combinata con Originale, Disegno o Acquerello. Alcuni layout visualizzano le foto come sfondi CSS anziché come elementi immagine; tali layout potrebbero non supportare la maschera di forma o l’effetto canvas.

Effetto immagine "Disegno"

L’effetto immagine “Disegno” determina come viene resa la foto di origine. Scegli una modalità:

• Livello dell'effetto: disponibile per le modalità Disegno e Acquerello. Scegliere 1 (Delicato), 2 (Leggero), 3 (Normale), 4 (Intenso) o 5 (Molto intenso); l'impostazione predefinita è 3. Nella modalità Disegno, livelli più alti intensificano il trattamento delle linee e della carta. In modalità "Acquerello", livelli più alti intensificano il pigmento, aumentano la separazione dei colori e l’accumulo ai bordi e rendono più visibile la trama della carta.
• Passerci sopra con il mouse: scegli "Originale" per rivelare la foto di origine mentre il puntatore si trova sopra l’elemento della squadra, oppure "Disegno" per mantenere visibile l’immagine elaborata selezionata. Questa impostazione è disponibile sia per "Disegno" che per "Acquerello".

Cache delle immagini generate

Le immagini elaborate vengono generate nel browser e possono essere salvate come file WebP nella /cache/mod_mx_team/drawing-effects per velocizzare le successive visualizzazioni della pagina. Quando si modifica una foto, una forma, la modalità di effetto o un livello, il modulo utilizza un risultato diverso presente nella cache. Per rimuovere tutte le copie generate, apri il modulo nell’area di amministrazione e utilizza l’opzione Svuota cache nelle Impostazioni. Conferma l’azione; la cartella della cache rimane al suo posto e le immagini vengono generate nuovamente man mano che i visitatori caricano la pagina.

Quando gli effetti non vengono visualizzati

• Utilizza un layout che visualizzi la foto del membro come ; le immagini di sfondo CSS potrebbero non essere elaborate.
• Le immagini provenienti da un altro dominio devono consentire l’accesso a canvas tramite CORS. In caso contrario, il browser non può leggere i relativi pixel e viene visualizzata invece l’immagine originale.
• Le immagini di grandi dimensioni vengono ridimensionate alla dimensione massima di lavoro prima dell’elaborazione, pertanto i dettagli più fini potrebbero risultare semplificati.
• Controlla la console del browser per eventuali errori di caricamento o relativi al canvas. Se un risultato memorizzato nella cache appare obsoleto, svuota la cache degli effetti di disegno e ricarica la pagina.

Rivelazione allo scorrimento

L'effetto "Reveal" abilita un'animazione di entrata attivata dallo scorrimento nei layout che includono il markup "reveal". L'opzione "Animazione" consente di scegliere se l'animazione venga eseguita una sola volta o sempre. L'opzione "Effetto" seleziona una direzione, dissolvenza, zoom, scuotimento, lampeggiamento o un trattamento di entrata correlato. La disponibilità di un campo nel modulo non garantisce che ogni stile lo utilizzi.

Correzioni alle icone social nel template

In uno dei file CSS del template, aggiungere il codice riportato di seguito

ul.social {
    display: inline
}

ul.social li {
    display: inline-block
}
ul.social li a {
    color: #7b7b7b;
    font-size: 16px;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50px; 
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid transparent;
    transition: background-color .4s ease-in-out
}

Con questo codice è possibile visualizzare le icone social dei membri del team negli articoli in linea, con un aspetto gradevole.

Risoluzione dei problemi

Il modulo non è visibile

• Verificare che il modulo sia pubblicato, che gli sia stata assegnata una posizione nel template e che sia associato alla voce di menu corrente.
• Controlla il livello di accesso del modulo, le date di inizio e fine pubblicazione e il rendering della posizione nel template.

Non vengono visualizzati né membri né articoli

• Per gli articoli, verificare che siano pubblicati e accessibili, quindi controllare le categorie selezionate, il livello di gerarchia delle sottocategorie, i tag e la modalità "Articoli in primo piano".
• Per le voci personalizzate, verificare che una o più voci siano impostate su Pubblica.
• Per le cartelle, verificare che la cartella scelta si trovi all’interno di images e contenga file con estensioni supportate.
• Svuota la cache dei moduli di Joomla dopo aver modificato la fonte o il suo contenuto.

Le immagini mancano o non sono state modificate

• Per gli articoli, abilitare le opzioni corrette per la fonte delle immagini, verificare l’ordine e controllare il percorso del segnaposto.
• Per le voci personalizzate, selezionare un'immagine in "Sfoglia per immagine" e verificare che lo stile scelto utilizzi il campo immagine.
• Per la cartella, controllare l’estensione del nome del file e il percorso nel filesystem in images.
• Il ridimensionamento delle immagini richiede un supporto PHP funzionante per le immagini e una posizione della cache scrivibile.
• Gli effetti di disegno potrebbero non riuscire a elaborare immagini cross-origin; verificare la console del browser ed eseguire un test con un'immagine dello stesso sito.

Problemi con la cartella di origine

I controlli dello slider o dei filtri non vengono visualizzati

• I filtri richiedono la modalità Standard e l'opzione Mostra filtro abilitata.
• Il conteggio degli elementi responsive e i controlli di riproduzione automatica richiedono la modalità Slider.
• Le impostazioni di impaginazione e delle frecce visualizzate per lo stile "Slide" non si applicano a tutti i layout.
• Verifica che lo stile selezionato supporti il controllo e che un'altra estensione non abbia causato un errore JavaScript.

Mancano le icone social

Abilita "Social Network" sull'elemento, aggiungi almeno un'icona social e un URL, e verifica se il template carica già una libreria Font Awesome compatibile. Utilizza l'opzione "Font Awesome" del modulo solo se il font delle icone è assente.