How to use media field with entity browser widget in a frontend theme?

Question

I have created a media field in my content type. In the manage form display, I have selected entity browser as display instead of media library.

When I open the node form as admin in an admin theme like adminimal or seven, and upload an image to the field, I can see it thumbnail after upload and other information. I can see that its markup comes from the media.html.twig file of the classy theme.

But when I do the same steps in a frontend theme, I can't see the thumbnails and other information after upload.

What can be the reason? I also copied the media.html.twig file from classy theme to my custom theme but it did not work.

I am also using the dropzonejs module if that help someone.

Here are the screen shots. The first screenshot is from the admin theme, You can see that the admin, the date, the thumbnail and then use selected button.

The 2nd screenshot is from the frontend theme, there is no such markup after uploading an image.

Any one who can help?

Answer 1

I found the solution.

I just copied the media.html.twig template from classy theme to my custom theme which did not work.

We need to copy this file also container.html.twig to our custom theme's templates directory then it will work.

Answer 2

You can configure thoses fields by doing some backend work, as you said you are using dropzone, please have a at their webpage dropzonejs where you can find a documentation and also it gives you link to use it up to your tech! Here an example of I use it in a form :

$form['photo_principale'] = [
  '#type' => 'dropzonejs',
  '#title' => $this->t('English title'),
  '#dropzone_description' => $this->t('English deceiption'),
  '#max_filesize' => $this->t("256"),
  '#extension' => $this->t("jpg jpeg png"),
  '#max_files' => 1,
  '#clickable' => TRUE,
  '#clientside_resize' => FALSE,
];