How to insert svg icon in blueprint (list field)

The CMS Questions
1

Have section with list of child pages. For better overview want to print some additional info next to each child page title.
Can not figure out how to conditionally put icon to be show for each page in panel list. Will appreciate any advice. Part of blueprint:

  - width: 1
    sections:
      users:
        label: "People"
        text: "{{ page.content.title }} |  | {{ page.content.married ? <want to put check icon here> : '' }}"
        type: pages
        layout: list
        templates:
          - people
2

A few thoughts:

  • You can use the fields directly as page.title, page.married - no need to go through the content object unless your field names conflict with page method names, but those don’t
  • Use the field method toBool to ensure that your page content properly works with the ? : statement
  • You have to use {< >} instead of {{ }} if you want to put out HTML
text: "{{ page.title }} |  | {< page.married.toBool ? <svg code> : '' >}"
  • If you want to load the SVG, I would actually suggest to create a page method where you put all the logic and then you just to {< page.yourPageMethod >}
  • Or you go with the :heavy_check_mark: emoji
2 Likes
3

Is it possible to put built-in (Kirby) provided icons?

p.s. page.content.married - its toggle in People page

4

Yes, sadly not directly with <k-icon> but you can use the actual SVG string directly: <svg aria-hidden="true" class="k-icon" ><use xlink:href="#icon-check" /></svg>

Still better to use toBool cause page.married/page.content.married will give you a field object, which will always be true.

1 Like
5

I’d argue that it can make sense to always go via the content object to prevent such clashing issues with Kirby methods. I’ve seen more than one person doing this to have consistent coding style.

1 Like
6

Fair enough, when you aren’t as familiar with what is a protected Mable or not, always going viable content object will make sure that you not unknowingly run into a conflict at some point.

7

Regarding not referring to “content” - it was working for title, but for field “images” (type: files) it was necessary to use “content”:

text: "{{ page.title }} | {{ page.content.images.toFiles.count }} images
1 Like
8

Was able to show Kirby icon as @distantnative suggested, but when trying it conditionally - it does not show up. Checked content folder - value is true for married. Is syntax for inserting condition correct?

 text: "{{ page.title }} | {< page.married.toBool ? <svg style='display: inline-block' aria-hidden='true' class='k-icon' ><use xlink:href='#icon-check' /></svg> : '' >} | {{ page.content.images.toFiles.count }} images"
9

You need to wrap it as a string: "<svg .... >". But you will run into nesting problems with the other ", inner ' - too many levels. That’s why it’d be better to move that code into a page method:

public function marriedIcon()
{
  if ($page->married()->toBool()) {
    return '<svg style="display: inline-block" aria-hidden="true" class="k-icon"><use xlink:href="#icon-check" /></svg>';
  }
}

 text: "{{ page.title }} | {< page.marriedIcon >} | {{ page.content.images.toFiles.count }} images"
1 Like
10

Did not know where exactly to put example code (“public function…”), so used suggested approach to create plugin:

/site/plugins/pagemethods/index.php

<?php

Kirby::plugin('my/page-methods', [
  'pageMethods' => [
      'marriedIcon' => function () {
        if ($this->married()->toBool()) {
          return '<svg style="display: inline-block" aria-hidden="true" class="k-icon"><use xlink:href="#icon-check" /></svg>';
        }
      }
  ]
]);

usage as in previous @distantnative post:

text: "{{ page.title }} | {< page.marriedIcon >} | {{ page.content.images.toFiles.count }} images"

Thank You @distantnative and @texnixe for advice!

11

The suggested code would have gone into a page model. As a page model method, the method is specific to this page type, whereas the page method you are using now can be used with any page type.

1 Like
12

A bit offtopic, but regarding refering to “content”, noticed different results if I write:

text: "{{ page.uuid }}"

then I get: “page://wmeVOZefJdKZ0dEj”

but if I write:

text: "{{ page.content.uuid }}"

then I get: wmeVOZefJdKZ0dEj

13

Right, page.content.uuid gets the value stored in the content file, whereas page.uuid is a native Kirby method that returns the “full” uuid including the model: $page->uuid() | Kirby CMS

1 Like