Visual file select panel field extension

Selector – Kirby Fileselect Field

Together with one of my clients, I just recently started creating a new visual file select panel field extension. It allows the user to select a single (or multiple, based on your settings) file in an intuitive and visual way.

Features:

  • Single or multiple files
  • Filter by filetype
  • Automatic image previews
  • Intuitive
  • Responsive

Check it out on GitHub!

Let me know what you think about it. Every constructive feedback is very welcome!

25 Likes

Wow, man, that looks perfect!!! Amazing work!

1 Like

It looks very nice, and will be a great replacement for several scenarios that I can think of. I’m going to implement it immediately for use with background images and I’ll let you know if I run into any issues or have any feedback.

Thanks for sharing!

1 Like

:flushed: Thanks a lot, @bastianallgeier !

That looks great, thanks for sharing! I’ll test that out asap.

1 Like

Great job! :smiley: Already waiting for a next project to use this gem!

1 Like

It appears to work great. My one thought would be a feature addition, the ability to filter the results by file name as well.

If I wanted to use this for a featured image, a background image, etc within the same page I could then filter it by images that include a “bg” or “background” prefix in the file name. It’s a nit pick sort of thing, but this way you’re not seeing image repetition.

1 Like

That’s a nice suggestion, @Luke. Thanks a lot! :grinning:

I think it would make perfect sense to add a “filter” option to filter by filenames for advanced users/use cases.

The filter would be a great thing to have for other fields with file options as well. I have thought about how to implement it on the yaml side, but didn’t find a good and self-explainatory solution so far. So any kind of input would not just benefit Jonas but would also help me to come up with such filters for select boxes, checkboxes and radio fields.

Already multiple projects in mind where this will be quite handy. Thanks a lot! Awesome work!

1 Like

Great work! I immediately installed it in one of the projects I’m currently working on.

I have some pages with lots (almost 100) images there, so I wanted to restrict the height of the selector.
The easiest solution seemed to be to introduce a max parameter for the blueprint and to limit the height of the output like so:

<div class="input input-with-items" style="height: calc(48px * <?php echo $field->max ?>);overflow: scroll">

Once again, great work; thanks for sharing!

1 Like

Well, in this case, it’s as simple as introducing a filter setting to the selector.php and offering a conditional filter for the file loop in the template.php.

<?php foreach($field->files()->filterBy('filename', '*=', $field->filter()) as $file): ?>

Since the other fields don’t all use template files though I’ll have to to stew on it.

That is an issue that didn’t came to my mind. Limiting the height of the field could greatly improve the usability on desktop devices.

How could we however handle this on mobile devices? Having the selector scroll it’s content on touch devices wouldn’t be ideal in my opinion. I guess we’ll have to just display all files like before, in that case. What do you think?

I never edit content on mobile devices, so please stop me if I’m compeltely wrong.

The first idea that came to my mind is a modal using all available space on the screen to display as many options as possible. Alternatively something like the mechanism the panel itself uses to hide subpages and the file listing?

This is really great. Thank you for your work and sharing this great piece with us :smile:
I’ve noticed only one thing… it only works in PHP 5.3 for now, right?

Did you experience any issues with other PHP version?

Development took place under PHP 5.6.2 and I did some quick checks with versions 5.5.18, 5.4.34 and 5.3.29. It works just fine with version 5.6 down to 5.4.

However it seems there is an issue with PHP 5.3.29 that I’ll have a look into right now.


Update: I just released version 1.0.1 of the selector extension which fixes the PHP 5.3 issues.

How i will use it i n template

Woho that looks very cool.

1 Like

Sorry. I mean it only works in PHP 5.4 for me… PHP 5.3 crashes my panel

I found that to be true. It is however fixed with the latest version 1.0.2.

1 Like