I am always striving to make a better user experience by providing everything you need at hand and by making it look great.
In this final part of setting up an Entity Embed module use case, namely a CKEditor multi-image galley, I am going to look at a few user experience enhancements. The enhancements, even though small, will set your application editing experience apart.
Add label help message
Adding a guide or user manual on how to use your application is important. People are busy, and adding new content to their website might be something only done periodically, and therefore, forget how things are done.
As well as having a user manual, I find it useful to add inline guidance.
Drupal has the help text field that adds help text below a field. Even though this is useful, sometimes having important help text above the field is better. This is where label help comes in.
The Label Help module is easy to install and enable. It provides a new label help message field to every field.
I wrote about label help in a newsletter recently so please check that for another use case that may make your users' jobs easier.
Adding Label help message for our CKEditor Gallery
For the gallery, I think it is useful to provide a link directly to create a media gallery block easily and also give other useful information, such as which text format to use. The following is what I added and the code, feel free to use it.
<strong>Multi-image Gallery</strong><br>
<ol>
<li><a _target="blank" title="create a multi-image gallery" href="../block/add/media_gallery_block">Add a Media Gallery Block</a>. Gallery block description value is needed in step 3.</li>
<li>Set Text format to Full HTML (below Editor)</li>
<li>Add the gallery created in step 1 by using the <strong>E</strong> in the below toolbar</li>
</ol>
To be clear, I don't think you should add the full user guide to label help; just the most important stuff, in this case, a link to create a block. You could also add a link to the user manual. The idea is to make the user's experience better, not to overwhelm.
Next up, styling the CKEditor.
Going Further and Styling the CKEditor
If you don't style the entity embed element, then the embed will look unwieldy. I cover how to style CKEditor in the Add Theme Styles to CKEditor WYSIWYG in Drupal article.
I will add that the Entity Embed module adds a wrapper around the embedded element, and for the best result, you should add the ck-editor class. So the selector for CKEditor will look something like this:
.ck-content .embedded-entity .photoswipe-gallery
And for the front-end it will be something like this:
.text-formatted .embedded-entity .photoswipe-gallery
Be sure to check the aforementioned link for full details on adding style to the CKEditor.
Adding an Icon
When setting up the original embed button, I said using the default E icon might work if only one embed option is added.
However, adding custom icons is a great user interface touch, and they also look great.
So for the best user experience, I would add a unique icon.
Summary
This article looked at user experience and how it is important to make the content editors' jobs as smooth as possible.
In the case of using the Entity Embed module to add a CKEditor Multi-image Gallery, I suggested you add help above the CKEditor by using the Label Help module. The help gives the user a direct link to create a new gallery block.
Then I suggested styling the CKEditor to match the front-end output and showed how easy this is.
Finally, the small touch of adding a custom icon tops off the user experience enhancement.
I hope you enjoyed this article. By signing up for my newsletter you can explore more interesting content on creating remarkable user experiences with Drupal and other technologies. The newsletter is on the intersection of design and front-end development, Sign up below.
Until next time, seize the day!