Adding a custom logo to a QR code

The QR code format is designed with built-in error correction. This allows part of the QR code to be obscured while still allowing the QR to be scanned and read.

The way logos usually work are they are simply placed on top of the QR code. Yes, this obscures some of the code, but the code can still be read if the logo is small enough, because the error correction will be able to correct for the "missing" parts of the QR code. QR code error correction levels allow between 7% and 30% of the QR code to be obscured.

You can currently easily display a logo on top of a QR code using the Barcodes module in conjunction with standard Drupal theming. The barcode--qrcode.html.twig template controls how QR codes are displayed - all you have to do is add an <img> tag for your logo and some CSS to this template to control the size and positioning of your logo, and your logo image will appear on top of the QR code.

... Example of what to put in barcode--qrcode.html.twig ... this needs some explanation for the changes, as well as some explanation about how to override a module-provided template like this without hacking the default template ...

{{ attach_library('barcodes/logo') }}
<div class="barcode barcode-{{ type|replace({'+': 'plus'})|lower }}">
  <img class="logo" src="/core/themes/bartik/favicon.ico" />
  <div class="code">{{ value | barcode(type='QRCODE,H') }}</div>
  {% if show_value %}
    <div class="value">{{ value }}</div>
  {% endif %}
</div>

See https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib... for more details about how to use the barcode Twig filter.

diff --git a/barcodes.libraries.yml b/barcodes.libraries.yml
index 430ae95..3283cef 100644
--- a/barcodes.libraries.yml
+++ b/barcodes.libraries.yml
@@ -1,3 +1,7 @@
+logo:
+  css:
+    theme:
+      css/logo.css: {}
 barcodes:
   version: 1.0.0
   css:

$ cat css/logo.css 
.logo {
  position: relative;
  top: 66px;
  left: 34px;
}

Steps:

• Increase the default error correction level.
• Add your logo image to the template
• Add your CSS to position your logo image over the barcode.

This can be done easily if you are using the barcode Twig filter, but it can't currently be done for the Block or the Field Formatter output. This increases the complexity of the QR code and allows more of it to be obscured.

• Level L – up to 7% unreadable (default)
• Level M – up to 15% unreadable
• Level Q – up to 25% unreadable
• Level H – up to 30% unreadable

The level of QR code error correction is chosen when the QR code is created. The reason why all QR codes aren’t created
with a level H error correction is because that makes the QR code bigger. The more data that’s being encoded, the more
complexity the QR code needs to devote to encoding that data.

- The lower the error correction level, the less dense the QR Code image is, which improves the minimum printing size.
- The higher the error correction level, the more "damage" the QR Code can sustain before it becomes unreadable.

To use different error correction levels in the Twig filter, append the level to the barcode type like this:

barcode(type='QRCODE,L') Level L
barcode(type='QRCODE,M') Level M
barcode(type='QRCODE,Q') Level Q
barcode(type='QRCODE,H') Level H