From 82a2365bd5afec9ff1998ab3abf3aa77a985a125 Mon Sep 17 00:00:00 2001
From: Joe Mooring <joe.mooring@veriphor.com>
Date: Fri, 24 Jan 2025 16:28:05 -0800
Subject: [PATCH] Add print-only QR code example

---
 content/en/functions/images/QR.md | 36 ++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/content/en/functions/images/QR.md b/content/en/functions/images/QR.md
index 1e8783d05..8b372e948 100644
--- a/content/en/functions/images/QR.md
+++ b/content/en/functions/images/QR.md
@@ -6,7 +6,7 @@ action:
   aliases: []
   related: []
   returnType: images.ImageResource
-  signatures: ['images.QR TEXT OPTIONS']
+  signatures: ['images.QR TEXT [OPTIONS]']
 toc: true
 math: true
 ---
@@ -72,6 +72,40 @@ Specify `level`, `scale`, and `targetDir` as needed to achieve the desired resul
 
 {{< qr text="https://gohugo.io" level="high" scale=3 targetDir="codes" class="qrcode" />}}
 
+To include a QR code that points to the `Permalink` of the current page:
+
+{{< code file=layouts/_default/single.html >}}
+{{ with images.QR .Permalink }}
+  <img
+    src="{{ .RelPermalink }}"
+    width="{{ .Width }}"
+    height="{{ .Height }}"
+    alt="QR code linking to {{ $.Permalink }}"
+    class="qr-code"
+    loading="lazy"
+  >
+{{ end }}
+{{< /code >}}
+
+Then hide the QR code with CSS unless printing the page:
+
+```css
+/* Hide QR code by default */
+.qr-code {
+  display: none;
+}
+
+/* Show QR code when printing */
+@media print {
+  .qr-code {
+    display: block; 
+  }
+}
+```
+
+
+
+
 ## Scale
 
 As you decrease the size of a QR code, the maximum distance at which it can be reliably scanned by a device also decreases.