Problem/Motivation

When editing media item, the content inside popup is not correct, because if the edit media button is clicked after the add media button, then everything seems to be fine. Seven and media library are transitioning (away) of exactly the libraries used in 8.7.x and 8.8.0

Proposed resolution

Not yet fully clear. See also #2987921: Media Library add form should suppress extraneous components of image fields using a form alter, not CSS showing the direction things go. We definitely should adapt this.

Remaining tasks

  • Review the new implementation
  • Decide how to implement (probably make sure that the form hooks run)
  • The MediaEditForm should extend the AddFormBase, to reduce duplicated code.

User interface changes

Make sure we persist having the preview image on the left side with a decent background. Theme independent.
Also show a link to the full media-edit page (_blank).

Followups

  • We could introduce a custom form display mode.
  • The AddFormBase shall reworked according to media library.
  • We could check and alter the state of the existing or enable the new form display mode in the install hook.

Comments

rang501 created an issue. See original summary.

rang501’s picture

StatusFileSize
new927 bytes

It seems that it has the same issue which was fixed in Add media form, the library location has been changed in 8.8. Currently, the only solution I see is to add two libraries - if the library is missing, it doesn't throw fatal error or exceptions, so it should be good enough until 8.7 is EOL.

rang501’s picture

Status: Active » Needs review
ytsurk’s picture

So, the seven library makes the image move to the left in a grey backgrounded column.

I also use seven, but claro will replace seven soon :D

Do we really want to force the seven design?
I would prefer to remove the seven libraries everywhere, and maybe only add them if seven is the active theme using

\Drupal::service('theme.manager')->getActiveTheme()->getName() == 'seven'
ytsurk’s picture

Status: Needs review » Needs work
rang501’s picture

That's a good point, so we either duplicate or create a custom library for this or find a way to include correct library based on active theme. I don't see any media library stuff in Claro, it is either not yet ready or they are not adding any. Need to look how media library looks with Claro theme by default.

ytsurk’s picture

I think claro will, like seven, support the media library. Thus, we need to make sure the "original" from hooks are invoked.

So, seven hooks in like this:

/**
 * Implements hook_form_BASE_FORM_ID_alter() for \Drupal\media\MediaForm.
 */
function seven_form_media_form_alter(&$form, FormStateInterface $form_state) {
  // Only attach CSS from core if this form comes from Media core, and not from
  // the contrib Media Entity 1.x branch.
  if (\Drupal::moduleHandler()->moduleExists('media') && $form_state->getFormObject() instanceof MediaForm) {
    // @todo Revisit after https://www.drupal.org/node/2892304 is in. It
    // introduces a footer region to these forms which will allow for us to
    // display a top border over the published checkbox by defining a
    // media-edit-form.html.twig template the same way node does.
    $form['#attached']['library'][] = 'seven/media-form';
  }
}
ytsurk’s picture

Category: Bug report » Task
ytsurk’s picture

Category: Task » Bug report

Seems a bigger issue with visual impact in 8.2.1/2 .. I think we mess with the seven-theme-image-widget .. we need to include different libraries, and use new CSS classes and then decide what we want to include use finally ..

ytsurk’s picture

Title: Edit media popup styles broken » QuickEdit media popup styles broken
Issue summary: View changes
ytsurk’s picture

Issue summary: View changes
ytsurk’s picture

Assigned: rang501 » ytsurk
Issue summary: View changes
ytsurk’s picture

Issue summary: View changes
ytsurk’s picture

Issue summary: View changes
ytsurk’s picture

Issue summary: View changes
ytsurk’s picture

Issue summary: View changes
ytsurk’s picture

Title: QuickEdit media popup styles broken » Adapt changes from media_library and theme system to the quick-edit dialog
ytsurk’s picture

StatusFileSize
new17.26 KB

This patch unifies now the AddMediaForm and MediaEditForm. Also a new help text was added on the main modules setting page via hook_form_alter.

A new definable form display mode should be probably discussed and handled in another issue.

AddMedia and Editform looks now nice, on 8.7.x 8.8.1 and 8.8.2, in seven, claro, bartik and umami themes and gets now a custom library injected.

ytsurk’s picture

Assigned: ytsurk » Unassigned
Issue summary: View changes
Status: Needs work » Needs review
ytsurk’s picture

StatusFileSize
new17.3 KB

Somehow wrong CSS sneaked in the last patch ..

ytsurk’s picture

StatusFileSize
new18.96 KB

Here an improved patch for the AddMediaForm, the last patches did not really make it better ..

rang501’s picture

StatusFileSize
new76.39 KB
new50.46 KB

I have reviewed your changes. I see that the add form and edit form are quite different now, I think you made some of the change because remove button didn't work correctly, now fixed in #3118805: AddForm's remove link not working, so we could take a few steps back? Let me explain:

  • Add form should be cleaner and depending on the form display configuration, there should be possible to edit media title, image alt/title values (if enabled). This means that the image widget should be modified enough (custom #theme maybe) to hide the file field and the preview, like it was done before.
  • Edit form should allow the user to edit media title and image alt/title values - these are the most common things user might need to change quickly.
  • We should keep the height as minimal as possible, for example, an image widget could use some flexbox. We really don't need to follow core directly here, the preview is not something required.

I'm offering this layout as default to use in both add and edit (image widget with alt text and alt/title text):
mockup
mockup

I do see some issues when the preview is removed - it is harder to know which file you are editing, it is fine when the image is used, but not when editing video. In the end, we have two possibilities - try to re-implement the core solution, or create a simple version, as you can see on the mockups.
Anyway, thank you for all the work! We need to decide what is the best solution :)

ytsurk’s picture

Thanks for your review.

This issue here has nothing to do with the remove link, except it's position (which is set by using display:flex and we do not need to make any adaptions for it).

I removed the preview in the AddForm because (fe. in claro), you can exchange the source fields data, and for images the preview was not updated and I did not want to implement that ...

I like your design proposal. They do not really differ from the current AddForm in the patch, or I don't see the difference?

  • AddForm is still depending on the form display configuration. I introduced the source media field ("image widget") to the form, which should be exclude-able via the form display.
  • The EditForm shall be as similar as possible to the AddForm (at least the php class). Optically I like the preview image, and yes, also this form shall respect the form display. I renamed this to quick-edit to reflect our intention for it.
  • I want to keep custom code (php or css) and configuration as tiny as possible and reuse as much core as possilbe.

So, what exactly do you want to roll back now? We can also split and postpone this issue, as I started broaden it ...
To fix the initial issue of the missing styles in the EditForm we just need to add the libraries consequently.

rang501’s picture

Ok, maybe I did misunderstand something :)
I think I may have not looked deep enough into this issue, I just applied the patch and saw the default manged_file field without the preview on add media form.

The idea in the linked proposed section issue is something we should adapt definitely, it should also solve the issue with claro. I see that is should be already committed to the media_library module and we should take it over to our module as the 1.x duplicates the media_library classes, the commit is visible here https://git.drupalcode.org/project/drupal/commit/c64b32f

We maybe are overthinking here already :)

ytsurk’s picture

StatusFileSize
new25.13 KB

So, here a patch actually also adding the library for claro. This just came clear to me today ..

Regarding c64b32f: I decided to be able to work with the source field and this new method hideExtraSourceFieldComponents should be respected in the AddMediaForm and inherited to the others. This is not yet in and could be done in #3101860: Cleanup :D [unused and obsolete] code -!-. This issue here for me is a first step in that direction (reworking all the Forms according to media_library's changes) of unifying the MediaEdit and AddMedia form, make it work with all versions of Drupal.

rang501’s picture

StatusFileSize
new6.18 KB

I think I forgot to comment - the #25 didn't work well, unfortunately, so I created a new patch that tries to use core changes instead, it does work well on my project, so you can take a look at it.

ytsurk’s picture

StatusFileSize
new23.34 KB
new9.12 KB

Thanks a lot for your feedback. I got here somehow lost in a form detection pattern.

I took now your approach for hiding the source field (like media_library), and plugged in my optical changes (more decent), and claro support (flex is not properly defined, so the preview image is really small and the delete button can hang over an input element- but I leave that up to claro).
The interdiff is not complete ...

I

  • added a CSS file
  • did cleanup of unused and duplicated code, made the media edit form extending the add form
  • Override $_form_->getMediaType($form_state) in media edit form consequently

So, this is back to you ;)

ytsurk’s picture

StatusFileSize
new23.37 KB
new3.67 KB

Decided to already hide the source field in the add form.

rang501’s picture

Status: Needs review » Reviewed & tested by the community

Nice work! It seems to be working well :)

rang501’s picture

Status: Reviewed & tested by the community » Needs work

I didn't test uploading and editing process, this isn't working anymore. Uploading gives an error: "Image field is required.", editing doesn't do anything anymore.

rang501’s picture

StatusFileSize
new23.3 KB
new976 bytes

I think I got add form working, I guess it is not good idea to hide source field entirely.
Edit form don't work, not sure yet, whats wrong there - it submits something, but Drupal don't accept it because form method isn't called (it should, even when some validation fails).

ytsurk’s picture

Hmm strange - for me it worked all ... Did you test in a special setup?

Hiding the source field is really something I would like to bring in ..

rang501’s picture

StatusFileSize
new82.75 KB

I have a standard Drupal setup, I just updated my environment (8.8.5) and reinstalled Drupal - still same issue.

My patch will fix uploading functionality - it was not possible to edit alt text (the whole field was hidden and validation failed with message "Image field is required.", screenshot attached) but I don't find why edit doesn't work - it will make the request, but an empty array is returned, no error on logs.

ytsurk’s picture

I never tested with the combined upload, your not using that?
I will also try a fresh install and give you feedback here.

rang501’s picture

I didn't apply combined upload, used the latest version from git and applied your patch to it.
I have separate and clean drupal installation to test (Drupal is installed with standard profile), there is no custom code that could break it somehow. I used image media type to upload.

ytsurk’s picture

Status: Needs work » Reviewed & tested by the community

Totally my bad, Sorry!

Your last patch with "enabling" the source field again is the way it needs to be!

I think we got it here :D

ytsurk’s picture

Status: Reviewed & tested by the community » Needs review
StatusFileSize
new24.51 KB
new2 KB

Ups - the MediaEditForm was still not working, as you pointed out .. So here the fix.

And - thx for your patience :D

rang501’s picture

Status: Needs review » Reviewed & tested by the community

It seems to be working now, thanks!

I think this conflicts combined upload functionality - if you don't see any issues with this anymore, can you commit this patch? After that, I'll reroll the combined upload patch.

ytsurk’s picture

Status: Reviewed & tested by the community » Fixed

  • ytsurk committed 0f3a981 on 8.x-1.x
    Issue #3104856 by ytsurk, rang501: Adapt changes from media_library and...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.