I have a structure field where each entry must take 2 images. Once selected, I’d like the structure field to display the image filenames in the table columns - right now, it just display a small thumbnail preview of the images.
Am I missing something obvious?..
Hm, you can create custom previews for custom fields and there is a plugin by @sylvainjule that provides missing previews for some field types. It is not really clear from the docs if you can also override field previews.
I think you’re thinking of the Kirby Previews Plugin. It provides previews to some of the missing field types - like ‘tag’ - but does not help in this case…
As I said, I don’t know if you can override existing previews. If that’s possible, the plugin could be a starting point for your own implementation.
Yes, you can override existing previews. In your case, something like this can do the trick:
panel.plugin('custom/plugin', {
components: {
'k-files-field-preview': {
props: {
value: Array,
field: Object
},
template: `
<template>
<ul v-if="value" class="k-files-field-preview">
<li v-for="file in value" :key="file.url" class="k-files-field-preview__name">
{{ file.filename }}
</li>
</ul>
</template>
`
}
}
});
Thanks for clarifying, @sylvainjule
Sorry for the late reply - just saw @sylvainjule’s answer above now. Thank you!
I have never written any plugins/extensions for the Panel, so no idea where to start. Where do I put this code? This looks like VueJS, so I’m guessing it doesn’t go into a PHP plugin file… Any guidance would be greatly appreciated!
@luxlogica Have a look at the documentation: Field previews | Kirby CMS
Exactly, it goes into an index.js file, e.g /site/plugins/mypreview/index.js.
I’ve added it, but it doesn’t seem to do anything - I must be missing something, or doing something wrong.
I’ve created a folder site/plugins/filesfieldpreview.
In that folder, I created a file site/plugins/filesfieldpreview/index.js
In that file I pasted the code above from @sylvainjule. Nothing seems to have changed - ie., the structure fields are still showing just a little thumbnail in the files column…
@luxlogica You need an additionalindex.php and it will work:
<?php
Kirby::plugin('custom/plugin', []);
Replace “custom/plugin” with the name/plugin combination you use in your index.js. The index.php files is always required.
Thank you for the guidance, @texnixe!
It’s now doing something, but not quite what I expected: the characters in the filenames are displayed all garbled and piled on top of each other 
:
Any idea what could be causing it? Would be happy to try any suggestions…
Edit: It’s happens with longish filenames and because the ul element’s display setting is set to grid.
You’d have to change the styling for the files preview field as well.
Indeed, that’s what I just saw: it looks as though the elements are still formatted to display a tiny square thumbnail only - ie., the <li> element’s width is set to 24px, and the text inside it has line-height: 0. That’s what’s screwing the text up.
EDIT: you’re right, @texnixe: removing the ‘grid’ display from the parent ul seems to do it.
Is there a guide somewhere on how I could override the default styling for these elements?
No guide, but a config setting: https://getkirby.com/docs/reference/system/options/panel#custom-panel-css
Then override the k-files-field-preview class. Alternative: give your template in the plugin its own class.
Can this config - and CSS file - be put inside the plugin folder, so that everything is neat and contained?..
Man, this is getting complicated… @sylvainjule, help!
Not the config setting, but you can provide a CSS file in your plugin, yes, alongside the index.js you can provide and index.css file.
Managed to inline some CSS into the template code, and make it work. It’s fugly, but will work for this job.
Thank you @texnixe and @sylvainjule for your guidance - truly appreciated!
Why didn’t you use the index.css file?
Was inlining the CSS for testing, decided to not bother doing any more as this was not supposed to be a long-term solution - this entire job is supposed to be a ‘temporary fix’ of sorts…
In any case, I’ve added a feature request to @sylvainjule’s plugin - perhaps this is something he might be able to add to it in the future, which would be great. This is a feature that is truly missing.
