Visual file select panel field extension

This is great!

Just a small thing, is it possible to by default select the top image? As I’m guessing if you forget to select one when posting currently it returns nothing?

Wow this is awesome! Can’t wait to use it.

One small thing however, I think the name is not that intuitive. “Selector” is pretty vague, especially when it’s only built to select files. Something like file_selector would make more sense.

Imagine you’re using this field type to give users the ability to select a custom cover image for a blog post. When creating a new blog post, you probably won’t find any images yet.

Although it might be a bit more complex to implement, I think it would really simplify the publishing workflow in those cases if you could simply drag and drop in order to upload and select new files. Maybe there is a possibility to reuse parts of the existing drag and drop upload?


Also, it might be useful if you could specify the page files/images are taken from. This could be useful if you have a set of cover images that are used throughout the site.

It definitely looks fantastic. But as a beginner I am wondering how I would filter out the image that is selected.

I am trying to set this up as a way to select a coverimage for each project.
And then hide this particular image on the projectsite itself. Any ideas?

You can use my fork if you want to filter by file name. You can use “filter: cover” in the blueprint for the selector field.

Your fork is useful and makes filering through the images easy. But my question was more of a basic question i guess. I am wondering how you would use this in a template.
My blueprint looks like this:

projectimage:
  	label: Define Cover
  	type: selector
  	mode: single
  	types:
  		- image

How would I return only the selected image in a template?

I’ve just used it like this:

<?php if ($page->featimage()): ?>
    <a href="<?php echo $page->url() ?>">
         <img src="<?php echo $page->featimage()->url() ?>" alt="<?php echo $page->title()->html() ?>" title="<?php echo $page->title()->html() ?>" />
     </a>
 <?php endif ?>

Hi everyone,

Really enthousiastic about this plugin. I am having trouble getting it to work though.
I noticed that for some reason it only works with level 1 pages. When nested deeper it loads the wrong url.
Called in template like:

<?php if($page->cover()): ?>
  <img src="<?php echo $page->cover()->url ?>">
<?php endif ?>

When I echo the $page->cover()->url it only returns the filename, for example: stop-stealing-sheep.jpg. No full url.

Blueprint code looks like:

cover:
label: Cover
type:  selector
mode:  single
types:
  - image

Also, when trying var_dump or a:show on the cover() object it seems to return the entire website. Full disclosure: I only learned about var_dump yesterday, so not entirely sure if maybe that’s just normal.

I read smth about php versions, so for the record I am on localhost with MAMP, PHP version 5.5.10.

Thanks!

I was struggling a bit myself to get this working with the ‘multiple’ option. I wanted to use this as an optional gallery field. I ended up using this code.

My field is named ‘attachments’.

<?php foreach($page->attachments()->split(',') as $item): ?>
  <?php if($image = $page->image($item)): ?>
    <figure>
      <a href="<?php echo $image->url() ?>">
        <?php echo thumb($image, array('width' => 200, 'height' => 200, 'crop' => true)) ?>
      </a>
    </figure>
  <?php endif; ?>
<?php endforeach; ?>
2 Likes

Yeah cool man, big thanks !
hmm… would it be hard to implement the same structure for page relations, thinking
this would be cool to have for pages as well… with drag/sort function.

Hi @Luke,

thanks for your work. Would you mind creating a pull request to my develop branch so we can add the filter feature to the plugin?

Cheers, Jonas

1 Like

Hey @A_Monkey,

you should probably have a look at kirby-curator. That’s another panel field I created together with a client.

Please keep in mind that this has no documentation whatsoever, I can’t provide any support yet and it is kind of coupled to our main project. However, feel free to give it a spin.

Looks interesting, will have a go, big thanks @DieserJonas !!
Now I am doing it all with the structure field, the one thing I was looking for is
to have all children/index “auto generated” just like your selector plugin for files, and then
be able to select/reorder the pages you want.

With structure field I have to “manually” add all pages.

WOW !!

This is some serious work behind…
Man, this is awesome… :blush:

Best regards /

Fred

This should be included in the default instal!

A couple of UX/UI suggestions:

  • in ‘single file’ mode, an auto-complete field - such as the one used in the built-in ‘Page’ type field - would be more intuitive and work better for most use-cases
  • in multiple file mode, it would be extremely useful to have a parameter such as ‘rows’, or ‘max-lines’, that would limit the height of the displayed list (as in some cases, users can have very long lists of files in their pages…)

Thank you for such a great plugin!

2 Likes

Have you found a solution to this problem? It’s exactly the same for me…

<?php if ($page->headpic()): ?>
    <img src="<?= $page->headpic()->url() ?>"/>
<?php endif ?>

This will be headpic.jpg no matter what. No path at all.

Thanks!

Not tested but try:

<?php if ($image = $page->headpic()): ?>
    <img src="<?= $page->image($image)->url() ?>"/>
<?php endif ?>

I know that the documentation lacks the information about how to use the fields content in your templates. However, I just wrote something down which will be added to the Readme file on GitHub soon. I hope that it solves the most common usage issues:

Usage

Within your templates / controllers

As per design, the selector field stores the filenames of the selected files, only. If you need access to the files full path or to other properties / functions of the file object, you must convert the filename into a full file object first.

Single Mode

When you’re using the Selector field in Single Mode, gaining access to the full file object is quite easy. Just replace yourselectorfield with the name of your Selector-based field.

// Convert the filename to a full file object
$filename = $page->yourselectorfield();
$file = $page->files()->find($filename);

// Use the file object
echo $file->url();

Multiple Mode

In multiple mode, the Selector field stores a comma-separated list of filenames, based on how many files you selected. To convert this list into a fully-featured file collection (just like $page->files()), you need a bit more code.


// Transform the comma-separated list of filenames into a file collection
$filenames = $page->yourselectorfield()->split(',');
if(count($filenames) < 2) $filenames = array_pad($filenames, 2, '');
$files = call_user_func_array(array($page->files(), 'find'), $filenames);

// Use the file collection
foreach($files as $file)
{
	echo $file->url();
}

2 Likes

Thanks for your suggestions! It’s always nice to get a few insights from independent observers.

I think this is a matter of taste, I personally like the visual way to select a file better. Maybe open issue in the Panels GitHub repository requesting that field type. I should be possible to add it quite easily.

The feature to make the selector list scroll for a large amount of files is already planned. I can’t tell you when I’ll be able to add it, though.

@DieserJonas, regarding the multiple mode:
is using array_pad and call_user_func_array better / faster than the way I did it?

http://forum.getkirby.com/t/visual-file-select-panel-field-extension/397/30?u=lekkerduidelijk