invalid field type "qrcode"

[teichsta]

@bnomei after installing the plugin a got "invalid field type ("qrcode")" in the panel.

What i did:

• install plugin using composer
• add field qrcode: qrcode to the blueprint

Anything else that needs to be configured?

(on kirby 3.5.7)

[bnomei]

this plugin has no field for the panel. i never need that before.

i usually use the "trigger download" example from the readme to create a content representation. i used .qr but it really can have any extension you want since the browser will pick up the mime type correctly from the header sent by the plugin.

sometimes i create a janitor button in panel to copy that url to the clipboard if the client requests it. but usually appending the .qr extension to the url of the page works well enough.

if and why do you need a panel field displaying the qr code?

[teichsta]

we use kirby as a colaborative CMS in education (class room). The QRCode is used to be thrown on the wall (beamer) and let the pupils login to this panel using their tablets by scanning the code …

[bnomei]

ah thats neat. so you do need it in panel or is it good enough using a content representaion?

[teichsta]

i would prefer both

• showing in the panel (inside a special support section)
• providing a link to download and paste into some Word-Doocument print out and pin it to the wall

[bnomei]

done in v2. https://github.com/bnomei/kirby3-qrcode#panel-field-url-of-pagefile-as-qrcode

if your budget allows it i would appreciate if you bought me a coffee or something similar. :wink:

[teichsta]

Thanks for sharing your code! After upgrading to 2.0 i get:

in the panel, the underlying link looks like http://localhost:8090/plugin-qrcode//4649eb7ff706e7e66d850fe5378d4a1121e811d6 which seems to be incomplete. The generated HTML element look like this:

<div class="qrcode-wrapper" name="qrcode_panel" label="Qrcode_panel" saveable="true" signature="fcdc1d84214113a5679fdf46149a30d7" strict="true" translate="translate" type="qrcode" width="1/2" section="support-col-1-fields" endpoints="[object Object]"><a href="http://localhost:8090/plugin-qrcode//4649eb7ff706e7e66d850fe5378d4a1121e811d6" download="">{ "value": "" }</a></div>

Also added the (it seems optional) block to config.php to no avail. Any further idea? Any further requirements needed to be installed?

[bnomei]

i will investigate. it worked on my local setup.

what is the uid of the page the field is added to? like "/blog/some-post".

[bnomei]

is that page a draft or published (listed/unlisted)?

[teichsta]

neither, nor the qrcode shall be integrated on the site actually: http://localhost:8090/panel/site#support

[bnomei]

it will not work on site. that kirby object has no url.

[teichsta]

ok, but the field can take the property URL which i configured like this:

          qrcode_panel:
              type: qrcode
              width: 1/2
              url: "https://github.com/bnomei/kirby3-qrcode"

[bnomei]

i added support for site object which will have site()->url() as url. https://github.com/bnomei/kirby3-qrcode/releases/tag/v2.0.1

[teichsta]

thanks a lot, also for implementing the title. In our case, i'd use the titel as the caption of the image. Probably you like my solution, too which:

• uses figure element rather than "normal" div
• use the given title as figcaption
• centers the qrcode and its figure caption inside it's "cell"

<template>
  <figure class="qrcode-wrapper">
    <a :href="url" download v-html="image"></a>
    <figcaption class="figure-caption">
      {{ title }}
    </figcaption>
  </figure>
</template>

<script>
export default {
  name: 'QRCode',
  props: {
    image: String,
    url: String,
    title: String
  }
}
</script>

<style lang="scss">
.qrcode-wrapper {
  display: block;
  text-align: center;

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .figure-caption {
      margin-top: .5rem;
      text-align: center;
  }
}
</style>

[teichsta]

There is one last thing :-)

It would be awesome, to configure the URL being represented by the QR code by configuring it as prop of the field. In my case i'd like to show two different URLs, one for the Site (Homepage) and one for the backend (panel). As the code is being generated as siteMethod i am wondering how this could be accomplished.

Would it be possible to move the code into the fields > props section? Something like: when a prop textis given use this as the QRCode content, if not, go ahead and use site->url() resp. page->url().

As i am not aware (enough) of the kirby plugin lifecycle, so this might be dumb question :-)

[bnomei]

some great ideas. will see what i can do.

[bnomei]

with two props its not easy to generate one image. but you can now set a figure caption as title and optionally customize the url and filename. i think with the addition of the query language that should cover your usecases.

thanks for your input. the plugin really improved a lot.

some examples from the readme.

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"

[bnomei]

some less obvious uses can be found in my test: https://github.com/bnomei/kirby3-qrcode/tree/master/tests/site/blueprints