Filigrana su tutte le immagini caricate

Contribuisci Funzionalità
1

Cari tutti gli sviluppatori di Discourse,

Desidero ringraziare tutti gli sviluppatori di Discourse per il loro eccellente lavoro nel creare il miglior forum al mondo. :smiling_face_with_three_hearts: Personalmente, ho utilizzato altri programmi, come Discuz e Buddyboss (Wordpress), per costruire diversi forum negli ultimi 10 anni; nessuno di essi è stato grande come Discourse.

L’unica funzionalità che mi manca in Discourse è quella del watermark. Sarebbe perfetto se Discourse supportasse il watermark su tutte le immagini caricate. Non deve essere estremamente complicato, come alcuni altri utenti hanno suggerito in questo forum. (Capisco perché gli sviluppatori abbiano ignorato la loro richiesta, poiché è totalmente impraticabile.)

A mio avviso, una funzionalità di watermark molto semplice sarebbe sufficiente. Aggiungere un’icona/testo su ogni immagine caricata, in modo che gli altri sappiano che l’immagine proviene dal mio forum quando qualcuno la condivide (o ruba) su un altro sito/piattaforma.

Personalmente, aggiungo sempre il watermark io stesso prima di caricare sul forum, tuttavia molti membri della comunità non vogliono farlo da soli, specialmente quando pubblicano immagini usando uno smartphone; sperano che il forum lo aggiunga automaticamente.

Capisco che Discourse sia stato originariamente progettato più come un forum basato sul testo, piuttosto che come un forum con molte immagini, come un forum di fotografia. Ma grazie a molti eccellenti plugin/temi disponibili, posso creare un forum orientato alla fotografia con Discourse in modo efficace.

Consiglio di aggiungere una casella di caricamento per l’immagine del watermark in
/admin/site_settings/category/branding

2020-12-30_035510
2020-12-30_035510612×179 6.07 KB

E di aggiungere un pulsante di selezione in
/admin/site_settings/category/files
2020-12-30_042258

E un menu a tendina per la posizione del watermark, simile a:

2020-12-30_042407
2020-12-30_042407585×212 9.32 KB

In questo modo, sarebbe sufficiente. Non servono altre funzionalità sofisticate.
Altre funzionalità, come il ridimensionamento, l’opacità, il backup dell’immagine originale, ecc., sono ottimali ma non necessarie.

Infine, voglio ringraziare tutti gli sviluppatori di Discourse per il loro continuo duro lavoro.
Grazie e Buon Anno Nuovo ~!:kissing_heart:

7 Mi Piace
2

Grazie, Jacky. Sembra un plugin interessante per chi vuole sperimentare. Tuttavia, non credo che ne faremo una funzionalità principale, ma il core può certamente aiutare a facilitare lo sviluppo del plugin.

Se hai un budget, ti consiglio di pubblicare un annuncio in Marketplace. Secondo me, realizzare un prototipo minimale del plugin (con configurazione ridotta: solo l’invio del testo) richiederebbe circa 1 o 2 giorni.

L’applicazione di un watermark sovrapponendo immagini potrebbe richiedere un po’ più di tempo per essere implementata correttamente.

12 Mi Piace
3

Dopo qualche esperimento, ho trovato una soluzione temporanea per la filigrana. :partying_face:

Nel caso in cui possa interessare ad altri, voglio condividere il mio workaround. Spero possa essere d’aiuto. :smiling_face_with_three_hearts:

  1. Per prima cosa, ho installato Chevereto (gratuito) su un altro sottodominio.
    (È molto semplice: basta caricare il file installer.php sul server, aprire la pagina e seguire la procedura di configurazione. Si completa in pochi minuti) :kissing_heart:

  2. La versione gratuita supporta anche la filigrana; puoi configurarla nelle impostazioni di caricamento immagini dalla dashboard.

    2021-02-22_190424
    2021-02-22_190424746×485 17.8 KB

2021-02-22_190436
2021-02-22_1904361189×548 22.6 KB

Puoi anche impostare la larghezza e l’altezza massime delle immagini dalla dashboard, così tutte le immagini caricate di grandi dimensioni verranno ridimensionate automaticamente.

  1. Aggiungi il plugin Chevereto (script) al tag <head> di Discourse
    <script async src="https://img.example.com/sdk/pup.js" data-url="https://img.example.com/upload"></script>

  2. Discourse sembra non supportare più il tag i per gli icone di Font Awesome, quindi ho dovuto modificare lo script JavaScript da
    <i class="fa fa-cloud-upload d-icon d-icon-upload"></i>
    a
    <svg class="fa d-icon d-icon-cloud-upload-alt svg-icon svg-node" aria-hidden="true"><use xlink:href="#cloud-upload-alt"></use></svg>

  3. Se tutto è configurato correttamente, nell’editor di Discourse apparirà l’icona della nuvola con la freccia di caricamento.

    2021-02-22_190904
    2021-02-22_190904717×183 12.9 KB

  4. Basta cliccare sulla nuova icona, trascinare e rilasciare l’immagine nella finestra popup: verrà caricata automaticamente e il codice verrà inserito nell’editor con la filigrana. :partying_face:

  5. Ora funziona perfettamente su desktop. Sto ancora cercando di capire come aggiungere l’icona anche sugli smartphone. :thinking: Aggiungerò un aggiornamento a questo post se troverò un modo per farlo.

Si tratta solo di una soluzione temporanea, un workaround, tutt’altro che perfetto, ma può essere implementato facilmente in pochi minuti. Spero ancora che Discourse possa aggiungere la filigrana nel core o tramite plugin/TC in futuro.

9 Mi Piace
4

Sembra tutto a posto. Un componente tema con tutto questo, lasciando solo l’installazione di Chevereto come passaggio manuale, sarebbe ottimo.

4 Mi Piace
5

Ho modificato un po’ il Javascript del plugin Chevereto.

Cambiando
sibling: ".upload.btn", siblingPos:"before",
in
sibling:".code.btn",siblingPos:"after",

Ora l’icona appare sia su desktop che su smartphone. :partying_face:

2 Mi Piace
6

Lo adoro! Ha un plugin per raggiungere lo stesso obiettivo?

7

Sarebbe meglio se ci fosse un componente per questa filigrana.

2 Mi Piace
8

Qualcuno può dirmi in quale cartella vengono salvate le immagini?

Uno dei modi in cui vorrei aggiungere la filigrana in lotto è eseguendo uno strumento di fotoritocco esterno.

9

Qualcuno è riuscito a ottenere questo con l’ultima versione 3.2 di Discourse?

10

Questo è piuttosto bello. Potresti anche essere interessato a questo Theme component

2 Mi Piace
11

Ci ho provato in un componente tema. È solo una prova di concetto, quindi è basilare. :smile:
Per ogni caricamento, viene applicata automaticamente una filigrana.

Dal punto di vista tecnico, proprio come Discourse pre-elabora le immagini prima del caricamento (ad esempio comprimendole), questo strumento fa lo stesso con la filigrana. Grazie all’API e alla libreria Uppy, l’applicazione della filigrana è facilmente realizzabile. :pray:

Fatemi sapere se avete in mente funzionalità/personalizzazioni che considerereste come un minimo. :slight_smile:

EDIT: pubblicherò una versione non appena implementerò le impostazioni di base.

14 Mi Piace
12

:heart: :heart: :heart:
Lavoro epico! Fammi sapere se hai bisogno di tester

2 Mi Piace
13

Ehi, è pronto per la produzione? Sono molto interessato

1 Mi Piace
14

In quale situazione è opportuno e legale stampare una filigrana su tutte le immagini?

1 Mi Piace
15

È pronto per la produzione?

16

Mi dispiace, sono un po’ in ritardo. :sweat_smile:
Se sei ancora interessato, ho pubblicato un TC qui: Watermark Image. Qualsiasi feedback è benvenuto!

7 Mi Piace