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