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.
sly31
2
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
sly31
4
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);
}
?>
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…
sly31
6
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!
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!
sly31
12
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
value: "{{ item.icon.toFile.uuid.toString }}"
Works as it should! Thx you so much!