Bad usability adding and selecting media

[dithom]

Sorry for the long post, I tried to keep it as short as possible. I've done several sites with this awesome cms and the admin plugin now but there is still one small thing, that keeps frustrating me a lot and its handling media. Let me give you an example: I create a theme, with templates/modules and blueprints for the admin plugin. First thing is a gallery module.

Using pagemedia

Im using the pagemedia field (respectively header.media_order) to get all images and gifs(!) in the order that i dragged them inside the admin panel.

{% for filename in page.header.media_order | split(',') %}
  <img src="{{ page.media[filename].url() }}')">
{% endfor %}

Problem: I can not limit the filetypes that can be added to the pagemedia field (in this case only images and gifs) or the number of files that can be added to the gallery (#998). The only option to limit filetypes in the template is to use e.g. page.media.images but thats without gifs, and maybe I want to define a custom fileset.

I understand, that the pagemedia field is strictly tied to the page object, so I try to make use of the file field instead.

Using the file field

Now I create a file field with limited filetypes and a limited number of files and the destination set to @self.

Probelm: As soon as I want to delete an image from the gallery/field, there are two icons (trashcan and cross) that are confusing to the client/editor. The cross-icon removes the file from the field, but not from the server/folder (#1497) and as the file field is not able to show all available content inside a folder like pagemedia does, its causing 'dead files' inside the folder. I get the concept behind the two buttons (#1158) but there might be better ways to achieve the desired feature. (Also the use of cross referenced images over multiple sites might go against gravs intentions?)

Currently only option

To have a set of media files, that can be limited in filetype, number and can be ordered, is to create a list field with a filepicker field inside of it. That way I can add, remove and reorder my items through the list and select and limit filetypes through the filepicker.

Problem: I still have to provide the pagemedia field to manage my files (remove unused ones, upload new ones). That way I now have two areas in my admin panel, that I need to manages (just) to add, remove or move an image inside a gallery. Now imagine a gallery with 30 items in it, thats one heck of a list and a lot of scrolling back and forth involved to manage your gallery. Often you even need to save the page after changes in the pagemedia field to be able to select a newly uploaded file in the filepicker as well. It's just not very straightforward, like the rest of grav.

Suggestion

1. Like #998 there could be an option, to limit filetypes that can be uploaded through the pagemedia field, not on a global site level but on a page or template level.
2. Another option would be to extend the functionality of the file field to show all available media in a folder and select the desired files through a highlight or drag them to an active and not-active area inside the field. Something like this:

This way we even would respect the use of cross referenced media in global folders, that is shared on different pages. I hope i was able to address my problem. Keep up the good work!

[rhukster]

This field does need some work. I'm not sure it's worth messing with it at this point now though as we are looking towards rewriting the admin for Grav 2.0

[mahagr]

@dithom

File field does not modify the object until you hit save. So you can add or delete as many files as you wish without affecting the saved object, everything will be applied on save when you're ready.

Also, file field allows you to group your images allowing you to have multiple sets of images for different purposes. Meaning that you can tell the object (or twig) how the image is supposed to be used.

This said, there should be a way to see unassigned images somewhere...

[JS-Media-Creation]

Sorry for the long post, I tried to keep it as short as possible. I've done several sites with this awesome cms and the admin plugin now but there is still one small thing, that keeps frustrating me a lot and its handling media. Let me give you an example: I create a theme, with templates/modules and blueprints for the admin plugin. First thing is a gallery module.

Using pagemedia

Im using the pagemedia field (respectively header.media_order) to get all images and gifs(!) in the order that i dragged them inside the admin panel.

{% for filename in page.header.media_order | split(',') %}
  <img src="{{ page.media[filename].url() }}')">
{% endfor %}

Problem: I can not limit the filetypes that can be added to the pagemedia field (in this case only images and gifs) or the number of files that can be added to the gallery (#998). The only option to limit filetypes in the template is to use e.g. page.media.images but thats without gifs, and maybe I want to define a custom fileset.

I understand, that the pagemedia field is strictly tied to the page object, so I try to make use of the file field instead.

Using the file field

Now I create a file field with limited filetypes and a limited number of files and the destination set to @self.

Probelm: As soon as I want to delete an image from the gallery/field, there are two icons (trashcan and cross) that are confusing to the client/editor. The cross-icon removes the file from the field, but not from the server/folder (#1497) and as the file field is not able to show all available content inside a folder like pagemedia does, its causing 'dead files' inside the folder. I get the concept behind the two buttons (#1158) but there might be better ways to achieve the desired feature. (Also the use of cross referenced images over multiple sites might go against gravs intentions?)

Currently only option

To have a set of media files, that can be limited in filetype, number and can be ordered, is to create a list field with a filepicker field inside of it. That way I can add, remove and reorder my items through the list and select and limit filetypes through the filepicker.

Problem: I still have to provide the pagemedia field to manage my files (remove unused ones, upload new ones). That way I now have two areas in my admin panel, that I need to manages (just) to add, remove or move an image inside a gallery. Now imagine a gallery with 30 items in it, thats one heck of a list and a lot of scrolling back and forth involved to manage your gallery. Often you even need to save the page after changes in the pagemedia field to be able to select a newly uploaded file in the filepicker as well. It's just not very straightforward, like the rest of grav.

Suggestion

1. Like [Configure Media Manager folder #998](https://github.com/getgrav/grav-plugin-admin/issues/998) there could be an option, to limit filetypes that can be uploaded through the `pagemedia` field, not on a global site level but on a page or template level.

2. Another option would be to extend the functionality of the `file` field to show all available media in a folder and select the desired files through a highlight or drag them to an active and not-active area inside the field. Something like this:

This way we even would respect the use of cross referenced media in global folders, that is shared on different pages. I hope i was able to address my problem. Keep up the good work!

This is exactly what I'm searching for! Thanks for your detailed description of the problem, could not described it better. Hopefully this will be available in the future.