How do I implement an image categorization system using Entity Browser and File Entity?

Question

I am currently using the Entity Browser module along with the File Entity module for handling image upload and selection for content editors in a Drupal 8 project.

I have several image fields on different content types and to get some structure for them I would like each image field to be mapped to a certain image category (taxonomy) so that the user can filter between categories when selecting existing images using the entity browser.

To do this I am using the File Entity reference for my image fields. I have added a taxonomy field with my custom ”image category” taxonomy on the Image File entity type. So far so good.

My first problem is that I want automatically populate the image category field with a certain value when adding a new image through the entity browser. So if I upload an image to a ”hero image” field the underlying file entity should get the category ”Hero images” automatically. I’m lost to how to hook into the upload process of the entity browser to set this based on which field it belongs to. How can this be done?

The entity browser also allows the user to select existing images. For this I'm using the view prepackaged with the File entity browser modulle and I have added a taxonomy dropdown filter to that view so that the images can be filtered by category. What I want to do is to have this view automatically set the correct filter when loaded. So when loading the view from a ”Hero Image” field the dropdown has the ”Hero Image” category preselected.

So essentially I'm missing two parts:

• Automatically populating the file entity "image category" field when uploading an image based on which field the image was uploaded to
• Automatically prepopulate the "image category" exposed filter in the "select existing image" view based on which field it was opened from

Can someone help here. Maybe there's a better way to go about this?

Answer 1

For the tagging part, forget about entity browser, that (currently) doesn't know about the context of where it is invoked and to what those files will eventually be added.

Instead, what you want to hook into is hook_node_presave(). Go through the referenced files in all your fields that you want to support (could be all image fields or a configurable list), check the image referenced there. If the image doesn't have a category yet, set it based on the field that you're currently looking. Or maybe always ensure it is categorized based on the current field. Whatever you want.

For views, that's currently not possible yet, for the same reason. Entity browser doesn't receive the context yet. There are some related issues like https://www.drupal.org/node/2656196 and https://www.drupal.org/node/2366335. Note that there are many ways to embed an entity browser and you don't always have a field, for example with entity_embed.

Answer 2

For the time being I have solved it in the following way:

1. I have created a separate entity browser configuration for each image category. Each browser has a separate id which is what makes step 2 possible.
2. In a custom module I have implemented an EventSubscriber that listens to the EntitySelectionEvent that Entity Browser fires when an entity is selected. When this happens my subscriber checks the browser id currently used and based on that it sets the category field for any of the uncategorized entities that was selected. Here is a gist of the Eventsubscriber implementation.
3. For each category I have created a separate view display in my "Select existing image" view. The views are very similar and the only difference between them is that they filter the entities to only show items with a specific category.
4. Each separate Entity Browser config created in step 1 is wired to the corresponding view display mode.

This works pretty good. When uploading files using an entity browser with the id image_library_browser__content the image will get the category content and when selecting existing items the view will only list content items.

A problem with this is if you would have alot of different image categories since you need to create one separate entity browser and display per category. On my current project I have 6 so I think it is ok.

One nice thing with having separate entity browsers per category is that you can define separate upload paths, field descriptions and file types per category. (Currently this is not possible in any other way since Entity browser in its current form ignores the image field settings)