The 'Alternative Text' field in the quickedit bubble for single image fields has a wrong placeholder, it currently reads 'alt'.
In #2421427-57: Improve the UX of Quick Editing single-valued image fields was agreed to use 'Alternative Text' as a label instead.

However, this is not really helpful to use as a placeholder as well.
The placeholder should give an example or explain the 'techy' label better.

Furthermore, let's do something about the design of the field. It is not consistent and looks not finished.
We can align it to the left and/or make it 100% width of the bubble.

Before:

After:

Comments

dmsmidt created an issue. See original summary.

Wim Leers’s picture

Title: Improve quickedit single image alt text field » Improve the "Image" InPlaceEditor plugin's "alt" attribute UI
Category: Bug report » Task
Issue tags: +Usability

+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.

yoroy’s picture

Issue tags: +sprint
yoroy’s picture

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

tkoleary’s picture

Assigned: Unassigned » tkoleary
dmsmidt’s picture

@tkoleary, note that we have a starting contributor working on a patch during the ux print (rkoller).

rkoller’s picture

Assigned: tkoleary » rkoller
rkoller’s picture

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.

dmsmidt’s picture

@rkoller, nice working together with you, and thanks a lot for your patch.

It almost works! However we forgot to also modify the "Stable" theme. So I duplicated you changes to the theme.
(Tip: in patch naming we normally add the comment number after the issue id)

So, manually tested and looks nice, patch is clean and simple.

dmsmidt’s picture

Assigned: rkoller » Unassigned
tkoleary’s picture

@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.

dmsmidt’s picture

@tkoleary, when this feature was added Stable was also modified. So why can't we here? It fixes the problems that are only in 8.3.x (dev) and haven't been released in a stable Drupal release, so no body should be using it, and nobody needs backwards compatibilty there. Could you point to a page which clearly states, what can and can't be done to Stable (and when)? Thanks.

tkoleary’s picture

@dsmidt

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

samuel.mortenson’s picture

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.

mgifford’s picture

Status: Needs review » Needs work

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.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.