QR Code Filter

QR Codes are great ways to add links to pages, tickets, and emails. JRNI QR Code filter supports multiple types of QR Code

We support the following three filters:

qr_image: size
qr_svg: size, color='000
qr_html

SVG Example

{%- assign url = company.host | append: "/my_url/" | append: company.id -%}
  <div class="qrcode">
    {{url | qr_svg : 5}}
  </div>

HTML Example

This example is currently a little complex as it both has to make sure the CSS is set up currently and if this is being used in an email - so email renders do not like the long lines - so it adds in a new-line break for each row of the table that the QR code is rendered in

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    .qrcode table, .qrcode th, .qrcode td {
      border: 0px;
      border-collapse: collapse;
    }
    .qrcode td{ width:5px; height: 5px}
    .black{background-color:#000;}
  </style>
</head>
<body>
    <div class="qrcode">
{% assign val = "" | append: company.id %}
{% capture newLine %}<tr>
{% endcapture %}
    {{ val | qr_html | replace: "<tr>", newLine }}
    </div>
    </div>
</body>
</html>

Image Example

<img src="{{val | qr_image: 5}}" />

For posters, webpages, pdfs, etc, we recommend using svg images, and for emails, we recommend HTML

We do not recommend image-based ones unless there is no other choice.