Inline SVG from Select Field with fetch from structure field

Hey,

on the page I select an SVG file from a structure field at the site.yml.
And I want to display an SVG inline.

site.yml:

icons:
  label: Icons
  type: structure
  width: 1/2
  fields:
    icon:
      label: Icon
      type: files
      uploads: svg
    iconName:
      label: Name
      type: text
      icon: text

page.yml:

icon:
  label: Icon
  type: select
  options: query
  query:
    fetch: site.icons.toStructure
    text: "{{ item.iconName }}"
    value: "{{ item.icon.toFile }}"

In my template I tryed this.

template:

<?php 
   $icon = $page->baederIcon();
   echo $icon->read();
?>

But the SVG is displayed as an img tag!
Where is the mistake?

Thank you for your help.

In your template, you have to use the “svg” helper :

<?= svg($page->baederIcon()->toFile()); ?>

It’s better to use if condition to check if the file exists :

<?php
if($icon = $page->baederIcon()->toFile()) {
    echo svg($icon);
}
?>

Hey @sly31,

thx for your quick reply!

When i do:

<?= svg($page->baederIcon()->toFile()); ?>

An error is displayed svg(): Argument #1 ($file) must be of type Kirby\Cms\File|string, null given, called in …

And when i try

<?php
if($icon = $page->baederIcon()->toFile()) {
    echo svg($icon);
}
?>

Nothing happens :frowning:

Sorry, I used your template code, but your field name in blueprint is “icon”, so try this :

<?php
if($icon = $page->icon()->toFile()) {
    echo svg($icon);
}
?>

:wink: the field name is correct…
But nothing happens!

May be the toFile() is the problem because i do this in the page.yml

icon:
  label: Icon
  type: select
  options: query
  query:
    fetch: site.icons.toStructure
    text: "{{ item.iconName }}"
    value: "{{ item.icon.toFile }}"

I don’t know…

Try to remove toFile in your blueprint, you have tu use this in your template.

When i only use value: " {{ item.icon }}" an error in the panel is displayed: Array to string conversion in file:…

What could be an alternative for teh toFile in item.icon.toFile?

I used the same setup to display normal images and there everythink works great!

Try item.icon.id

What gets stored in your select field? You should have either a file id there or a file uuid.

On the site level i upload a svg file in the structure field!
When i store the svg-code in a text field all is fine!

Please provide an example of what you structure field then looks like in the content file!

Did you try to use item.icon.id in your page.yml file ?

@texnixe @sly31 Sorry for my late reply!

@sly31

Did you try to use item.icon.id in your page.yml file ?

Yes, I have but no img or svg is displayed. Even if I create an additional id field in the site.yml.

@texnixe

Please provide an example of what you structure field then looks like in the content file!

In the site.yml the icons are saved like this:

Baedericons:

- 
  icon:
    - file://aYawN8yvW8TuF9rq
  iconname: Schwarz

In the page-content-file the icons are saved like this:

Baedericon: <img alt="" src="http://..../name-of-icon.svg">

That’s what I thought, don’t know why you are trying to store an image object here.

Try:

value: "{{ item.icon.toFile.uuid.toString }}"

That’s what I thought, don’t know why you are trying to store an image object here.

Because I was helpless :crazy_face:

value: "{{ item.icon.toFile.uuid.toString }}"

Works as it should! Thx you so much!