Improve the "Image" InPlaceEditor plugin's "alt" attribute UI

+1

This should take inspiration from \Drupal\editor\Form\EditorImageDialog — both in terms of its precise title and placeholder, as well as its validation error behavior.

left align and full width looks much better! lets have a patch :-)

Ok in the following the positioning issue of the label and input field got fixed by removing the .quickedit-image-field-info selector completely. That moved the input to the left. Afterwards the field got set to 100% in width in .quickedit-toolgroup, along a failsave for the case if the type is set to submit set. In the js file the unnecessary wrapping div got removed and Drupal.t('Alternative text') entered for the alt placeholder.

Thanks for @dmsmidt and @tkoleary for advice and guidance along the way. Hope everything is placed correctly. If no please notify me, is my first commit and i try to learn and improve. ;) Cheers r.

@dsmidt

Stable theme cannot be modified so we need to add the css to seven themes quickedit css.

Quickedit module has a libraries override to inject seven's quickedit css in to front-end themes.

@dsmidt

Sorry, you are right. If it's styling new markup it can be added to stable.

diff --git a/core/modules/quickedit/css/quickedit.theme.css b/core/modules/quickedit/css/quickedit.theme.css
index 399db7a..9896427 100644
--- a/core/modules/quickedit/css/quickedit.theme.css
+++ b/core/modules/quickedit/css/quickedit.theme.css
@@ -180,6 +180,12 @@
 .quickedit-toolbar-fullwidth {
   width: 100%;
 }
+.quickedit-toolgroup input {
+  width: 100%;
+}

Has this been tested when there's both a Title and Attribute enabled for an Image field? The reason flexbox was used before was so that the two inputs sit side by side at half width.

Ok, sounds like we need to ensure "two inputs sit side by side at half width." as per @samuel.mortenson

@dmsmidt feel free to revert if I'm wrong about this.

Re-rolling against latest 8.x-5.x-dev.

Thanks @sylus - btw was talking with your team last night. Sounds like things are in a much better place (which is amazing).

The review from #14 has not been addressed in the latest patch, unless it's more than a re-roll.

I tested this patch on simplytest. I enabled the title attribute for the image in the Article content type and then used quick edit the image. I don't get to see a title field at all:

The form for updating the title attribute is not added to the Quick edit window. Making the title attribute required did not change that.

(side note: I had to manually remove the float:left on the image in Bartik before I could even reach the image via quickedit. The body text div was over it when floated)

Due to Quickedit being moved out of Drupal Core and into a Contrib Module, moving this issue to the Contrib Module queue.