Table of Contents

you are here (click to zoom) - discover the stack

DynamicEntity / TypedItem .Html(...) Method new v16.01

The Html method is a new feature in 2sxc 16.01 which allows you to render a property/field as HTML. The main purpose is to allow you to render a rich-text field as HTML, but it can also be used to render other fields.

Simple example assuming a blog-post with a Body field:

@post.Html("Body")

Behavior / Features of the Html Method

  1. Return an IHtmlTag object which can be rendered as HTML directly
  2. Wrap the value in a <div> tag by default (but you can change this)
  3. Sometimes automatically add an edit-toolbar for this specific field
  4. Automatically do some optimizations on certain field types, such as string-wysiwyg

Default Behavior

By default it will just do this

  1. Wrap in a <div> tag
  2. Output the value

So by default it will not add a toolbar, and it will not do any special processing.

Behavior on Rich, string-wysiwyg fields

If the field is a string-wysiwyg field which has been configured to be of the new Rich type, it will automatically do the following:

  1. Wrap in a <div> tag
  2. Add some helper classes to the <div> tag to ensure proper styling
  3. Add a toolbar to edit the field
  4. Change all the images in the wysiwyg to be responsive, lazy-loaded and multiple resolutions
  5. Automatically process InnerContent just like the IRenderService
Tip

In future, other field types will also receive special treatment, so for now, you should only use this on fields where you expect the special treatment.

Container

By default, it will always add a div tag around the value. This is to ensure that the contents is properly styled and to allow adding a toolbar. To change this, you can specify the container parameter to be one of the following:

  1. null - default, the default div container will be added
  2. "" - empty string, no container will be added
  3. "tagname" - any tag name like p, span, h1 etc. will be added
  4. IHtmlTag - any IHtmlTag object will be added, usually created using Kit.HtmlTags.TagName()

Examples:

@* default, will wrap in a div *@
@post.Html("Body")
@post.Html("Body", container: null)

@* don't wrap in any container *@
@post.Html("Body", container: "")

@* will warp in a <p> or <h1> tag *@
@post.Html("Body", container: "p")
@post.Html("Body", container: "h1")

@* will warp in a <div class='my-class'> tag *@
@post.Html("Body", container: Kit.HtmlTags.Div().Class("my-class"))

Toolbar

By default, it will not add a toolbar, unless it's a string-wysiwyg field. To change this, you can specify the toolbar parameter to be one of the following:

  1. null - default, the default behavior will apply
  2. false - enforce no toolbar
  3. true - enforce a toolbar to edit just this field

For any other custom behavior, use toolbar: false and add your own toolbar to the container.

Examples:

@* default, normal fields will not have a toolbar *@
@post.Html("Title")
@post.Html("Title", toolbar: false)

@* normal fields can enable the field-toolbar *@
@post.Html("Title", toolbar: true)

@* string-wysiwyg fields will have a toolbar *@
@post.Html("Body")
@post.Html("Body", toolbar: true)

@* string-wysiwyg fields can disable the toolbar *@
@post.Html("Body", toolbar: false)

Image Resize Settings

If the field is a string-wysiwyg field which has been configured to be of the new Rich type, it will automatically replace all images with a responsive, lazy-loaded version.

To do this, it uses the resize configuration called Wysiwyg. This is different from Content as it doesn't enforce a specific height.

To change this, you can do various things:

  1. Reconfigure the Wysiwyg image settings on the App, Site or entire System
  2. Specify another word such as Content in the imageSettings parameter
  3. Specify another configuration object in the imageSettings parameter

Debug

Especially in the case of string-wysiwyg fields, it can be very helpful to see what's going on. To make this possible, there is a parameter debug which can be set to true.

👉🏽 Read more in the Rich WYSIWYG docs

History

  1. Introduced in 2sxc 16.01 for the new Rich-Text field type
Edit this page