QR Code Filter

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

There are 3 filters we support:

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 a 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 svg, and for emails we recommend html

We do not recommend image based ones unless there is no other choicem