Feature Request: Formatting QR Codes

ralf-krause commented 5 months ago

Prerequisites

[X] I am requesting the new feature to the correct repository.
[X] I checked the latest version on GitHub and the README.md documentation to ensure that this functionality does not already exist.
[X] I searched to make sure that this feature has not already been requested.
[ ] I have, or I know someone who has, the ability and willingness to test the new feature on a Moodle LMS-based site.
[X] I agree to submit one feature request per issue ticket (do not submit multiple requests in one issue ticket).
[X] I understand that development and support is provided by volunteer(s) and that all final implementation decisions are up TNG Consulting Inc.

Feature Request - The User Story

Could it be possible that we can set the size of qr codes by a parameter? Currently we get qr codes with 480x480 pixel.

Could it be possible to set the border-radius to 0 (zero)? In Moodle 4.3 and the Boost theme all images have rounded corners. The current border-radius for the qr codes generated by filtercodes is 1rem.

Screenshots / Mock-ups

No response

Alterative you have considered

No response

Additional information

No response

Planning on submitting a solution in a pull request (PR)?

No

Code of Conduct

[X] I have read and agree to the project's code of conduct.

michael-milette commented 5 months ago

Hi @ralf-krause ,

Thank you for your feedback. I will take a look to see if it is possible to add a parameter to set the size of the QR code. In the meantime, you can set the size by adding some CSS to your theme. For example, the following would set the size, height and width, of all QR Codes generated by FilterCodes in the Moodle LMS site to 200px:

img.fc-qrcode {
    max-width: 200px!important;
}

As for rounding the corners, I am not sure where you are getting a border-radius of 1rem for rounded corners. FilterCodes does not round the corners of the QR Code itself. Perhaps something in your theme is doing it?

You could fix this by adding the following CSS to your theme:

img.fc-qrcode {
    border-radius: 0!important;
}

I will consider your request for a sizing option.

Best regards,

Michael Milette

ralf-krause commented 5 months ago

Hi Michael,

I found this CSS statements for formatting the qr codes myself. The problem for setting the size of all qr codes to 200 pixel will be that we have qr codes with only small information content like {qrcode} Hello World! {/qrcode}. And you have qr codes containing a lot of informations like https://machmitnetz.de/course/view.php?id=5&section=12#tabs-tree-start

The rounded corners for images are set in the standard Boost theme. All images get rounded corner. It seems to be a good idea to set the border-radius to 0 for all QR codes. I think this should be a bug in Moodle 4.3 because also very small images get rounded corners with border-radius: 1rem … I found this in my courses in Moodle 4.3 for example with the cc license image https://machmitnetz.de/course/view.php?id=5&section=14#tabs-tree-start

Best regards, Ralf

ralf-krause commented 5 months ago

Hi Michael,

in my testing platform for Moodle I installed the FilterCodes plugin 2.4.4dev. To get qr codes without rounded corners I set the css statement .fc-qrcode { border-radius: 0 !important; }. I set no css max-width for the qr codes. To size the qr code to 300 pixel I put the generated qr code into a html div with the max-width of 300 pixels.

Yes, it works but using the html div is nothing for all Moodle users. So a size parameter would be very nice for the FilterCodes qr code generator. :-)

Best regards, Ralf

<p><strong>[{qrcode}] Hallo Welt! [{/qrcode}]</strong></p>
<div style="max-width: 300px;">
  <p>{qrcode} Hallo Welt! {/qrcode}</p>
</div>

michael-milette / moodle-filter_filtercodes