Provide the UI to access the image styles on the Administration.

Description

The image style Administration provide the user interface to created end modify the images styles available on a wiki.

Administration

The main administration page allows to create a new image style on the new image style section, and to update the default image style.
The default image style is selected by default in the CKEditor Image Dialog when an user insert a new image.

When Force default style is checked, the user is forced to select a style.

Image Style configuration

The image style form provides the following properties:

• Pretty Name: The style name displayed to end user.
• Type: The type of the style. This is the technical identifier to uniquely identify a style.
• Size
  • Adjustable size: When checked, the end users are allowed to change the size (i.e., width and height) of the image
  • Default width: The default value of for the width of an image with this style
  • Default height: The default value of for the height of an image with this style
  • Adjustable border: When checked, the end users are allowed to choose if the image has a border
  • Default border: When checked, the image has a border by default
  • Adjustable alignment: When checked, the end users are allowed to choose the alignment of the image
  • Default alignment: The alignment selected by default (none, start, end, center)
  • Adjustable Text Wrap: When checked, the end users are allowed to choose if the text is wrapped around the image
  • Default alignment: When checked, the image has is wrapped around the text

Usage

Using CKEditor

See the CKEditor documentation.

In wiki syntax

The standard image syntax applies, but with some additional parameters:

• data-xwiki-image-style: the type of a image style (see the image style administration documentation)
• data-xwiki-image-style-border: (true|false) when true, indicates that the image must have a border
• data-xwiki-image-style-alignment: (start|center|end) indicates the horizontal location of the image
• data-xwiki-image-style-text-wrap (true|false) when true, indicates that the surrounding text must be wrapped around the image

Examples:

For developers

When Force default style is checked, the default style is used implicitly, meaning that when the default style is selected, no data-xwiki-image-style will be persisted.
This is means that if the default style changes, the new default style will be selected when re-editing the images.

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

1. Log in the wiki with a user having Administration rights
2. Go to the Administration page and select the Import category
3. Follow the on-screen instructions to upload the downloaded XAR
4. Click on the uploaded XAR and follow the instructions
5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Dependencies

Dependencies for this extension (org.xwiki.platform:xwiki-platform-image-style-ui 16.10.1):

• org.xwiki.platform:xwiki-platform-livedata-macro 16.10.1
• org.xwiki.platform:xwiki-platform-livedata-livetable 16.10.1
• org.xwiki.platform:xwiki-platform-image-style-api 16.10.1
• org.xwiki.platform:xwiki-platform-image-style-rest 16.10.1
• org.xwiki.platform:xwiki-platform-csrf 16.10.1
• org.xwiki.platform:xwiki-platform-localization-script 16.10.1
• org.xwiki.platform:xwiki-platform-model-api 16.10.1
• org.xwiki.platform:xwiki-platform-localization-macro 16.10.1
• org.xwiki.platform:xwiki-platform-xclass-ui 16.10.1