Immagini, linee, disegno - Documentazione

Il plugin funziona sul frontend del sito e applica l'effetto selezionato alle immagini, a meno che un filtro non le escluda.

Configurazione consigliata: scegli un effetto e una forma globali, limita l’area di applicazione se necessario, quindi aggiungi regole basate su ID o classe per le aree che richiedono un effetto o una forma diversi.

Effetto e forma globali

Queste sono le impostazioni predefinite per le immagini che non corrispondono a una regola di sovrascrittura.

• Effetto artistico sull'immagine
  • Originale (0): mantiene inalterata l’immagine sorgente. La forma selezionata può comunque mascherarla o ritagliarla.
  • Disegno (1): applica l’effetto disegno a matita.
  • Acquerello (2): applica l'effetto acquerello.
• Forma dell’immagine: scegli rectangle, circle, ellipse, diamond, hexagon, splash, shape1 tra shape6, oppure random. L’opzione Casuale sceglie tra le maschere Forma 1-6 disponibili.

Opzioni di disegno e animazione

• Modalità di disegno: imposta l’aspetto del disegno: Seppia o Bianco. Visualizzato per l’effetto Disegno.
• Livello dell’effetto: controlla l’intensità dell’effetto disegno o acquerello. Scegli tra Delicato, Leggero, Normale, Forte o Molto forte.
• Passerci sopra con il mouse: per Disegno e Acquerello, scegli se passando con il mouse su un elemento della squadra venga mostrata l’immagine originale o se continui a essere visualizzato l’effetto.
• Animazione dei contorni dell’immagine: disegna i contorni dell’immagine utilizzando tratti SVG animati. Il colore del contorno viene ricavato dalla foto per l’effetto Acquerello e può essere impostato con il colore del disegno per l’effetto Disegno.
• Mostra lo sfondo dell’immagine: rivela gradualmente l’immagine partendo dal centro man mano che vengono disegnati i contorni. Questa opzione può essere utilizzata con o senza l’animazione dei contorni.
• Colore del disegno: imposta il colore del tratto del contorno quando l’animazione del contorno è abilitata per l’effetto “Disegno”.
• Durata dell’animazione: durata utilizzata dall’animazione dei contorni e/o della rivelazione dello sfondo. Disponibile da 1 a 10 secondi con incrementi di 0,5 secondi.
• Spessore del tratto: spessore dei tratti animati dei contorni, da 0,5 a 3 pixel.

Le sostituzioni relative a effetto, forma e area dell’immagine sostituiscono solo l’effetto e la forma. La modalità di disegno, il livello, il comportamento al passaggio del mouse, l’animazione dei contorni, la rivelazione dello sfondo, la durata, la larghezza del tratto e il colore del disegno rimangono impostazioni globali.

Voci di menu e filtri immagine

Abilita sulle voci di menu

Seleziona le voci di menu di Joomla in cui il plugin deve essere eseguito. Lascia la selezione vuota per l’esecuzione su tutte le voci di menu. Questa impostazione determina se il plugin viene caricato sulla pagina.

Modalità filtro dell’area immagine

Gli ID e le classi dell’area immagine identificano un elemento e tutte le immagini al suo interno. La modalità di filtro determina se le aree corrispondenti vengono incluse o escluse:

• Escludi le aree corrispondenti: elabora le immagini tranne quelle all'interno di un ID o di una classe corrispondente. Questa è l'impostazione predefinita.
• Includi solo le aree corrispondenti: elabora le immagini solo quando si trovano all’interno di un ID o di una classe corrispondente. Se entrambi gli elenchi di filtro sono vuoti, nessuna immagine corrisponde.

ID e classi delle aree immagine

Inserire uno o più ID o nomi di classe, separati da virgole, punti e virgola o spazi. Non includere il prefisso CSS (il plugin accetta anche un # o .). Si tratta di filtri, non di regole di effetto; configura gli effetti per singola area nei campi di sovrascrittura qui sotto.

IDs:     hero, article-images
Classes: gallery, product-photo

Impostazioni per ID e per classe

Utilizza questi campi per assegnare a diverse aree effetti e forme specifici. Aggiungi esattamente una regola per riga in questo formato:

target|effect|shape

• target: un ID di elemento o un nome di classe. Inserisci il nome senza prefissi; un # o . è facoltativo.
• effect: 0 = Originale, 1 = Disegno, 2 = Acquerello.
• shape: rectangle, circle, ellipse, diamond, hexagon, splash, shape1 fino a shape6, oppure random.

Esempi

Impostazioni di disegno per ID:

team-portraits|1|circle
homepage-gallery|2|shape3
brand-logo|0|rectangle

Impostazioni di disegno per classe:

staff-photo|1|hexagon
watercolor-gallery|2|random

Il primo esempio applica l’effetto “Disegno” e una forma circolare alle immagini all’interno dell’elemento con ID team-portraits. Il secondo applica "Acquerello" e "Forma 3" alle immagini all'interno di homepage-gallery. Un effetto di 0 lascia l'immagine originale ma applica comunque la forma scelta.

Quale regola prevale?

1. L’ID che corrisponde più da vicino all’immagine o a uno dei suoi elementi antenati prevale su qualsiasi regola di classe.
2. Se nessuna regola ID corrisponde, prevale la regola di classe più simile.
3. Se non c'è alcuna sovrascrittura corrispondente, vengono utilizzati l'effetto e la forma globali.

Utilizzare una regola per ogni ID o classe. Separare i tre valori con la barra verticale (|), non una virgola. L’intera regola deve trovarsi su una sola riga. Le righe non valide vengono ignorate e segnalate nella console del browser.

Le sovrascritture selezionano le aree indipendentemente dal filtro di inclusione/esclusione. Un filtro può comunque escludere un’area dall’elaborazione. Per utilizzare una sovrascrittura in modalità Include, la sua area deve corrispondere anche a uno degli ID delle aree dell’immagine o alle classi delle aree dell’immagine.

Cache, jQuery e CSS personalizzati

• Cache degli effetti di disegno: rimuove i file generati di disegno e acquerello dalla cache degli effetti di disegno del plugin. Utilizzala dopo aver apportato modifiche se è necessario che le immagini generate vengano ricreate.
• Carica jQuery: carica la copia di jQuery inclusa nel plugin quando l’opzione è impostata su Sì. Lasciala disabilitata se il sito fornisce già la libreria richiesta o se non ne hai bisogno.
• CSS personalizzato: aggiunge dichiarazioni CSS alla pagina frontend. Utilizzalo per le modifiche di stile; un CSS non corretto può influire sull’aspetto della pagina.

Risoluzione dei problemi

• Un'immagine non viene elaborata: controlla la selezione della voce di menu e gli elenchi della modalità filtro/ID/classe. In modalità «Includi», almeno un filtro configurato deve corrispondere a un elemento antenato dell'immagine.
• Un override non viene applicato: verifica che l’ID o la classe dell’elemento sia presente sull’immagine o su un elemento antenato; usa una singola target|effect|shape riga e verifica l’ortografia della forma e il numero dell’effetto.
• L’aspetto dell’immagine non si è aggiornato: svuota la cache degli effetti di disegno, quindi ricarica la pagina. Potrebbe essere necessario anche un aggiornamento della cache del browser.
• Le animazioni non sono visibili: verificare che l’opzione di animazione pertinente sia abilitata e controllare se il browser o il dispositivo richiede una riduzione del movimento.