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
Updated 10 months ago