Partageables de code QR

:information_source: Résumé Ajoute un générateur de code QR pour partager les sources de liens
: eyeglasses: Aperçu \u003chttps://discourse.theme-creator.io/theme/Alteras/qr-code-shareables\u003e
: hammer_and_wrench: Dépôt \u003chttps://github.com/Alteras1/discourse-qr-code-shareables\u003e
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau sur les thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

\u003c!-- Remplissez "repoName" et "repoURL" pour le bouton d’installation automatique –\u003e

Installer ce composant de thème

\u003c!-- Décrivez ce thème/composant en une ou deux phrases –\u003e

Ajoute un code QR aux sources pour les liens partageables. Comprend des paramètres pour ajuster le style du code QR.

\u003cdetails\u003e
\u003csummary\u003eCaptures d’écran\u003c/summary\u003e

\u003c/details\u003e

\u003c!-- Ajoutez plus de détails et expliquez les paramètres (si applicable) –\u003e

Paramètres

Nom Description
share_in_private Autorise les codes QR dans les contextes privés (sites nécessitant une connexion et messages privés).
dots_color Couleur des points dans le code QR.
dots_type Type de points utilisés dans le code QR. \u003cbr/\u003eOptions : rounded, dots, classy, classy-rounded, square, extra-rounded
corners_square_color Couleur des coins carrés dans le code QR.
corners_square_type Type de coins carrés dans le code QR. \u003cbr/\u003eOptions : dots, square, extra-rounded, dot, rounded, classy, classy-rounded
corners_dots_type Type de points utilisés dans les coins du code QR. \u003c/br\u003eOptions : dot, square, dots, rounded, classy, classy-rounded, extra-rounded
background_color Couleur de fond du code QR.
image Image à intégrer dans le code QR. Si aucune n’est fournie, le code QR sera généré normalement sans image
image_hide_background_dots Les points de fond doivent être masqués derrière l’image.
image_margin Marge autour de l’image intégrée dans le code QR. En px
image_size Taille de l’image intégrée par rapport au code QR. Il s’agit d’un ratio de 0 à 1

Notes

Après avoir lu certaines demandes de fonctionnalités (Create a QR code for invites et Possible to share a post by save a picture with a QR code?), j’ai adoré l’idée d’ajouter des codes QR aux liens partageables. Actuellement, cela ne couvre que le partage de sujets et de messages, car la fenêtre de création d’invitations n’a pas de points d’extension de plugin ni n’utilise l’API de partage.

Ceci utilise le package https://www.npmjs.com/package/qr-code-styling pour personnaliser le code QR.

\u003cdiv data-theme-toc=“true”\u003e \u003c/div\u003e

16 « J'aime »

Comment cela devrait-il être partagé ? J’ai l’habitude d’utiliser des QR uniquement à partir de supports imprimés :man_shrugging:

3 « J'aime »

Ceci est utile dans les scénarios où les personnes avec qui vous souhaitez partager le sujet peuvent voir votre écran (par exemple, montrer rapidement le code QR sur mobile). Vous pouvez enregistrer le code QR, puisqu’il s’agit d’un élément de canevas HTML, en faisant un clic droit et en enregistrant l’image.

4 « J'aime »

La sauvegarde ou la copie ne fonctionne pas sur iPad.

1 « J'aime »

Agh, je savais que j’oubliais quelque chose en le laissant dans le canvas HTML. J’ai publié un correctif qui le convertira en png.

5 « J'aime »


Cela semble un peu étrange, cela peut être creusé au centre, tout comme l’image ci-dessous, comme le QR code.

2 « J'aime »

Vraiment un bel ajout, merci !

C’est une lacune qui devrait être comblée d’une manière ou d’une autre ? Les invitations par QR code seraient épiques !

8 « J'aime »

Corrigé. image hide background dots et image margin devraient maintenant fonctionner correctement.

5 « J'aime »

J’ai une PR vers le cœur pour quelques nouveaux points de sortie de plugin ! Je ne suis pas sûr s’il y a une raison particulière pour laquelle l’API de partage n’est pas utilisée dans les invitations, donc je vais juste garder la PR pour les points de sortie de plugin.

7 « J'aime »

Discutez-en avec l’équipe.

6 « J'aime »

Comment faire fonctionner cela pour les messages ? Je n’y arrive que pour les sujets :

J’obtiens actuellement ceci à la place :

Je suis aussi gourmand et j’aimerais pouvoir faire cela (c’est-à-dire créer un code QR) pour n’importe quel lien sur mon site nativement !!

4 « J'aime »

Ce composant de thème me plaît ! Sur le forum de ma famille, j’ai une catégorie pour les procédures “comment faire”, comme par exemple comment garder les bacs à litière de mon chat propres. Je pensais déjà à imprimer de brèves instructions à placer près des bacs à litière. Cela pourrait avoir un code QR vers le forum pour les instructions détaillées. Je pourrais le créer ailleurs en utilisant l’URL, mais j’aime le faire directement dans Discourse.

Intéressant. Pouvez-vous me faire plaisir et raconter l’histoire épique de la manière dont cela améliorerait le système d’invitation ? Comment et où les invitations par code QR seraient-elles partagées et comment seraient-elles acceptées ? Pouvez-vous partager des exemples d’autres plateformes pour montrer comment cela est fait par d’autres ? Où imaginez-vous que le code QR serait disponible dans le système d’invitation ?

Vous utilisez le nouveau lien de partage. Celui-ci ne récupère que l’URL pour le partage sans fenêtre modale. Si vous allez dans les paramètres du site du menu des messages, vous pouvez activer l’élément original du menu de partage qui montrerait également le code QR. Vous pouvez également cliquer sur l’horodatage du message pour accéder à la fenêtre contextuelle de partage originale.

5 « J'aime »

Je n’avais jamais remarqué qu’il y avait une fenêtre contextuelle de partage liée à l’horodatage de la publication ! Je dois admettre que c’est un endroit agréable pour la cacher, et le lien de partage plus léger a du sens pour les utilisations les plus courantes.

À noter, mon téléphone Android (Pixel 7 Pro) crée automatiquement des codes QR ; cela fonctionne aussi avec la fenêtre contextuelle d’invitation. Et c’est mon principal cas d’utilisation. Je n’ai jamais vraiment enquêté sur cela, cependant. Ah, le voyage de la découverte !

Ils ne sont pas aussi jolis que ceux que ce TC crée cependant !

3 « J'aime »

Oh ! Oui. C’est déjà implémenté sur Android. Qui aurait cru ! Excellent ! :rocket: merci de m’avoir instruit. C’est donc déjà génial !

Mais attendez !

Je ne vois pas cette option sur iOS ? :green_apple:

Sur iOS, je ne vois pas d’option QR ?

2 « J'aime »

La génération de code QR coûte-t-elle cher ? Si non, pourquoi ne pas l’afficher automatiquement dans la fenêtre de partage plutôt que de devoir sélectionner un bouton pour l’afficher ?

Il ne coûte rien, le reste n’est que du codage. Mais pour la plupart des gens, le QR est juste du bruit, il ne peut donc pas être directement visible.

2 « J'aime »

Cartes de visite. Une entreprise utilisant Discourse pourrait avoir un code QR pour sa plateforme afin de rejoindre. Ou, pour cette question, l’utiliser sur des affiches d’événements, etc.

EDIT : je viens de voir le post de Rob sur Android. Cependant, comme vous l’avez dit vous-même. Je préfère le faire dans Discourse
:wink:

3 « J'aime »

Comme l’a dit @Jagster, la génération du code QR n’est pas chère, c’est surtout une question de goût personnel sur la façon dont le code QR est ciblé et immédiat. Le TC utilise confortablement l’API de partage (et un peu de manipulation du DOM) pour afficher le code QR, le traitant efficacement au même niveau que les autres sources de partage. Cela correspondait plus ou moins à ma vision des codes QR comme une méthode secondaire pour envoyer des informations. Cependant, depuis que j’ai commencé mes vacances en dehors des États-Unis, j’ai été assez choqué par la prévalence des codes QR dans le monde physique.

Je pourrais envisager d’ajouter une option de code QR immédiat aux paramètres, mais je devrais probablement revoir comment/où le code QR est placé. Franchement, le placement actuel du code QR dans la modale (en vue bureau et mobile) est vraiment forcé avec la manipulation du DOM. Idéalement, en vue bureau, un code QR traité au même niveau que le bouton « copier le lien » occuperait tout le côté droit de la modale, mais cela nécessiterait un nouveau point de sortie de plugin et une bonne dose de modifications CSS. Actuellement, il n’y a qu’un seul point de sortie de plugin dans la modale de partage, et il est juste à côté du bouton « Nouveau sujet », et je veux vraiment éviter de faire du CSS complexe ou d’utiliser plus de manipulation du DOM.

tl;dr : J’y réfléchirai davantage et déciderai si l’ajout du paramètre code QR immédiat vaut l’effort supplémentaire une fois rentré des fêtes.

4 « J'aime »

Lorsque j’utilise une image, je n’obtiens pas de code QR. Y a-t-il des exigences concernant le format, la taille, etc. ?

2 « J'aime »

Hmm, c’est étrange. Il ne devrait pas y avoir d’exigences particulièrement strictes concernant l’image elle-même…

Quels sont les paramètres de l’image et de la taille de l’image que vous utilisez ?