Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Available in Text blocks that load the CKEditor

  • Click on the Image button in the toolbar. 

    • Looks like a photo.

  • You will be prompted to upload an image file.

    • Images must be smaller than 5 MB

  • Alternative text field is required

  • Align field is available to set how text wraps around the image

    • Stylings and margins for image alignment will be improved in future CFW3 releases

  • You can make basic changes to an uploaded image by either double-clicking or right-clicking on the image to bring up the Image Properties modaltoolbar.

    • Available properties in this modal are very limited and you will not have access to certain fields (width, height, class) as in CFW2.

  • Inline images uploaded in this manner are added to the files managed by Drupal

  • Images are uploaded to an /inline-images directory on your website

...

Aligning Inline Images

  • Double-click or right-click on the image to bring up an Image Properties modaltoolbar.

  • Select one of the Align options: None, Left, Center, Right

    • Stylings and margins for image alignment will be improved in future CFW3 releases

...

If you are embedding an image that has not been uploaded via CKEditor as above, you will not have the benefit of CKEditor’s image properties toolbar and features. This is due to Drupal 9’s CKEditor file management integration. 

You will not see any image handles, nor be able to bring up Image Properties modaltoolbar.

All edits to the width, height, and placement must be made inside the source HTML itself. An example of an offsite image might be an image for a logo that isn’t hosted on your website, or an image that was uploaded on a separate webpage of your website.

However, you do have basic alignment options available for these types of images with Formatting Styles.

...

Click on the image in the editor so it is highlighted

...

In the CKEditor toolbar, click on the Styles pulldown menu

Choose one of the available Object styles for the image

...

Responsive Image

...

Image - Left Aligned

...

Inline Files

You do have the ability to upload inline files directly inside of CKEditor to add alongside body text.

...