Support » Plugin: Media Library Assistant » Attachments toolbar cropping attachments list on load

  • jbell0fh

    (@jbell0fh)


    When editing a post, and opening the attachments dialog (e.g. choosing a featured image), the toolbar initially overlaps with the list of images. The matter clears up after resizing the window (which seems to invoke a fixLayout function). Similarly, the issue goes away if I deactivate the Enhanced Media Library plugin (v2.8.2).

    I am able to fix the problem locally by enabling SCRIPT_DEBUG and commenting out the following block of code (mla-media-modal-scripts.js, toolbarOpen function):

    
    if ( ( null !== toolbarHeight ) ) {
        $( '.attachments-browser .attachments', mlaModal.settings.$el ).css( 'top', toolbarHeight );
        mlaModal.settings.oldHeight = toolbarHeight;
    }
    

    This is occurring on a WPMU-based site running WP 5.6. Thank you in advance for any assistance you might be able to provide.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author David Lingren

    (@dglingren)

    Thanks for your report and for taking the time to investigate the problem and describe your solution.

    The “attachments dialog” (A.K.A. the WordPress Media Manager Modal Window) does not have a good method for adding controls to the toolbar and plugins like MLA and EML have taken several different approaches to doing so. Sometimes, as you have encountered, these approaches conflict. The Javascript code you posted above was added a few WP versions back to correct a problem raised be some changes WP made to the toolbar layout.

    You wrote “Similarly, the issue goes away if I deactivate the Enhanced Media Library plugin (v2.8.2).” I installed Enhanced Media Library v2.8.3 under WP 5.7 and ran some tests. I was able to reproduce the problem you encountered. I also discovered that, even with MLA disabled, EML corrupts the default WP toolbar, e.g., when adding an Image block to a Gutenberg post/page.

    Your best course of action would be to raise this issue in the Enhanced Media Library support forum and see if they can make a fix. You can reference this topic and I would be happy to work with them if they would like that.

    I will leave this topic unresolved for now and I hope you can make progress with the EML developers. Thanks for your understanding and your interest in MLA.

    Hi there!

    I am Nadia, EML’s author. Thank you both for taking the time to investigate the issue. But unfortunately, I cannot reproduce it. Could you please give me more details? Maybe a screenshot? Theme name? Thank you!

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    @webbistro

    Thanks for looking into this issue. I am happy to provide more details and to work with you in any way I can to resolve the problem. The WordPress Media Manager Modal (popup) Window (MMMW) has been an ongoing challenge, especially when multiple plugins add controls to the toolbar above the thumbnail grid.

    Today I installed EML version 2.8.4 and verified that the issue still occurs.

    My development system uses the WordPress “Twenty Twelve” theme (I’ve been working on my plugin for a while now). The steps required to illustrate the toolbar corruption are quite simple. With Enhanced Media Library the only active plugin on my site I followed these steps:

    1. In admin mode, click on the “Add New” submenu item under the “Posts” menu item.
    2. Make sure you are in the “Visual Editor” mode, not the “Code Editor” mode.
    3. Click the plus sign to the right of “… choose a block”.
    4. Click on the “Image” block.
    5. Click the “Media Library” link to activate the MMMW popup.
    6. Click the “Media Library” tab, if necessary.

    The above steps will show the corrupted toolbar above the image thumbnail grid, as issuatrated in the screen shots I prepared. I have uploaded five screen shots to Google Drive and shared them for viewing at this link:

    https://drive.google.com/drive/folders/1yM7X085XXhN3bbEM7P3q9tmeKhfgE7Yn?usp=sharing

    The folder contains:

    • 01 MMMW without EML.png
    • 02 MMMW with EML.png
    • 03 MMMW with EML and MLA.png
    • 04 MMMW with MLA.png
    • 05 MMMW with MLA wide.png
    • Image 01 shows the default MMMW popup window.
    • Image 02 shows the same window with EML activated. The “All dates” dropdown is gone, the “Search” label is gone and the search text box is moved. The EML media categories dropdown does not appear.
    • Image 03 shows the MMMW popup with both EML and MLA active. The first row of thumbnails is partially hidden by the tool bar and the EML media categories dropdown does not appear. This is the issue that started the support topic.
    • Images 04 and 05 show the MMMW popup with just MLA active, for reference.

    Please let me know what else I can do to help. Thanks for looking into this issue with EML and MLA.

    webbistro

    (@webbistro)

    Hi David,

    Thank you very much for the comprehensible description of the issue. Yes, media modals and extending the media library, in general, could be a challenge at times.

    I just did every step you described
    (1) clean WP installation, Twenty Twelve theme active
    (2) EML active only, no categories created (and then with categories created)
    (3) creating a new post with visual editing
    (4) adding an image block

    As a result, “All media items” and “Show all dates” filters are perfectly in place. Actually, they could be disabled within EML settings: Settings > Media > Media Library > Filters to show, but it’s not the option by default.

    I see that the toolbar is not looking good when I activate MLA in addition, I’ll look into it and see what I can suggest. But it sounds very strange that you have an issue with the toolbar on a clean installation…

    What I see:

    EML only
    EML + MLA

    Please let me know if you have any new information about the issue. Thanks!

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    Nadia,

    Thanks for your ongoing testing and for your update. I have done some further testing as well.

    You wrote “But it sounds very strange that you have an issue with the toolbar on a clean installation…” This prompted me to try installing EML and MLA on an entirely different site. The new site does not have the EML “issue with the toolbar”. The corruption I first reported only happens on the first site I installed and tested on. I do not know the source of the problem but it is site-specific and I regret the confusion.

    Back to the “first row of thumbnails” problem. It looks like this is caused by MLA’s enhanced search box, which is taller than the WordPress search box. MLA adds this control to the “media-toolbar-primary search-form” div element, where WordPress places its search box. It looks like EML moves the WordPress search box to the “media-toolbar-secondary” div element; is that right?

    I will revisit the way MLA adds controls to the MMMW toolbar to see if I can solve the thumbnail cropping problem. I don’t think there’s anything for EML to do at this point.

    I also noticed that when MLA enhancements are active the EML taxonomy filtering does not work. This is a result of MLA’s replacing the WordPress “query-attachments” logic with MLA’s own code. I will see if I can accommodate EML filters in MLA’s logic.

    @jbell0fh – In the interim you might consider disabling MLA’s MMMW enhancements, which would fix the immediate problem without removing the other functions MLA provides.

    I will post an update here when I have progress to report. Thanks to both of you for your patience and understanding.

    webbistro

    (@webbistro)

    Hi David,

    Thank you for the update and for confirming that EML works on another installation.

    As for the toolbar: Yes, I moved the search box to the media-toolbar-primary search-form div because EML allows adding a few media taxonomies, also it allows enabling/disabling “All items” and “All data” filters. So there might be an unpredictable number of filters on the toolbar. I decided to move the search box to the end of the filters’ “row” and make it “float” for a better look and feel (CSS).

    But, MLA extends the search box, it is more advanced. So it just can’t be floating in the row. I think (I am not sure yet though), that MLA has to disable EML’s search box and re-define it totally. I’ll take a deeper look into it and let you know what I can suggest. I may have some questions about the MLA code, I’ll ask them here if you wouldn’t mind.

    As for the broken search feature, I am now working on a new major update for EML. The whole code is refactored. In many aspects, it’s a dramatic change. I believe we should discuss this moment when I have a stable RC.

    Thank you for the collaboration!

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    @webbistro – Thanks for confirming the toolbar move and for your thoughtful comments.

    The best way to collaborate on better compatibility will be by email; much easier than lengthening this thread. I can post a summary here when there is progress to report.

    You can contact me at my web site to continue the dialog. Thanks for your interest and your help.

    Plugin Author David Lingren

    (@dglingren)

    I have completed my latest round of hacking through the weedy jungle of CSS styles affecting the Media Manager Modal (popup) Window and Media/Grid admin screen. I believe I have found a way to improve the display of MLA’s controls and avoid the “first row crop” issue that inspired this topic. I have also added support for the ajax_query_attachments_args filter that EML uses for its author and taxonomy filters.

    I have uploaded a new MLA Development Version dated 20210425 that contains the improvements. You can find step-by-step instructions for using the Development Version in this support topic:

    PHP Warning on media upload with Polylang

    It would be great if you could install the Development Version and let me know if it works for you. Thanks again for alerting me to these MLA defects.

    @webbistro – I have some questions and observations to share with you. You can contact me at my web site to continue the dialog. Thanks for your interest and your help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.