Marca de agua en todas las imágenes cargadas

Estimados todos los desarrolladores de Discourse,

Quiero agradecer a todos los desarrolladores de Discourse por su excelente trabajo en la creación del mejor foro del mundo. :smiling_face_with_three_hearts: Personalmente, he utilizado otros programas, como Discuz y Buddyboss (WordPress), para crear varios foros en los últimos 10 años; ninguno es tan excelente como Discourse.

La única función que echo de menos en Discourse es la característica de marca de agua. Sería perfecto si Discourse admitiera marcas de agua en todas las imágenes cargadas. No necesita ser extremadamente complicado, como algunos usuarios sugirieron en este foro. (Entiendo por qué los desarrolladores ignoraron su solicitud, ya que es totalmente poco práctico.)


En mi opinión, una capacidad de marca de agua muy simple sería suficiente. Agregar un icono/texto en cada imagen cargada, simplemente para que otros sepan que la imagen proviene de mi foro cuando alguien comparte (o roba) sus imágenes en otro sitio web/plataforma.

Personalmente, siempre agrego la marca de agua yo mismo antes de cargarla al foro; sin embargo, muchos miembros de la comunidad no quieren hacerlo ellos mismos, especialmente cuando publican imágenes desde un teléfono inteligente; esperan que el foro lo haga automáticamente.

Entiendo que Discourse fue diseñado originalmente para ser más un foro basado en texto, en lugar de un foro con muchas imágenes, como un foro de fotografía. Pero gracias a muchos excelentes complementos/temas disponibles, puedo crear un foro orientado a la fotografía con Discourse de manera efectiva.


Recomiendo agregar un cuadro de carga de imagen de marca de agua en:
/admin/site_settings/category/branding

Y agregar un botón de selección en:
/admin/site_settings/category/files
2020-12-30_042258

Y un menú desplegable para la posición de la marca de agua, similar a:

Entonces, sería suficiente. No se necesitan otras funciones extravagantes.
Otras funciones, como el escalado, la opacidad, la copia de seguridad de la imagen original, etc., son geniales pero no necesarias.

Por último, quiero agradecer a todos los desarrolladores de Discourse por su continuo esfuerzo.
¡Gracias y Feliz Año Nuevo~!:kissing_heart:

7 Me gusta

Gracias, Jacky. Suena como un plugin interesante para que alguien lo pruebe. Sin embargo, no creo que lo convirtamos en una función central, aunque el núcleo puede ayudar a facilitar el plugin.

Si tienes presupuesto, te recomiendo publicar en Marketplace. Mi estimación es que un prototipo mínimo del plugin (con configuración mínima: solo proporcionar texto) tomaría entre 1 y 2 días en desarrollarse.

Agregar una marca de agua superponiendo imágenes podría tomar un poco más de tiempo para hacerlo correctamente.

12 Me gusta

Tras algunas pruebas, he encontrado una solución temporal para la marca de agua. :partying_face:

Por si acaso, a otros también podría interesarles. Quiero compartir mi solución alternativa. Espero que pueda ayudar. :smiling_face_with_three_hearts:

  1. Primero, instalo Chevereto (gratuito) en otro subdominio.
    (Es muy fácil, solo sube el archivo installer.php al servidor, carga la página y sigue la configuración. Se completa en minutos) :kissing_heart:

  2. La versión gratuita también admite marcas de agua; puedes configurarla en la configuración de carga de imágenes del panel de control.

También puedes establecer el ancho y alto máximos de la imagen en el panel de control, de modo que todas las imágenes grandes cargadas se redimensionen automáticamente.

  1. Añade el complemento de Chevereto (script) a la etiqueta <head> de Discourse
    <script async src="https://img.example.com/sdk/pup.js" data-url="https://img.example.com/upload"></script>

  2. Parece que Discourse ya no admite la etiqueta i con iconos fa, así que he tenido que modificar el código JavaScript de
    <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. Si todo está configurado correctamente, aparecerá el icono de carga en la nube en el editor de Discourse.

  4. Simplemente haz clic en el nuevo icono, arrastra y suelta la imagen en la ventana emergente; se cargará automáticamente y pegará el código en el editor con la marca de agua. :partying_face:

  5. Ahora funciona perfectamente en escritorio. Pero aún estoy averiguando cómo añadir el icono en el teléfono inteligente. :thinking: Actualizaré esta publicación si encuentro una forma de hacerlo.

Es solo una solución temporal, una alternativa, nada perfecta, pero se puede lograr fácilmente en minutos. Todavía espero que Discourse añada la marca de agua en el núcleo o mediante un complemento / TC en el futuro.

9 Me gusta

Esto se ve bien. Un componente de tema con todo esto, dejando solo la instalación de Chevereto como un paso manual, sería genial.

4 Me gusta

He modificado un poco el JavaScript del complemento Chevereto.

Al cambiar
sibling: ".upload.btn", siblingPos:"before",
a
sibling:".code.btn",siblingPos:"after",

Ahora, el icono se muestra tanto en el escritorio como en el teléfono inteligente. :partying_face:

2 Me gusta

¡Me encanta! ¿Tiene algún plugin para lograr el mismo objetivo?

Sería mejor si hubiera un componente para esta marca de agua.

2 Me gusta

¿Alguien puede decirme en qué carpeta se guardan las imágenes?

Una de las formas en que me gustaría ponerles una marca de agua en masa es ejecutando una herramienta externa de edición de imágenes.

¿Alguien ha podido lograr esto con la última versión 3.2 de Discourse?

Esto es genial. También te podría interesar este Theme component

2 Me gusta

Lo intenté en un componente temático. Es solo una prueba de concepto, así que es básico. :smile:
Para cada carga, se aplica una marca de agua automáticamente.

En el lado técnico, al igual que cómo Discourse preprocesa las imágenes antes de cargarlas (como la compresión), esta herramienta hace lo mismo con las marcas de agua. Gracias a la API y la biblioteca Uppy, la aplicación de marcas de agua es fácilmente alcanzable. :pray:

Avísame si tienes alguna característica/personalización en mente que considerarías como mínima. :slight_smile:

EDITAR: Publicaré una versión tan pronto como implemente la configuración básica.

14 Me gusta

:heart: :heart: :heart:
¡Trabajo épico! Hazme saber si necesitas algún probador.

2 Me gusta

Oye, ¿está esto listo para producción? Estoy muy interesado.

1 me gusta

¿En qué situación es adecuado y legal imprimir una marca de agua en todas las imágenes?

1 me gusta

¿Está esto listo para producción?

Lo siento, llego un poco tarde. :sweat_smile:
Si todavía estás interesado, he publicado un TC aquí: Watermark Image. ¡Cualquier comentario es bienvenido!

7 Me gusta