Inserting images into the text flow

[paul-frost]

A very common use case is to have an image within the text flow to illustrate what is being referenced in the text. I'm thinking where there is a paragraph or more referencing something rather than a single line which could be handled by a caption.

A common presentation would be the image taking up 50% of the width available and the text wrapping around it on larger screens. The css could control the exact layout/size based on available space.

The CKEditor website demo for image insertion has lots of options to choose the float direction and percentage of page width, why can't that be available in theCraft implementation?

The only option currently available is to create an 'entry type' for a CKEditor field that has multiple seperate fields:
Image - Asset field
Related text - CKEditor field
Position - Radio or Dropdown field
Width - Radio or Dropdown field
Caption - Plain Text field
Alt text - Plain Text field

But this also abstracts all that out into a seperate entry, and the related text is no longer part of the parent entry. I'm not sure if there could be any longer term issues with doing that but it feels wrong.

It also looks awful when you are editing the entry in the control panel as you don't have enough control as to how it is presented. If you have several entry type options included it looks very disjointed.

Hopefully we can can come up with a nicer UI than this.

[i-just]

Hi, thanks for getting in touch. You can use various floating and wrapping options, but first, you need to add the necessary config to the “CKEditor Config” you’d like to use those in. By default, the “Insert image” toolbar item comes with the toggleImageCaption and imageTextAlternative options, but you can add various image styles and style options, too. Try adding the following to your selected CKEditor Config under “Config options”:

"image": {
    "toolbar": [
      "imageStyle:inline",
      "imageStyle:wrapText",
      "imageStyle:breakText",
      "|",
      "toggleImageCaption",
      "imageTextAlternative",
      "transformImage"
    ],
    "styles": {
      "options": [
        "inline",
        "alignLeft",
        "alignRight",
        "alignCenter",
        "alignBlockLeft",
        "alignBlockRight",
        "block",
        "side"
      ]
    }
  }

That’ll give you the ability to change the style and alignment of the inserted image:

You can also add styles that will be used while editing content under “Custom Styles”. For example:

.image-style-align-right {
  max-width: 50%;
}

A complete list of options is available here: https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imageconfig-ImageConfig.html#member-styles

You might also find this discussion helpful: #94

I hope this helps!

[i-just]

That’s a feature of the HTML Purifier. There’s a HTML.MaxImgLength setting, and the default value is 1200.

You can change it by editing the json config file used by your field (HTML Purifier config files live under config/htmlpurifier/).

[paul-frost]

Thanks, that's fixed it, but it's a shame that it doesn't maintain the aspect ratio. But I normally limit the size up uploaded images in the first place using the Image Resizer plugin, so it shouldn't be a problem. I was just using the CraftQuest training site to experiement and it had some very large images.
There are so many config options that aren't explained or obvious in the Craft docs.

[paul-frost]

Sorry to be a pain, but I've been trying to edit your code to only allow right align or block centered and although it saves the config OK, on the entry edit page I get a white arrow that doesn't open anything above the image instead of the icon menu choices. Can you point me in the right direction?

[i-just]

Is this what you're after?

"image": {
    "styles": {
      "options": [
        "alignRight",
        "block"
      ]
    },
    "toolbar": [
      "imageStyle:alignRight",
      "imageStyle:block",
      "|",
      "toggleImageCaption",
      "linkImage",
      "transformImage"
    ]
  }

It also works without the "styles" part. You can find more info on how to configure images, including how to define your own styles and buttons, here: https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html#demo

[paul-frost]

Perfect, thanks.
I feel a lot more confident about using CKEditor for a new Craft 5 site. I was starting to despair at how bad the UX was for longform content compared to using a Matrix field in Craft 4.