Plugin: QR Code – Field and Page-Method

Plugins
,
1

Kirby CMS Panel Field and Page-Method rendering a QR Code.

Usage

Field

Add a kirby panel field to your blueprint to show a qrcode of the kirby $page->url() within the panel. This plugin uses a global field definition to cut some corners.
Default paramters of QR code lib will be used to render the image or the parameters set in your config.php.

#fieldname: fieldtype
qrcode: qrcode

Page Method

The plugin also adds a $page->qrcode() function which returns an image as Media object to use in templates etc.

You can use the default values, override them or set your own parameters on-the-fly using an associative array. Missing parameters will fallback to defaults of lib.

// DEFAULTS
$qrcodeDefault = $page->qrcode(); // Kirby Toolkit Media Object

// CUSTOM
$allCustomParameters = [
	'Text' => $page->url(), // plugin default
    'Size' => 300,
    'Padding' => 10,
    'ErrorCorrection' => 'high',
    'ForegroundColor' => ['r' => 0, 'g' => 0, 'b' => 255, 'a' => 0],
    'BackgroundColor' => ['r' => 255, 'g' => 255, 'b' => 255, 'a' =>0],
	'Label' => 'You take the blue pill',
    'LabelFontSize' => 16,
    'ImageType' => Endroid\QrCode\QrCode::IMAGE_TYPE_PNG,  // lib default
    'Filename' => $page->slug().'-qrcode', // plugin default
];

// override defaults. this can be done in config.php as well.
c::set('plugin.qrcode', $allCustomParameters);
$qrcodeCustom = $page->qrcode(); // using new defaults now

// or use them on-the-fly
$qrcodeCustom = $page->qrcode([
    'Label' => 'You take the red pill',
    'ForegroundColor' => ['r' => 255, 'g' => 0, 'b' => 0, 'a' => 0],
    'ImageType' => Endroid\QrCode\QrCode::IMAGE_TYPE_JPEG,
	]);

// then use media object to get brick and echo the image
// https://github.com/getkirby/toolkit/blob/master/lib/media.php#L539
echo $qrcodeCustom->html();
2 Likes
2

k3 version: https://github.com/bnomei/kirby3-qrcode

1 Like
3

Why would you use a QR code on a website? Is a simple link not better?

4

If the visitor has a mobile, he/she can make a photo of the QR from any other screen and don’t needs to type the link on his mobile.

5

What do you mean with “visitor”?

6

A visitor is a visitor (in German: “Besucher”) e.g. in a company, who wants to have the homepage link of the company at his/her mobile.
The screen with the QR is owned by the company and e.g. in front of a wall in the public parts of that building.
Or on a German website: https://www.sav-barchfeld.de/ueber-die-website/kontakt

7

You can actually stuff quite a bit of stuff into a QR code, not just a page link. Depends what you want to share with it. But, generally your right… QR codes are best used in printed matter.

8

Thx. Such a weird use case. Isn’t a static page (or printed poster?) not better for this?

Personally I wouldn’t want to change the links on my sites to cater such “kiosk visitors” as they litter the rest of the page for everyone else.

9

i use with a non-public booking plugin i created. pdf invoices based on html layout (using mpdf) including the qr-code image are send to customers per email (and online version). the qrcode can be a link with token to make it more secure.
at the event the ticket can quickly be verified by the staff with just a regular mobile phone - scanning the qrcode from customers mobile screen.

1 Like
10

I would like to use QR-Codes to provide a simple delivery of event-cards…
Also vCards are an interesting usecase…
there are several people who discover a website via laptop/desktop… and just pulling out smartphone to scan a qr-code.
loading the website again via smartphone-browser… and then click on a link to download a file… is not the shortest workflow… thx for this plugin… will test it in near future. is it still working? i’m asking, because https://endroid.nl/ is not realy usefull right now =)

11

i recently published a v2 with updated 3rd party lib and a kirby field to view and download the qr code from inside the panel

Further customization of the generated image

echo $page->qrcode([
    'margin' => 10,
    'encoding' => 'UTF-8',
    'foregroundColor' => new \Endroid\QrCode\Color\Color(0, 0, 0),
    'fackgroundColor' => new \Endroid\QrCode\Color\Color(255, 255, 255),
    'labelText' => 'Scan the code',
    'logoPath' => __DIR__.'/../assets/images/getkirby.png',
    'size' => 200,
])->html(
    $page->slug() . '.png'
);

site/blueprints/default.yml

fields:
  # current page
  qrcode: qrcode

  qrcode2:
    type: qrcode
    title: Text below image

  # title with query
  qrcode3:
    type: qrcode
    title: "{{ page.title }}"

  # custom url
  qrcode4:
    type: qrcode
    title: Panel Url of {{ page.title }}
    url: "{{ page.panelUrl }}"

  # custom url and custom filename with |
  qrcode4:
    type: qrcode
    title: Issue 7
    url: "https://github.com/bnomei/kirby3-qrcode/issues/7|Issue 7"

site/templates/default.qr.php

$page->qrcode()->download(
    $page->slug() . '.png'
);
12

many thanks to @dgsiegel for spotting a few issues with my plugin and suggesting solutions which made it very easy for me to fix them quickly. :heart:

1 Like
13

@bnomei I have a question about this, as I have a very similar scenario in my current project. I would like to send the customers the qr-code image via email, but not as part of a PDF, just a png of the QR-code itself.

Using your plugin, can I somehow – in a page creation hook – create a QR code that is saved as a file to the newly created page? Or is there another way to attach the QR code to an email?

Thanks!