You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Encodes the given text into a QR code using the specified options, returning an image resource.
4
+
keywords: []
5
+
action:
6
+
aliases: []
7
+
related: []
8
+
returnType: images.ImageResource
9
+
signatures: ['images.QR OPTIONS']
10
+
toc: true
11
+
math: true
12
+
---
13
+
14
+
{{< new-in 0.141.0 >}}
15
+
16
+
The `images.QR` function encodes the given text into a [QR code] using the specified options, returning an image resource. The size of the generated image depends on three factors:
17
+
18
+
- Data length: Longer text necessitates a larger image to accommodate the increased information density.
19
+
- Error correction level: Higher error correction levels enhance the QR code's resistance to damage, but this typically results in a slightly larger image size to maintain readability.
20
+
- Pixels per module: The number of image pixels assigned to each individual module (the smallest unit of the QR code) directly impacts the overall image size. A higher pixel count per module leads to a larger, higher-resolution image.
21
+
22
+
Although the default option values are sufficient for most applications, you should test the rendered QR code both on-screen and in print.
23
+
24
+
[QR code]: https://en.wikipedia.org/wiki/QR_code
25
+
26
+
## Options
27
+
28
+
text
29
+
: (`string`) The text to encode.
30
+
31
+
level
32
+
: (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
33
+
34
+
Error correction level|Redundancy
35
+
:--|:--|:--
36
+
low|20%
37
+
medium|38%
38
+
quartile|55%
39
+
high|65%
40
+
41
+
scale
42
+
: (`int`) The number of image pixels per QR code module. Must be greater than or equal to `2`. Default is `4`.
43
+
44
+
targetDir
45
+
: (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image. Use Unix-style slashes (`/`) to separarate path segments. If empty or not provided, the image is placed directly in the `publishDir` root. Hugo automatically creates the necessary subdirectories if they don't exist.
{{< qr text="https://gohugo.io" level="high" scale=3 targetDir="codes" class="qrcode" />}}
77
+
78
+
## Scale
79
+
80
+
As you decrease the size of a QR code, the maximum distance at which it can be reliably scanned by a device also decreases.
81
+
82
+
In the example above, we set the `scale` to `2`, resulting in a QR code where each module consists of 2x2 pixels. While this might be sufficient for on-screen display, it's likely to be problematic when printed at 600 dpi.
This module size is half of the commonly recommended minimum of 0.170 mm.\
87
+
If the QR code will be printed, use the default `scale` value of `4` pixels per module.
88
+
89
+
Avoid using Hugo's image processing methods to resize QR codes. Resizing can introduce blurring due to anti-aliasing when a QR code module occupies a fractional number of pixels.
90
+
91
+
{{% note %}}
92
+
Always test the rendered QR code both on-screen and in print.
93
+
{{% /note %}}
94
+
95
+
## Shortcode
96
+
97
+
Call the `qr` shortcode to insert a QR code into your content.
98
+
99
+
Use the self-closing syntax to pass the text as an argument:
100
+
101
+
```text
102
+
{{</* qr text="https://gohugo.io" /*/>}}
103
+
```
104
+
105
+
Or insert the text between the opening and closing tags:
106
+
107
+
```text
108
+
{{</* qr */>}}
109
+
https://gohugo.io
110
+
{{</* /qr */>}}
111
+
```
112
+
113
+
The `qr` shortcode accepts several arguments including `level` and `scale`. See the [related documentation] for details.
0 commit comments