Drupal 8 - Wrapping text around images

vince's picture
As of Drupal 8.4.5, since ckeditor has been crippled, these are the most simple methods I could come up with to style inline images in my content, such as wrapping text and/or adding borders and margins around them.

These methods are not ideal but workable and not too painful.

All of this is based on utilizing css_injector, from the asset_injector module, so that no code changes have to be made to any theme files or modules.

I tried enabling the Styles button in ckeditor, but it will not let you define CSS classes for images for some weird reason. Apparently only block tags such as <div> or <p>.

Using the default ckeditor image button

The default ckeditor image button allows you to set image alignment, but they have removed all other settings that were available in Drupal 7, such as border or space around the image.

The other annoying thing about this button is that you have no way to browse the local server to use an already uploaded image. You can only upload another copy again.

The button, based on your selected alignment option, adds a property of data-align="right|left|center" (if you select an alignment other than 'none'), which adds a class of "align-left", "align-right", or "align-center" on the final output. You can add CSS for those classes to add margins and/or borders.
For example to add a margin,
  img.align-left {
          margin-left: 2px;
          margin-right: 6px;
      }

Using the insert module with the image field

The Insert module allows you to configure a custom class that will be added to all images you insert, so you can set that and then style it in css_injector, which gives you default image styling. If you need to change it for one or more images, you have to either change the default class in the insert module settings, or switch to source mode in ckeditor and edit the class name to an alternate class you have defined in css_injector.

For example, in the insert module configuration page, in the field labeled "classes to be added to images and image links", I configured it to add class "inline-image".

When I insert a medium style image, in the image tag, it adds
class="image-medium inline-image"
I can edit the html source in ckeditor and add "align-left" to the class list, for example, if I want it to float left,
<img alt="some pic" class="image-medium inline-image align-left" ...
Then I set my margins and any other styling I want as my defaults for the inline-image class.

In css_injector, if I wanted borders around my images for example, I could add
  .inline-image {
      border-width: 2px;
      border-style: solid;
      border-color: gray;
  }
I could also add a float property here if I wanted images to float left or right by default.

The insert module seems buggy and inconsistent compared to the Drupal 7 version though.

When enabled on an image field for a paragraph from the Paragraphs module, there is a link above the "Browse" button, called "Open file browser" that allows you use IMCE browser to select an image from the server file system. Yet when I select an image file, nothing happens. It doesn't show that any file has been selected.

The Browse button for the image field for content types, such as Article, has no such link, even though the image field under "Manager form display" is configured the same way.

Using IMCE

The IMCE module does not provide any configuration for a custom class for the images. So you have to edit the source html to add it for any images added that way. That's an inconvenience, but you gain the convenience of being able to insert images from already uploaded images. The other methods make you re-upload another copy of the image every time, which is irritating.

So, if I added class="float-left" to the 'img' tag, I could style it with
  img.float-left {
      float: left;
  }
It is best to turn off "Enable image uploads" with IMCE. Go to
Configuration -> Content authoring -> Text formats and editors
Click "Configure" for the text format (such as Full HTML), scroll down to the "CKEditor plugin settings" section, and there you can uncheck "Enable image uploads".

This results (when you click on the Image button in ckeditor) in a plain text field containing the path to the image being displayed, instead of an empty upload field when you click the default ckeditor image button. If the image was inserted via Insert, from an image field, this path is already filled in and you can change the alignment. If the image was inserted via the IMCE image button, then you have to re-fill in the field, which can be copied and pasted from the image path, but it does not make you re-upload it. If you check "left", for example, it adds data-align="left" to the <img> tag in ckeditor, which results in class="align-left" being added to it on the output.

With "Enable image uploads" left turned on, you cannot select the alignment of an image that is already in your content field via that dialog without re-uploading the image.

Using the paragraphs module

The Paragraphs module has some nice features but I could not get it to work with the Insert module for Image fields, which is problematic for using the paragraphs module for image galleries.

I could not find any documentation that adequately showed me how to use it in a way that gave me a simple solution to my problem of wrapping text around images, without modifying template or module code, so once I finally figured it out, I wrote a separate set of instructions on how to do it.