Combined Image/Video & Content Box Widget Custom Tag

Combined image & content box without image caption:

<widget-imageContentBox attributes>
	<widget-imageContentBox-image attributes/>
	<widget-imageContentBox-content attributes>
		...
	</widget-imageContentBox-content>
</widget-imageContentBox>

Or combined image & content box with image caption:

<widget-imageContentBox attributes>
	<widget-imageContentBox-image attributes>
		...
	</widget-imageContentBox-image>
	<widget-imageContentBox-content attributes>
		...
	</widget-imageContentBox-content>
</widget-imageContentBox>

Combined video & content box without image caption:

<widget-videoContentBox attributes>
	<widget-videoContentBox-video attributes/>
	<widget-videoContentBox-content attributes>
		...
	</widget-videoContentBox-content>
</widget-videoContentBox>

Or combined video & content box with image caption:

<widget-videoContentBox attributes>
	<widget-videoContentBox-video attributes>
		...
	</widget-videoContentBox-video>
	<widget-videoContentBox-content attributes>
		...
	</widget-videoContentBox-content>
</widget-videoContentBox>

The order and nesting of the outer <widget-imageContentBox> tags and the inner <widget-imageContentBox-image> and <widget-imageContentBox-content> tags is important and must be specified as shown above. (And similar for the video box.) Also there must not be any code outside of the two nested inner tags (i.e. other code is allowed only in the places denoted with ... in the samples above).

The actual content for the content box part goes between the opening and closing <widget-imageContentBox-content> inner tags. For the version with an additional image caption, the caption content goes between the opening and closing <widget-imageContentBox-image> inner tags. (And similar for the video box.)

Allowed attributes for the outer <widget-imageContentBox> or <widget-videoContentBox> tag:

name: Defines the optional widget name. You can specify any name you like to label the widget. This name is shown in the widget hierarchy panel (in design mode) and makes it easier to identify the widget in the hierarchy. It also makes it easier it identify the widget here in code mode. However, the name is entirely optional and does not have any additional functional purpose.

Possible values: Any text
widgetbox-style: Defines the styling of the surrounding widget box.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the widget box.
- border: Defines the border around the widget box.
- padding: Defines the padding inside of the widget box (between the box and its content).

Additional attribute when editing the message content of a mail job:

condition: Sets the widget condition for the image/content box. The widget will only be shown if this condition is true (or if there is no condition at all). See here about special issues when specifying a condition formula in code mode.

Possible values: Any valid calculation formula that does not have a number set or text set as its result.

Additional attributes when editing a standard template:

These additional attributes are only allowed when editing a standard template and if the widget is not already nested into a template-editableBlock.
Additionally for the cloneable, conditional and deleteable attributes, the widget itself must have one of the following widgets nested into its own content box: A template-editableBlock, a widget-imageBox, or a widget-imageContentBox, where the latter two must also have the imagereplaceable attribute set to true.
If the above is not the case, then these attributes are ignored if specified.
cloneable: Defines if this widget shall be cloneable by the template end user or not.

Possible values: true or false
condition: Same as the "additional attribute when editing the message content of a mail job", see above.
conditioneditable: Defines if this widget shall allow the template end user to edit the widget condition (or define one, if the widget currently does not have one) or not.

Possible values: true or false
deletable: Defines if this widget shall be deletable by the template end user or not.

Possible values: true or false
imagereplaceable: Defines if the image of this widget shall be replaceable by the template end user or not.

Possible values: true or false

Allowed attributes for the inner <widget-imageContentBox-image> or <widget-videoContentBox-video> tag:

align: Defines if the image/video box shall be left or right aligned in the widget.

Possible values: left or right
alt: Defines the alt text attribute of the image.

If this attribute is set, then during automatic alternative text generation, the alt text plus a link to the image will be added to the alternative text, in lieu for the actual image. Unless the data-lsoft-no-alt-text-link attribute is also set (see below).

Possible values: Text
image-style (image box only) or video-style (video box only): Defines the styling of the image/video box.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- border: Defines the border around the image/video box.
- padding: Defines the padding outside of the image/video box (between the image box and its surroundings or parent).
- padding-caption: Defines the padding between the image/video box and the caption (only applicable for widgets that have a caption).
data-lsoft-do-not-track: Defines if clicks on the image shall be exempt from tracking.

Possible values: true. Any other value, or omitting the attribute completely, means that the click on the image is tracked.
data-lsoft-no-alt-text-link: Defines if during automatic alternative text generation, a link to this image shall not be included in the alternative text, even if the alt attribute is set (see above).

Possible values: true. Any other value, or omitting the attribute completely, means that a link to the image may be added to the automatically generated alternative text (depending on the alt attribute).
link: Defines a clickable link. If specified, then the image will act as a clickable link that sends the user to the given URL.

Possible values: URL
src: Defines the actual image or video that is to be displayed. This value cannot be specified by typing it into the source code manually, but can only be inserted by clicking the corresponding widget option in the panel on the right, or the "Image" button in the toolbar. The former inserts the whole widget code, the latter inserts a standard <img> tag, that can then be edited into this widget tag instead.

In the editor, the value of the src attribute is not shown as normal text, but as a special visual placeholder that can be clicked to change the actual image or video.

Possible values: Image or video
title: Defines the title attribute of the image.

Possible values: Text
width: Defines the fluid width of the image/video box.

Possible values: The width must be specified as two or three values, separated by semicolon. The first value must be a pixel value (with the "px" suffix) and the second value must be a percentage value (with the "%" suffix). Together they define the fluid width of the image/video box, which is either the given pixel width, or the given percentage of the parent width, whichever is smaller. These first two values are mandatory.
For example: 300px; 50%
The third value is optional. If present, it must be a pixel value (with the "px" suffix) and specifies the width of the image in Outlook (all other email clients ignore this third value). If not present, then Outlook uses the first value for the width instead (and Outlook always ignores the percentage width).
For example: 300px; 50%; 150px

Allowed attributes for the inner <widget-imageContentBox-content> or <widget-videoContentBox-content> tag:

class: Sets one or more style class attributes for the content box, similar to the standard HTML class attribute.

Possible values: List of class names.
contentbox-style: Defines the styling of the content part of the widget.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- color: Defines the text color of the content.
- font-style: Defines if the font of the content box shall use the "italic" style or not. The only allowed value for this style is italic. If any other value is specified, it is ignored and the normal non-italic font is used. The normal font is also used if this style is not present at all.
- font-weight: Defines if the font of the content box shall use the "bold" weight or not. The only allowed value for this style is bold. If any other value is specified, it is ignored and the normal non-bold font is used. The normal font is also used if this style is not present at all.
- font-size-rel: Defines the size of the content box font, relative to the default font size, in percent. The size is always interpreted with the unit "%", even if no unit is specified. If a different unit is specified, it is ignored and "%" is used instead. If an invalid size or unit value is specified, it is ignored and the widget uses the default font size instead (as specified in the "Fluid Design Widget Default Font" panel on the right). If this style is not present, the widget also uses the default font size. Also, the specified size must be one of the standard sizes that is also available in the widgets properties dialog in design mode. If a different size is specified, the default font size is used instead.
  Note: Although similar, this style is not the same as the standard font-size style. Most importantly, you can only use the "%" unit and can only specify one of the standard sizes.
- text-align: Defines the alignment of the text in the content box. Only the values left, center, right and justify are allowed. If any other value is specified, it is ignored and the content box uses the inherited alignment. The inherited alignment is also used if this style is not present at all.
- text-decoration: Defines if the font of the content box shall use the "underline" style or not. The only allowed value for this style is underline. If any other value is specified, it is ignored and the normal non-underlined font is used. The normal font is also used if this style is not present at all.
surround: Defines if the content shall flow around the image/video box or not.

Possible values: true or false

Examples:

<widget-imageContentBox>
	<widget-imageContentBox-image
			align="left"
			src="[IMAGE]"
			width="200px; 33%"/>
	<widget-imageContentBox-content
			surround="true">
		Content goes here...
	</widget-imageContentBox-content>
</widget-imageContentBox>

<widget-videoContentBox
		widgetbox-style="background-color:#fff4aa; border:16px dashed #00fff6; padding:13px 12px 14px 11px;">
	<widget-videoContentBox-video
			align="right"
			alt="alt text goes here"
			video-style="border:5px solid #05ff00; padding:3px 2px 4px 1px; padding-caption:6px;"
			link="https://www.lsoft.com"
			src="[VIDEO]"
			title="title goes here"
			width="212px; 33%">
		Caption goes here...
	</widget-videoContentBox-video>
	<widget-videoContentBox-content
			contentbox-style="color:#0026ff;"
			surround="false">
		Content goes here...
	</widget-videoContentBox-content>
</widget-videoContentBox>