 |
Riepilogo | Aggiunge automaticamente filigrane alle immagini caricate dagli utenti |
 |
Repository | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
Guida all’installazione | Come installare un tema o un componente del tema |
 |
Nuovo su Discourse Themes? | Guida per principianti all’uso dei temi Discourse |
Installa questo componente del tema
Descrizione
Questo componente del tema aggiunge automaticamente filigrane alle immagini caricate dagli utenti. Puoi utilizzare un’immagine o un codice QR come filigrana, con opzioni di personalizzazione estese per posizione, aspetto e pattern di distribuzione.
Il componente offre un controllo granulare tramite impostazioni per categoria e gruppo di utenti, consentendoti di adattare il comportamento della filigrana alle esigenze della tua community.
Priore all’implementazione, si prega di rivedere la sezione Note Importanti.
Funzionalità
- Elaborazione ad alte prestazioni grazie a WebAssembly e Web Workers
- Supporto completo per formati di immagine (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- Generazione dinamica di filigrane a codice QR
- Opzioni di dimensionamento flessibili (relative o assolute)
- Sistema di posizionamento versatile
- Personalizzazione avanzata dell’aspetto (opacità, rotazione, scala, margine, ecc.)
- Modalità di fusione multiple
- Opzioni di distribuzione del pattern (singolo, griglia, diagonale, casuale)
- Impostazioni specifiche per categoria e gruppo di utenti
- Anteprima in tempo reale nel pannello delle impostazioni
Impostazioni
| Impostazione | Descrizione |
|---|---|
image |
Immagine da utilizzare come filigrana. Formati supportati: PNG, JPEG, BMP, ICO, TIFF, WEBP. Predefinito: "" |
size_mode |
Metodo di calcolo della dimensione della filigrana: - relative: La dimensione è relativa alla larghezza dell’immagine di destinazione.- absolute: Applicata alla sua dimensione originale.Predefinito: "relative" |
relative_width |
Larghezza della filigrana relativa alla larghezza dell’immagine di destinazione (in %). Si applica solo quando la modalità di dimensione della filigrana è impostata su relative.Intervallo: 1-100 Predefinito: 10 |
absolute_scale |
Fattore di scala per la dimensione originale della filigrana (utilizzato solo in modalità assoluta). Min: 0.01 Predefinito: 1 |
max_size |
Dimensione massima come percentuale delle dimensioni dell’immagine. Intervallo: 1-100 Predefinito: 50 |
position |
Posizione della filigrana: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-rightPredefinito: "bottom-right" |
margin_x |
Margine orizzontale dal bordo (in % dell’immagine di destinazione) Predefinito: 0 |
margin_y |
Margine verticale dal bordo (in % dell’immagine di destinazione) Predefinito: 0 |
opacity |
Opacità della filigrana. Intervallo: 1-100 Predefinito: 100 |
rotate |
Angolo di rotazione. Intervallo: da -360 a 360 gradi Predefinito: 0 |
blend_mode |
Modalità di fusione della filigrana con l’immagine: normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken. Predefinito: "normal" |
pattern |
Pattern di ripetizione della filigrana: single, grid, diagonal, randomPredefinito: "single" |
pattern_allow_partial |
Consenti filigrane parziali ai bordi dell’immagine Predefinito: true |
pattern_max_count |
Numero massimo di ripetizioni della filigrana (0 per infinito) Predefinito: 50 |
pattern_spacing |
Spazio tra le filigrane ripetute (in % dell’immagine di destinazione) Predefinito: 15 |
qrcode_enabled |
Abilita filigrana a codice QR Predefinito: false |
qrcode_text |
Testo da codificare nel codice QR. Supporta segnaposto: {homepage}, {username}, {topic_url}Predefinito: "" |
qrcode_color |
Colore del codice QR (esadecimale o variabile CSS) Predefinito: "var(--primary)" |
qrcode_background_color |
Colore di sfondo del codice QR (esadecimale o variabile CSS) Predefinito: "var(--secondary)" |
qrcode_quiet_zone |
Larghezza del bordo di spazio bianco intorno al codice QR (0-10 moduli) Predefinito: 2 |
qrcode_error_correction |
Livello di correzione degli errori: Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)Ulteriori informazioni sui livelli di correzione degli errori sono disponibili qui. Predefinito: "Medium" |
categories |
Categorie in cui applicare la filigrana. Predefinito: "" |
groups |
Gruppi a cui applicare la filigrana. Predefinito: "0" |
skip_small_images |
Salta l’applicazione della filigrana se l’immagine è inferiore a min_image_dimensions.Predefinito: false |
min_image_dimensions |
Dimensioni minime richieste (larghezza x altezza) Predefinito: "200x200" |
allow_non_supported_uploads |
Consenti il caricamento di immagini anche se il formato non è supportato Predefinito: false |
Tipi di Filigrana
Immagine
Il componente supporta diversi formati di immagine: PNG, JPEG, BMP, ICO, TIFF e WEBP.
Consultare la sezione FAQ per informazioni importanti sui limiti di supporto dei formati.
Codice QR
Genera codici QR dinamici con contenuti personalizzabili utilizzando queste variabili:
{homepage}- L’URL della homepage{username}- Il nome utente dell’utente{topic_url}- L’URL dell’argomento
Importante: Quando si stilizzano le filigrane a codice QR, considerare il contrasto e le dimensioni. Rapporti di contrasto insufficienti o stili eccessivi possono rendere i codici QR illeggibili. Testare sempre le filigrane a codice QR con app di scansione.
Anteprima in Tempo Reale
Il pannello delle impostazioni include una funzione di anteprima in tempo reale, che consente di vedere immediatamente come la configurazione della filigrana influisce su un’immagine di esempio.
La finestra di anteprima offre diverse funzionalità interattive:
- Finestra di anteprima ridimensionabile e spostabile
- Opzione per caricare un’immagine di esempio casuale
- Supporto per il caricamento di immagini di prova dal proprio dispositivo
Su desktop, si apre automaticamente. È possibile aprirla anche tramite il pulsante in fondo alla pagina:
Note Importanti
-
Le immagini originali non vengono conservate
Le filigrane vengono applicate prima del caricamento sul server e le immagini originali non vengono mantenute. Testare attentamente le impostazioni della filigrana prima di distribuire in produzione. -
Se si effettua il test nel pannello di amministrazione, fare attenzione a non validare immediatamente le impostazioni. Si consiglia di creare un gruppo o una categoria per maggiore sicurezza.
FAQ
Perché i formati di immagine sono limitati?
Sebbene Discourse converta tutti i caricamenti in JPEG, questa filigrana del TC avviene prima del caricamento sul formato originale, utilizzando librerie specifiche di elaborazione delle immagini. Sebbene sia possibile applicare filigrane dopo il caricamento, ciò richiederebbe più cicli di caricamento/download e influenzerebbe l’esperienza del compositore. Sto ancora esplorando miglioramenti a questo flusso di lavoro.
Perché non è supportata la filigrana testuale?
La filigrana testuale richiederebbe opzioni di configurazione estese (scelta del font, stile, ecc.) difficili da implementare efficacemente senza un’interfaccia dedicata. Le filigrane a immagine offrono maggiore flessibilità e possono essere create utilizzando strumenti di progettazione esistenti.
Roadmap
I piani di sviluppo futuro potrebbero includere:
- Profili multipli di filigrana [1]
- Conservazione delle immagini originali [2]
- Filigrana post-caricamento
Crediti
Questo componente del tema è alimentato da:
- Photon: Una libreria di elaborazione immagini WebAssembly
- QR Code Generator: Fork modificato con supporto WebAssembly.
L’input di caricamento è parzialmente supportato con il tipo di impostazioni oggetto – al momento non è possibile farlo in un TC. ↩︎
Potrebbe richiedere lo sviluppo di un plugin. ↩︎
