Compartibles de código QR

:information_source: Resumen Añade un generador de códigos QR para compartir fuentes de enlaces
:eyeglasses: Vista previa https://discourse.theme-creator.io/theme/Alteras/qr-code-shareables
:hammer_and_wrench: Repositorio https://github.com/Alteras1/discourse-qr-code-shareables
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en Temas de Discourse? Guía para principiantes sobre el uso de Temas de Discourse

← Rellena “repoName” y “repoURL” para el botón de instalación automática →

Instalar este componente de tema

← Describe este tema/componente en una o dos frases →

Añade un código QR a las fuentes para enlaces compartibles. Incluye ajustes para modificar el estilo del código QR.

Capturas de pantalla

← Añade más detalles y explica los ajustes (si aplica) →

Ajustes

Nombre Descripción
share_in_private Permite códigos QR en contextos privados (sitios que requieren inicio de sesión y mensajes privados).
dots_color Color de los puntos en el código QR.
dots_type Tipo de puntos utilizados en el código QR.
Opciones: rounded, dots, classy, classy-rounded, square, extra-rounded
corners_square_color Color de las esquinas cuadradas en el código QR.
corners_square_type Tipo de esquinas cuadradas en el código QR.
Opciones: dots, square, extra-rounded, dot, rounded, classy, classy-rounded
corners_dots_type Tipo de puntos utilizados en las esquinas del código QR.
Opciones: dot, square, dots, rounded, classy, classy-rounded, extra-rounded
background_color Color de fondo del código QR.
image Imagen a incrustar en el código QR. Si no se proporciona ninguna, el código QR se generará normalmente sin imagen
image_hide_background_dots Los puntos de fondo deben ocultarse detrás de la imagen.
image_margin Margen alrededor de la imagen incrustada en el código QR. En px
image_size Tamaño de la imagen incrustada en relación con el código QR. Esta es una proporción de 0 a 1

Notas

Después de leer algunas solicitudes de funciones (Create a QR code for invites y Possible to share a post by save a picture with a QR code?), me encantó la idea de añadir códigos QR a los enlaces compartibles. Actualmente, esto solo cubre la compartición de temas y publicaciones, ya que el modal de creación de invitaciones no tiene puntos de conexión de complementos ni utiliza la API de Compartir.

Esto utiliza el paquete https://www.npmjs.com/package/qr-code-styling para personalizar el código QR.

16 Me gusta

¿Cómo se debe compartir eso? Estoy acostumbrado a usar solo códigos QR de medios impresos :man_shrugging:

3 Me gusta

Esto es útil en escenarios donde las personas con las que deseas compartir el tema pueden ver tu pantalla (es decir, mostrar rápidamente el código QR en el móvil). Puedes guardar el código QR, ya que es un elemento de lienzo HTML, haciendo clic derecho y guardando como imagen.

4 Me gusta

Guardar o copiar no funciona en el iPad.

1 me gusta

Ah, sabía que me olvidaba de algo al dejarlo en un lienzo HTML. He implementado una corrección que lo convertirá en un png.

5 Me gusta


Se siente un poco extraño, se puede vaciar en el centro al igual que la imagen a continuación, como el código QR.

2 Me gusta

¡Muy buena adición, gracias!

¿Es esa una brecha que debería cerrarse de alguna manera? ¡Las invitaciones por QR serían épicas!

8 Me gusta

Se implementó una corrección. image hide background dots y image margin deberían funcionar correctamente ahora.

5 Me gusta

¡Tengo un PR para el núcleo para algunos nuevos puntos de conexión de complementos! No estoy seguro de si hay alguna razón en particular por la que la API de Compartir no se está utilizando en las invitaciones, así que mantendré el PR para los puntos de conexión de complementos.

7 Me gusta

Habla con el equipo sobre eso.

6 Me gusta

¿Cómo haces que esto funcione para las publicaciones? Solo puedo conseguirlo para temas:

Actualmente estoy obteniendo esto en su lugar:

También soy codicioso y me encantaría poder hacer esto (es decir, crear un código QR) para cualquier enlace en mi sitio de forma nativa.

4 Me gusta

¡Me encanta este componente temático! En el foro de mi familia, tengo una categoría para procedimientos de cómo hacer, como por ejemplo, cómo mantener limpias las cajas de arena de mi gato. Ya estaba pensando en imprimir instrucciones breves para poner junto a las cajas de arena. Eso podría tener un código QR al foro para las instrucciones detalladas. Podría crearlo en otro lugar usando la URL, pero me gusta hacerlo directamente en Discourse.

Interesante. ¿Puedes complacerme y contar la épica historia de cómo esto sería una mejora para el sistema de invitaciones? ¿Cómo y dónde se compartirían las invitaciones con código QR y cómo se aceptarían? ¿Puedes compartir ejemplos anteriores de otras plataformas para mostrar cómo lo están haciendo otros? Además, ¿dónde imaginas que el código QR estaría disponible en el sistema de invitaciones?

Estás usando el nuevo enlace para compartir. Eso solo captura la URL para compartir sin una ventana emergente. Si vas a la configuración del sitio del menú de publicaciones, puedes habilitar el elemento original del menú de publicaciones para compartir, que ahora también mostraría el código QR. También puedes hacer clic en la marca de tiempo de la publicación para acceder a la ventana emergente original para compartir.

5 Me gusta

¡Nunca me di cuenta de que había una ventana emergente para compartir conectada a la marca de tiempo de la publicación! Debo admitir que es un buen lugar para colocarla, y el enlace para compartir más simple tiene sentido para los usos más comunes.

Cabe destacar que mi teléfono Android (Pixel 7 Pro) crea automáticamente códigos QR; esto también funciona con la ventana emergente de invitación. Y ese es mi principal caso de uso. En realidad, nunca investigué esto. ¡Ah, el viaje de descubrimiento!

¡Pero no son tan bonitos como los que crea este TC!

3 Me gusta

¡Oh! Sí. Eso ya está implementado en Android. ¡Quién lo diría! ¡Excelente! :rocket: gracias por educarme. ¡Así que ya es épico!

¡Pero espera!

¿No veo esta opción en iOS? :green_apple:

¿En iOS no veo una opción de QR?

2 Me gusta

¿Es caro generar el código QR? Si no lo es, ¿por qué no mostrarlo automáticamente en la ventana modal para compartir en lugar de requerir la selección de un botón para mostrarlo?

No cuesta nada, así que el resto es solo codificación. Pero para la mayoría de la gente, el QR es solo ruido, por lo que no puede ser visible directamente.

2 Me gusta

Tarjetas de visita. Una empresa que usa Discourse podría tener un código QR para su plataforma para unirse. O, para el caso, usarlo en carteles de eventos, etc.

EDITAR: Acabo de ver la publicación de Rob sobre Android. Sin embargo, como tú mismo dijiste. Prefiero hacerlo dentro de Discourse
:wink:

3 Me gusta

Como dijo @Jagster, no es caro generar el código QR, se trata principalmente del gusto personal sobre cuán enfocado e inmediato es el código QR. El TC utiliza cómodamente la API de Compartir (y un poco de manipulación del DOM) para mostrar el código QR, tratándolo efectivamente al mismo nivel que las otras fuentes para compartir. Esto más o menos coincidió con mi visión de los códigos QR como un método secundario para enviar información. Sin embargo, desde que comencé mis vacaciones fuera de los EE. UU., me ha sorprendido bastante la prevalencia de los códigos QR en el mundo físico.

Podría explorar la adición de una opción de código QR inmediato a la configuración, pero probablemente necesitaría revisar cómo/dónde se coloca el código QR. Honestamente, la ubicación actual del código QR en el modal (tanto en la vista de escritorio como en la móvil) está muy forzada con manipulación del DOM. Idealmente, en una vista de escritorio, un código QR tratado al mismo nivel que el botón “copiar enlace” ocuparía todo el lado derecho del modal, pero eso requeriría una nueva salida de plugin y una buena dosis de cambios en CSS. Actualmente solo hay una salida de plugin en el modal de compartir, y está al lado del botón “Nuevo Tema”, y realmente quiero evitar hacer un CSS complejo o usar más manipulación del DOM.

tl;dr: Lo pensaré más y decidiré si agregar la configuración de código QR inmediato vale el esfuerzo adicional después de que regrese de las vacaciones.

4 Me gusta

Cuando uso una imagen, no obtengo un código QR. ¿Hay alguna exigencia sobre el formato, tamaño, etc. que se debe usar?

2 Me gusta

Hmm, eso es extraño. No debería haber ningún requisito particularmente estricto con la imagen en sí…

¿Cuál es la imagen y la configuración de tamaño de imagen que está utilizando?