Marca d'água em todas as imagens enviadas

Contribuir Funcionalidade
1

Prezados Desenvolvedores do Discourse,

Gostaria de agradecer a todos os desenvolvedores do Discourse pelo excelente trabalho em criar o melhor fórum do mundo. :smiling_face_with_three_hearts: Pessoalmente, utilizei outros programas, como Discuz e Buddyboss (Wordpress), para criar vários fóruns nos últimos 10 anos, e nenhum deles é tão excelente quanto o Discourse.

A única funcionalidade que sinto falta no Discourse é o recurso de marca d’água. Seria perfeito se o Discourse suportasse marca d’água em todas as imagens carregadas. Não precisa ser extremamente complicado, como alguns outros usuários sugeriram neste fórum. (Entendo por que os desenvolvedores ignoraram esse pedido, pois é totalmente impraticável.)

Na minha opinião, uma capacidade muito simples de marca d’água seria suficiente. Adicionar um ícone/texto em todas as imagens carregadas, apenas para que outros saibam que a imagem se originou do meu fórum quando alguém compartilhar (ou roubar) suas imagens em outro site/plataforma.

Pessoalmente, sempre adiciono a marca d’água manualmente antes de fazer o upload para o fórum; no entanto, muitos membros da comunidade não querem fazer isso por conta própria, especialmente quando postam imagens usando smartphones. Eles esperam que o fórum adicione automaticamente.

Entendo que o Discourse foi originalmente projetado mais como um fórum baseado em texto, em vez de um fórum com muitas imagens, como um fórum de fotografia. Mas graças a muitos excelentes Plugins / TC disponíveis, consigo criar um fórum orientado para fotos com o Discourse de forma eficiente.

Recomendo adicionar uma caixa de upload de imagem de marca d’água em
/admin/site_settings/category/branding

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

E adicionar um botão de seleção em
/admin/site_settings/category/files
2020-12-30_042258

E um menu suspenso para a posição da marca d’água, semelhante a:

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

Assim, seria suficiente. Não são necessárias outras funcionalidades elaboradas.
Outras funcionalidades, como dimensionamento, opacidade, backup da imagem original, etc., são ótimas, mas não essenciais.

Por fim, gostaria de agradecer novamente a todos os desenvolvedores do Discourse pelo trabalho árduo contínuo.
Obrigado e Feliz Ano Novo ~!:kissing_heart:

7 curtidas
2

Obrigado, Jacky. Parece um plugin interessante para alguém experimentar. No entanto, não acho que vamos transformar isso em uma funcionalidade central, mas o núcleo certamente pode ajudar a facilitar o desenvolvimento do plugin.

Se você tiver orçamento, recomendo postar no Marketplace. Minha estimativa é que um protótipo mínimo do plugin (com configuração mínima — apenas fornecer texto) levaria cerca de 1 a 2 dias para ser desenvolvido.

Adicionar uma marca d’água sobrepondo imagens pode levar um pouco mais de tempo para ser feito corretamente.

12 curtidas
3

Depois de alguns testes, encontrei uma “solução” temporária para a marca d’água. :partying_face:

Apenas para prevenir, caso outros possam se interessar. Quero compartilhar minha alternativa. Espero que possa ajudar. :smiling_face_with_three_hearts:

  1. Primeiro, instalei o Chevereto (gratuito) em outro subdomínio.
    (É muito fácil, basta fazer o upload do arquivo installer.php para o servidor, abrir a página e seguir a configuração. É concluído em minutos) :kissing_heart:

  2. A versão gratuita também suporta marca d’água; você pode configurá-la nas configurações de upload de imagens do painel.

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

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

Você também pode definir a largura e a altura máximas das imagens no painel, para que todas as imagens grandes enviadas sejam redimensionadas automaticamente.

  1. Adicione o plugin Chevereto (script) à tag <head> do Discourse
    <script async src="https://img.example.com/sdk/pup.js" data-url="https://img.example.com/upload"></script>

  2. Parece que o Discourse não suporta mais a tag i com ícones do Font Awesome, então precisei modificar o JavaScript de
    <i class="fa fa-cloud-upload d-icon d-icon-upload"></i>
    para
    <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 tudo estiver configurado corretamente, o ícone de upload em nuvem aparecerá no editor do Discourse.

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

  4. Basta clicar no novo ícone, arrastar e soltar a imagem na janela pop-up; ela será enviada automaticamente e o código será colado no editor com a marca d’água. :partying_face:

  5. Agora funciona perfeitamente no desktop. Mas ainda estou tentando descobrir como adicionar o ícone no smartphone. :thinking: Atualizarei este post se encontrar uma maneira de fazer isso.

É apenas uma solução temporária, uma alternativa, nada perfeito, mas pode ser feito facilmente em minutos. Ainda espero que o Discourse adicione a marca d’água no núcleo ou por meio de um plugin/TC no futuro.

9 curtidas
4

Isso parece ótimo. Um componente de tema com tudo isso, deixando apenas a instalação do Chevereto como etapa manual, seria excelente.

4 curtidas
5

Eu modifiquei um pouco o Javascript do Plugin Chevereto.

Ao alterar
sibling: ".upload.btn", siblingPos:"before",
para
sibling:".code.btn",siblingPos:"after",

Agora, o ícone aparece tanto no Desktop quanto no Smartphone. :partying_face:

2 curtidas
6

Adorei! Ele tem um plugin para atingir o mesmo objetivo?

7

Seria melhor se houvesse um componente para esta marca d’água.

2 curtidas
8

Alguém pode me dizer em qual pasta as imagens são salvas?

Uma das maneiras que eu gostaria de colocar marca d’água nelas em lote é executando uma ferramenta externa de edição de imagem.

9

Alguém conseguiu fazer isso com o Discourse mais recente 3.2?

10

Isso é muito legal. Você também pode se interessar por este Theme component

2 curtidas
11

Eu tentei em um componente de tema. É apenas uma prova de conceito, então é básico. :smile:
Para cada upload, uma marca d’água é aplicada automaticamente.

Do lado técnico, assim como o Discourse pré-processa imagens antes do upload (como compressão), esta ferramenta faz o mesmo com a marca d’água. Graças à API e à biblioteca Uppy, a marca d’água é facilmente alcançável. :pray:

Me diga se você tem recursos/personalizações em mente que consideraria como um mínimo. :slight_smile:

EDIT: postarei uma versão assim que implementar configurações básicas.

14 curtidas
12

:heart: :heart: :heart:
Trabalho épico! Me avise se precisar de testadores

2 curtidas
13

Ei, isso está pronto para produção? Tenho muito interesse

1 curtida
14

Em que situação é adequado e legal imprimir marca d’água em todas as imagens?

1 curtida
15

isso está pronto para produção?

16

Desculpe, estou um pouco atrasado nisso. :sweat_smile:
Se você ainda estiver interessado, lancei um TC aqui: Watermark Image. Qualquer feedback é bem-vindo!

7 curtidas