Docs

Image widget

Image widget logoThe Image widget allows inserting a picture to the content and then editing it. In the left sidebar you can replace an image, configure its dimensions, make it responsive, align or convert it in Image Preview.

If the File Manager add-on is installed, the file should be selected using the file view on the server. Users of the Image Editor add-on can also edit images.

Upload Images screenshot Edit Image screenshot

Configuration

You can adjust the template of the embedded image: classes, styles and attributes added by default.

Default settings:

widgets: {
    Image: {
      template: {
          classes: [
              "img-fluid"
          ],
          styles: {},
          attributes: {}
      }
    }
},

As you can see, the img-fluid class is already added to the image in case you use Bootstrap and want to make this image responsive. If you don't use Bootstrap, the class does not change anything and is ignored. Although, you may delete this class if you want.

Classes are specified as an array, while styles and attributes can be set as key-value pairs, for instance:

styles: {
    "max-width": "400px"
}