IMCE module is not integrating with the DrupalImage CKEditor plugin that D8 ships with, causes problems

Okay. This is very weird. Sometimes when using the alignment options it applies a style float to the image html, and other times, it applies a class to the parent <p> tag. I have done lots of testing, and the best that I can determine is that, with Full HTML, aligning left and aligning right applies the style attribute, while aligning center applies the class to the parent <p>. When using a Text Format that implements the HTML Filter (Basic HTML in my case), neither the left, center, or right alignments in Image Properties work, leading me to believe that all of them are trying to add a style attribute. If I create some text and use the center align CKEDITOR button, it properly aligns the text in the center. If I click the image and click the center align button (instead of using the Image Properties alignment), it still does not center the image. Well, sometimes it doesn't, but sometimes it does (see second video). It seems that I need to highlight the image and click right align for it to work. If I just have the cursor right before/after the image and click the right align button, it works in the editor window, but upon saving, it doesn't.

It seems to me that there is some method by which style attributes are applied

1. Image Properties left and right align in unfiltered Text Format
2. any Image Properties alignments when using a Text Format that implements HTML Filter
3. not highlighting image and clicking alignment buttons

and other methods by which it properly adds a class to the parent <p>

1. Image Properties center align in unfiltered Text Format
2. highlighting image and using alignment buttons in filtered Text Format

I don't know. This is a weird one.

Here's what the videos show:

1_image_properties_alignment.ogv

• create new page
• use Full HTML
• add image
• right click image to get to "Image Properties" (you can also double click the image)
• align image right in Image Properties (THIS ADDS STYLE FLOAT CSS)
• edit page, float image left with Image Properties (THIS ADDS STYLE FLOAT CSS)
• edit page, float image center with Image Properties (THIS ADDS CLASS TO PARENT)
• edit page, change to Basic HTML (filtered)
• center text with alignment button (THIS ADDS CLASS TO PARENT)
• center align image with Image Properties (WORKS IN EDITOR, BUT STYLING STRIPPED, or at least no class added to parent)

2_alignment_buttons.ogv

• create (filtered) Basic HTML page
• insert image
• click right align button (WORKS IN EDITOR BUT NOT ON PAGE)
• edit page, highlight image, click right align button (PROPERLY ADDS CSS TO PARENT)

As for why "Image Properties" is even showing in my setup, I don't know. I have Imce File Manager installed, and a few other modules. Not sure if any of them may be responsible.

FOR WHAT ITS WORTH: All of the above aside, assuming we resolved the wonkiness, I do think the Image Properties alignment should be adding float classes, not "text-align" classes. I think this because, if one wants "text-align", they can simply use the alignment buttons. The Image Properties alignment options should offer float options so that one can properly position the image relative to it's context, one of the more popular application being wrapping text around an image, as shown here: https://www.youtube.com/watch?v=xFVfX2sevNI

Where would I go in my system to check which image plugin I am using instead of Drupal CKEditor? My first guess would be that it is provided by IMCE File Manager....

MODULE: https://www.drupal.org/project/imce
D7 DEMO: http://ufku.com/drupal/imce/demo

Thanks very much @Wim Leers, you've been super helpful, and I really appreciate the quick responses!

thanks @ufku. Just to clarify, I see DrupalImage.php here: https://api.drupal.org/api/drupal/core%21modules%21ckeditor%21src%21Plug...

I see this file on my filesystem. Is it something we users enable somehow, or is it and internal include the IMCE must utilize to resolve the issue at hand?

Thanks again for the quick help!

thanks for the feedback @Wim Leers

@Wim Leers, I should have asked in my last comment... should I switch the status from fixed to Needs Work (or Active) since this doesn't look sufficient to you?

@Wim Leers, I haven't personally tested the patch

@Wim Leers, right you are, thanks for changing. If I can set up an environment to test it I will and report back.

@Wim Leers, since @ufku's fix was a commit, not a patch posted to this issues, am I correct in assuming that if I simply test against the current Dev branch of IMCE, that will suffice?

@Wim Leers and @ufku, the proposed change does not seem to work. Additionally, it appears to break other Image Properties functionality. I created a fresh D8 site, added an image to a page using the default image button, and the alignment options worked. I then installed the 8.x-1.3 release of IMCE to confirm that the problem reported by this issue still existed on a fresh site install (to rule out the possibility of my current site's environment playing a role in the problem). The problem still existed.

I then disabled the 8.x-1.3 release and removed the imce folder from the modules directory on my filesystem. I then installed the 8.x-1.x-dev branch tar (2016-Oct-02), replaced the regular Image button in the Text Formatter with the IMCE provided "Insert image using IMCE File Manager" button, and the behavior is altogether different. Now when I right/double click the image added via the "Insert image using IMCE File Manager" button, then selected "Image Properties", the only options are to to browse for a new file and add/edit the "Alternative Text" value. So the change pushed to the dev branch altogether removed the options to edit width, height, alignment, and caption.

The change may be in the right direction, but it currently doesn't appear to be implemented correctly, given my testing experience. IMO, the commit should be rolled back or the above described issues should be resolved before tagging a new release, since it breaks more functionality than does the original issue.

@ufku, did you test this before committing and experience different behavior?

Apologies @ufku, but there must be some sort of communication gap here.

For starters, can we abide by the best practice of not closing the issue until the solution has been tested and confirmed as working? That seems reasonable to me.

It sounds to me like you are suggesting: "If users care about image alignment, they should use the standard Drupal provided 'image' button instead of the IMCE provided 'Insert images using IMCE File Manager' button".

If that is not what you are suggesting, I would greatly appreciate you clarifying your statement. If this IS what you are suggesting, its simply a bad suggestion. While the standard image button's alignment functionality does work, this button does not allow users to browse/select files that are already on the server instead of uploading a new file. This is the entire reason people download IMCE. So, an IMCE dev suggesting users appeal to the standard Drupal image button instead of the IMCE image button simply does. not. compute. The other reason that this suggestion is bad is because it completely ignores the fact that your most recent commit is an inarguable downgrade of the IMCE button's functionality.

You said: "use the core Image button without the Upload option. You'll see IMCE integrated into the URL field."

What does this mean? Please provide further detail and/or screen shots. My testing indicates that there is no url field when clicking the standard Drupal image button, and that you haven't affected the standard Drupal image button at all, but rather broken the IMCE image button further.

I've attached screen shot to compare the results of using standard Drupal Image button/properties and IMCE image button/properties.

See comment below

@ufku, I gathered, from your comment #10 comment on the other ticket (for those out there not following both issues) that the Text Format in question must have " Enable image uploads" unchecked. Once that is taken care of, the url/browse functionality appears on the regular button.

See attachment.

Unfortunately, there is still a problem.

SCENARIO 1: IMCE is not installed. I add an image to a page using the drupal core image button. I can align the image, save the page, and the alignment is enforced. I can then edit the page, and the alignment is preserved. I can right/rouble click the image and change the alignment if I want to. No problems here.

SCENARIO 2: IMCE is installed and enabled. The Test Format in question has "Enable Image Uploads" unchecked. I add an image to a page using the standard drupal image button, then use the new IMCE integration to browse for a file, the image is inserted into the page, then I right/double click the image to get to Image Properties and align it accordingly. The alignment is enforced on the page. I then edit the page, and the alignment is not enforced in the WYSIWYG editor. Furthermore, now when I right/double click the image, there is no "Image Properties" option, which means I cannot adjust alignment. If I save the page, the alignment is preserved, but if I want to adjust it, I need to remove the image, add it back, and adjust it there when adding it.

Since everything works as expected without IMCE installed/enabled, but does not work as expected when IMCE is installed/enabled, my instinct is that IMCE is not implementing the core drupal image functionality properly. This may be an incorrect interpretation. What do you think @ufku and @Wim Leers?

@Corregidor, unfortunately I don't have an update, and am interested myself. Maybe @ufku and/or @Wim Leers have more info

thanks @FreMun, that's really helpful info. Hopefully @ufku will know what to do to get the proper data in those html properties and resolve this issue.

Great find! Paging @ufku

thanks @dylanf! Can a commiter (@ufku ?) review and merge the patch?

huh... that's odd. I'll chime in if I get a chance to test the patch. Thanks for the feedback @Hubbs

Great, thanks @Hubbs. I've been swamped, with no time to test myself. Will report back if I do.

Thanks for the info @farse, hopefully the issue this one was closed in reference to (duplicate) will address the problem: https://www.drupal.org/node/2771837

I am still experiencing it too.