Skip navigation

Dealing with structure in rich text

There are times when all you want is a WYSIWYG page builder to build pretty pages for your website. There are other times when you want to make sure your content is future-proof and can be used outside individual pages. In such cases, the structure of your content matters, as you can read about in our blog post about WYSIWYG page builders.

In this tutorial, you'll retrieve tweets added to your rich text. To follow along with the example, first insert a tweet into a blog post.

To understand how to deal with structured data models, you'll also learn how to add blockquotes to articles within MVC apps.

Table of contents

    How structured rich text helps you

    One of the benefits of using an API-first CMS like Kentico Kontent is you're able to clearly structure your content so it can be used in any channel. But you don't want to be restricted to needing to know exactly what content will be included ahead of time. Structure is great, but your content editors want the freedom to add various amounts of various kinds of content. For this, you can add structure to your rich text with components and linked items.

    The major difference between the two is that components exist only inside a single content item, while linked items can be reused across your project. You can read more about when to use components and when linked items.

    With Kentico Kontent, you can link content items together in two ways:

    1. Using a Linked items element – here, you can limit the items, including what types can be included and how many. Read how to retrieve linked content.
    2. In a Rich text element – here, your items are included within the text, which requires additional work from your app to render them. This way is covered here.

    This article will look at how to add structure into your rich text through examples of components. For your rich text, the principle is the same for components and linked items. They can be distinguished in the JSON response, but it's not necessary for these purposes.

    There are two basic ways to implement the structure on your front end: by defining resolvers for content types that might appear in the rich text and by using templates or specific views for structured blocks. With most technologies, you can choose whether to take a global approach with resolvers or iterate over blocks, such as by making use of design templates for blocks within your MVC or similar app. For example, for .Net, you can choose whether your models will be structured data or strings using the --structuredmodel parameter of the model generator. Choosing to use a structured model can help ensure you don't need to know what types of content is being added to your rich text as your hierarchy will be created automatically.

    Resolving tweets within rich text

    To see how resolvers can be implemented, this example will show how tweets can be embedded within the body of articles. Similar examples can be seen in many of our sample apps for various technologies.

    Modeling and creating your tweets

    For an example of how to model and create tweets, see Inserting tweets into blog posts. Once you have tweets in your content, all you need to do is render them.

    Rendering tweets in your rich text

    Since you have tweets prepared, you can now proceed to the exciting work of rendering your tweet inside your article body. The exact process depends on the tech stack you are using, but may be something like the following.

    1. Define a model for your tweet
    2. Implement a resolver
    3. Register the resolver
    4. Retrieve the article

    1. Define a model for your tweet

    If you're using strongly typed models, you should remember to add your Tweet model.

    • Java
    // Generate strongly typed models at https://github.com/Kentico/cloud-generators-java import com.github.kentico.kontent.delivery.ContentItemMapping; import com.github.kentico.kontent.delivery.ElementMapping; import com.github.kentico.kontent.delivery.Option; import com.github.kentico.kontent.delivery.System; import java.lang.String; import java.util.List; @ContentItemMapping("tweet") public class Homepage { @ElementMapping("tweet_link") String tweetLink; @ElementMapping("theme") List<Option> theme; @ElementMapping("display_options") List<Option> displayOptions; System system; public String getTweetLink() { return tweetLink; } public void setTweetLink(String tweetLink) { this.tweetLink = tweetLink; } public List<Option> getTheme() { return theme; } public void setTheme(List<Option> theme) { this.theme = theme; } public List<Option> getDisplayOptions() { return displayOptions; } public void setDisplayOptions(List<Option> displayOptions) { this.displayOptions = displayOptions; } public System getSystem() { return system; } public void setSystem(System system) { this.system = system; } }
    // Generate strongly typed models at https://github.com/Kentico/cloud-generators-java import com.github.kentico.kontent.delivery.ContentItemMapping; import com.github.kentico.kontent.delivery.ElementMapping; import com.github.kentico.kontent.delivery.Option; import com.github.kentico.kontent.delivery.System; import java.lang.String; import java.util.List; @ContentItemMapping("tweet") public class Homepage { @ElementMapping("tweet_link") String tweetLink; @ElementMapping("theme") List<Option> theme; @ElementMapping("display_options") List<Option> displayOptions; System system; public String getTweetLink() { return tweetLink; } public void setTweetLink(String tweetLink) { this.tweetLink = tweetLink; } public List<Option> getTheme() { return theme; } public void setTheme(List<Option> theme) { this.theme = theme; } public List<Option> getDisplayOptions() { return displayOptions; } public void setDisplayOptions(List<Option> displayOptions) { this.displayOptions = displayOptions; } public System getSystem() { return system; } public void setSystem(System system) { this.system = system; } }
    • C#
    // Generate strongly typed models at https://github.com/Kentico/kontent-generators-net using System; using System.Collections.Generic; using Kentico.Kontent.Delivery; namespace KenticoKontentModels { public partial class Tweet { public const string Codename = "tweet"; public const string TweetLinkCodename = "tweet_link"; public const string ThemeCodename = "theme"; public const string DisplayOptionsCodename = "display_options"; public string TweetLink { get; set; } public IEnumerable<MultipleChoiceOption> Theme { get; set; } public IEnumerable<MultipleChoiceOption> DisplayOptions { get; set; } public ContentItemSystemAttributes System { get; set; } } }
    // Generate strongly typed models at https://github.com/Kentico/kontent-generators-net using System; using System.Collections.Generic; using Kentico.Kontent.Delivery; namespace KenticoKontentModels { public partial class Tweet { public const string Codename = "tweet"; public const string TweetLinkCodename = "tweet_link"; public const string ThemeCodename = "theme"; public const string DisplayOptionsCodename = "display_options"; public string TweetLink { get; set; } public IEnumerable<MultipleChoiceOption> Theme { get; set; } public IEnumerable<MultipleChoiceOption> DisplayOptions { get; set; } public ContentItemSystemAttributes System { get; set; } } }
    • TypeScript
    import { ContentItem, Elements } from "@kentico/kontent-delivery"; // Generate strongly typed models at https://github.com/Kentico/kontent-model-generator-js export class Tweet extends ContentItem { public tweetLink: Elements.TextElement; public theme: Elements.MultipleChoiceElement; public displayOptions: Elements.MultipleChoiceElement; constructor() { super({ propertyResolver: (elementName: string) => { if (elementName === "tweet_link") { return "tweetLink"; } if (elementName === "display_options") { return "displayOptions"; } return elementName; } }); } }
    import { ContentItem, Elements } from "@kentico/kontent-delivery"; // Generate strongly typed models at https://github.com/Kentico/kontent-model-generator-js export class Tweet extends ContentItem { public tweetLink: Elements.TextElement; public theme: Elements.MultipleChoiceElement; public displayOptions: Elements.MultipleChoiceElement; constructor() { super({ propertyResolver: (elementName: string) => { if (elementName === "tweet_link") { return "tweetLink"; } if (elementName === "display_options") { return "displayOptions"; } return elementName; } }); } }

    You'll need to make sure you also have models for the articles that will contain the rich text with the tweets. You can see example Simple Article models (which were used to build the example here) in Retrieving linked content.

    2. Implement a resolver

    To ensure your tweet is resolved exactly as you'd like it, you should create a specific resolver for Rich text elements.

    • Java
    package com.github.kentico.kontent.delivery; public class TweetInlineContentItemsResolver extends InlineContentItemsResolver<Tweet> { @Override String resolve() { return "<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"" + tweet.theme[0].codename + "\"><a href=\"" + tweet.tweetLink.url + "\"></a></blockquote>" } }
    package com.github.kentico.kontent.delivery; public class TweetInlineContentItemsResolver extends InlineContentItemsResolver<Tweet> { @Override String resolve() { return "<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"" + tweet.theme[0].codename + "\"><a href=\"" + tweet.tweetLink.url + "\"></a></blockquote>" } }
    • JavaScript
    // This is a global resolver for all tweets. You can also define a resolver for a given query: https://github.com/Kentico/kontent-delivery-sdk-js/blob/master/DOCS.md#locally-per-query class Tweet extends ContentItem { constructor() { super({ richTextResolver: (tweet) => { return `<blockquote class="twitter-tweet" data-lang="en" data-theme="`+tweet.theme.value[0].codename+`"><a href="`+tweet.tweet_link.value+`"></a></blockquote>`; } }) } } var typeResolvers = [ new TypeResolver("tweet", (rawData) => new Tweet()) ];
    // This is a global resolver for all tweets. You can also define a resolver for a given query: https://github.com/Kentico/kontent-delivery-sdk-js/blob/master/DOCS.md#locally-per-query class Tweet extends ContentItem { constructor() { super({ richTextResolver: (tweet) => { return `<blockquote class="twitter-tweet" data-lang="en" data-theme="`+tweet.theme.value[0].codename+`"><a href="`+tweet.tweet_link.value+`"></a></blockquote>`; } }) } } var typeResolvers = [ new TypeResolver("tweet", (rawData) => new Tweet()) ];
    • C#
    public class TweetResolver : IInlineContentItemsResolver<Tweet> { public string Resolve(Tweet data) { return $"<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"{data.Theme}\"><a href=\"{data.TweetLink}\"></a></blockquote>"; } }
    public class TweetResolver : IInlineContentItemsResolver<Tweet> { public string Resolve(Tweet data) { return $"<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"{data.Theme}\"><a href=\"{data.TweetLink}\"></a></blockquote>"; } }
    • PHP
    <?php class CustomLinkedItemsResolver implements InlineLinkedItemsResolverInterface { public function resolveInlineLinkedItems($input, $item) { if(empty($item)){ return $input; } switch ($item->system->type) { case "tweet": return "<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"".$item->elements->theme->value[0]->codename."\"><a href=\"".$item->elements->tweet_link->value."\"></a></blockquote>"; } return $input; } }
    <?php class CustomLinkedItemsResolver implements InlineLinkedItemsResolverInterface { public function resolveInlineLinkedItems($input, $item) { if(empty($item)){ return $input; } switch ($item->system->type) { case "tweet": return "<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"".$item->elements->theme->value[0]->codename."\"><a href=\"".$item->elements->tweet_link->value."\"></a></blockquote>"; } return $input; } }
    • Ruby
    require "delivery-sdk-ruby" item_resolver = Kentico::Kontent::Delivery::Resolvers::InlineContentItemResolver.new(lambda do |item| if item.system.type.eql? "tweet" return "<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"#{item.elements.theme.value[0].codename}\">"\ "<a href=\"#{item.elements.tweet_link.value}\"></a>"\ "</blockquote>" end end)
    require "delivery-sdk-ruby" item_resolver = Kentico::Kontent::Delivery::Resolvers::InlineContentItemResolver.new(lambda do |item| if item.system.type.eql? "tweet" return "<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"#{item.elements.theme.value[0].codename}\">"\ "<a href=\"#{item.elements.tweet_link.value}\"></a>"\ "</blockquote>" end end)
    • TypeScript
    // This is a global resolver for all tweets. You can also define a resolver for a given query: https://github.com/Kentico/kontent-delivery-sdk-js/blob/master/DOCS.md#locally-per-query import { ContentItem, Elements } from "@kentico/kontent-delivery"; export class Tweet extends ContentItem { ... constructor() { super({ ... richTextResolver: (item: Tweet, context) => { return `<blockquote class="twitter-tweet" data-lang="en" data-theme="${item.theme.value}"><a href="${item.tweetLink.value}"></a></blockquote>`; } }) } }
    // This is a global resolver for all tweets. You can also define a resolver for a given query: https://github.com/Kentico/kontent-delivery-sdk-js/blob/master/DOCS.md#locally-per-query import { ContentItem, Elements } from "@kentico/kontent-delivery"; export class Tweet extends ContentItem { ... constructor() { super({ ... richTextResolver: (item: Tweet, context) => { return `<blockquote class="twitter-tweet" data-lang="en" data-theme="${item.theme.value}"><a href="${item.tweetLink.value}"></a></blockquote>`; } }) } }

    You can also see the resolvers in our sample React and Vue applications.

    3. Register the resolver

    For technologies like JavaScript, defining a global resolver is enough to get it ready to go. For others, you'll need to register the resolver to ensure its use.

    • Java
    DeliveryClient client = new DeliveryClient("e6d2946e-0e24-003f-a397-9d2d458c6d6e"); client.registerInlineContentItemsResolver(new TweetInlineContentItemsResolver());
    DeliveryClient client = new DeliveryClient("e6d2946e-0e24-003f-a397-9d2d458c6d6e"); client.registerInlineContentItemsResolver(new TweetInlineContentItemsResolver());
    • C#
    // You can also register it in IServiceCollection or another framework for dependency injection: https://github.com/Kentico/delivery-sdk-net/wiki/String-based-rendering-of-items-in-Rich-text#registering-a-resolver using Kentico.Kontent.Delivery; using Kentico.Kontent.Delivery.InlineContentItems; ... IDeliveryClient client = DeliveryClientBuilder .WithProjectId("e6d2946e-0e24-003f-a397-9d2d458c6d6e") // Registers an inline content item resolver for Tweets .WithInlineContentItemsResolver(new TweetResolver()) // Registers strongly typed models .WithTypeProvider(new CustomTypeProvider()) .Build();
    // You can also register it in IServiceCollection or another framework for dependency injection: https://github.com/Kentico/delivery-sdk-net/wiki/String-based-rendering-of-items-in-Rich-text#registering-a-resolver using Kentico.Kontent.Delivery; using Kentico.Kontent.Delivery.InlineContentItems; ... IDeliveryClient client = DeliveryClientBuilder .WithProjectId("e6d2946e-0e24-003f-a397-9d2d458c6d6e") // Registers an inline content item resolver for Tweets .WithInlineContentItemsResolver(new TweetResolver()) // Registers strongly typed models .WithTypeProvider(new CustomTypeProvider()) .Build();
    • PHP
    <?php $client = new DeliveryClient("e6d2946e-0e24-003f-a397-9d2d458c6d6e"); $client->inlineLinkedItemsResolver= new CustomLinkedItemsResolver();
    <?php $client = new DeliveryClient("e6d2946e-0e24-003f-a397-9d2d458c6d6e"); $client->inlineLinkedItemsResolver= new CustomLinkedItemsResolver();
    • Ruby
    require "delivery-sdk-ruby" delivery_client = Kentico::Kontent::Delivery::DeliveryClient.new project_id: "e6d2946e-0e24-003f-a397-9d2d458c6d6e", inline_content_item_resolver: item_resolver
    require "delivery-sdk-ruby" delivery_client = Kentico::Kontent::Delivery::DeliveryClient.new project_id: "e6d2946e-0e24-003f-a397-9d2d458c6d6e", inline_content_item_resolver: item_resolver

    4. Retrieve the article

    Now that your app knows how to resolve strings that contain tweets in them, it's enough to simply retrieve an article and the tweet will be included inside the body.

    • Java
    SimpleArticleItem item = client.getItem("coffee_beverages_explained", SimpleArticleItem.class); String description = item.body;
    SimpleArticleItem item = client.getItem("coffee_beverages_explained", SimpleArticleItem.class); String description = item.body;
    • JavaScript
    var deliveryClient = new DeliveryClient({ projectId: "e6d2946e-0e24-003f-a397-9d2d458c6d6e", typeResolvers: typeResolvers }); deliveryClient.item("coffee_beverages_explained") .toObservable() .subscribe(response => { console.log(response); document.getElementById("mainContent").innerHTML = response.item.body.resolveHtml(); });
    var deliveryClient = new DeliveryClient({ projectId: "e6d2946e-0e24-003f-a397-9d2d458c6d6e", typeResolvers: typeResolvers }); deliveryClient.item("coffee_beverages_explained") .toObservable() .subscribe(response => { console.log(response); document.getElementById("mainContent").innerHTML = response.item.body.resolveHtml(); });
    • C#
    DeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("coffee_beverages_explained"); SimpleArticle simpleArticle = response.Item; string simpleArticleBody = simpleArticle.Body;
    DeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("coffee_beverages_explained"); SimpleArticle simpleArticle = response.Item; string simpleArticleBody = simpleArticle.Body;
    • PHP
    <?php // Retrieves the "Coffee Beverages Explained" article $item = $client->getItem("coffee_beverages_explained"); // Retrieves text from the "body" Rich text element $description = $item->body;
    <?php // Retrieves the "Coffee Beverages Explained" article $item = $client->getItem("coffee_beverages_explained"); // Retrieves text from the "body" Rich text element $description = $item->body;
    • Ruby
    require "delivery-sdk-ruby" delivery_client.item("coffee_beverages_explained").execute do |response| item = response.item text = item.get_string("body") puts text end
    require "delivery-sdk-ruby" delivery_client.item("coffee_beverages_explained").execute do |response| item = response.item text = item.get_string("body") puts text end
    • TypeScript
    import { ContentItem, Elements, TypeResolver } from "@kentico/kontent-delivery"; deliveryClient.item<Article>("coffee_beverages_explained") .toObservable() .subscribe(response => { console.log(response.item.body.resolveHtml()); });
    import { ContentItem, Elements, TypeResolver } from "@kentico/kontent-delivery"; deliveryClient.item<Article>("coffee_beverages_explained") .toObservable() .subscribe(response => { console.log(response.item.body.resolveHtml()); });

    For the final HTML, you could also work with embedded tweets, such as by calling the Twitter API.

    Adding blockquotes

    This example will go through how to add blockquotes to articles within MVC apps.

    You can read about how to use a structured data model for .Net MVC projects to give you an idea how you can work with display templates (a similar approach could be used with an engine such as Thymeleaf with the Java Delivery SDK, as you can see in a video about building web services with the Java Delivery SDK and Spring Boot on our blog).

    Modeling and creating blockquotes in Kentico Kontent

    First, it's necessary to model your content in Kentico Kontent. You'll need a Blockquote content type and then to add a blockquote to a Simple Article. The process is similar to the example of inserting tweets into blog posts.

    For the Blockquote content type, it's enough if it has two fields – one for the quoted text and one for quote's source. You can use a Rich text element for the quote itself in case you want to include links or styling and a Text element for the source. When you're done, it might look like the image below.

    A Blockquote content type all set up.

    How your Blockquote type might look.

    You can then add a blockquote to a Simple Article as a component. It might then look like the image below.

    A blockquote as a component in an article.

    How an article might look with a blockquote in it as a component.

    If you made a simple API call to retrieve this article, the response would look something like this (shortened for clarity):

    • JSON
    { "item": { "system": { "id": "f9b0fd1c-1b83-491a-9d64-2737faedf80d", "name": "Bourbon Coffee", "codename": "bourbon_coffee", "language": "en-US", "type": "simple_article", "sitemap_locations": [], "last_modified": "2019-01-11T11:46:18.2473895Z" }, "elements": { "title": { "type": "text", "name": "Title", "value": "Bourbon Coffee" }, "author": { ... }, "body": { "type": "rich_text", "name": "Body", "images": {}, "links": {}, "modular_content": [ "n44bfddb7_b088_01ef_e782_423deb064718" ], "value": "<p>Arabica Bourbon is among the best coffee varieties you can find in Brazil, Salvador, and Rwanda. This widely known and popular coffee is cultivated in three color varieties: red, orange, and yellow. But what does it have in common with the American whiskey?&nbsp;</p>\n<p>The name comes from where this wonderful variety was first produced: &nbsp;a small island in the Indian Ocean called Réunion, formerly known as Île Bourbon. The earliest records mentioning coffee from this lovely volcanic island come from merchants from the East Indian Company in the beginning of the 18th century. The first exports started in 1718, usually to Mocha in Yemen and then on to Europe.&nbsp;</p>\n<p>The coffee, first called Café du Roy, then Café Leroy, was served to kings at the French court and was the brand of choice of the classic author, Honoré de Balzac, who enjoyed forty cups a day. Or so they say…</p>\n<object type=\"application/kenticocloud\" data-type=\"item\" data-rel=\"component\" data-codename=\"n44bfddb7_b088_01ef_e782_423deb064718\"></object>\n<p><br></p>" } } }, "modular_content": { ... "n44bfddb7_b088_01ef_e782_423deb064718": { "system": { "id": "44bfddb7-b088-01ef-e782-423deb064718", "name": "44bfddb7-b088-01ef-e782-423deb064718", "codename": "n44bfddb7_b088_01ef_e782_423deb064718", "language": "en-US", "type": "blockquote", "sitemap_locations": [], "last_modified": "2019-01-11T11:46:18.2473895Z" }, "elements": { "quote": { "type": "rich_text", "name": "Quote", "images": {}, "links": {}, "modular_content": [], "value": "<p>If I couldn"t, three times a day,</p>\n<p>be allowed to drink my little cup of coffee,</p>\n<p>in my anguish I will turn into</p>\n<p>a shriveled-up roast goat.&nbsp;</p>" }, "source": { "type": "text", "name": "Source", "value": "Coffee Cantata by J. S. Bach" } } } } }
    { "item": { "system": { "id": "f9b0fd1c-1b83-491a-9d64-2737faedf80d", "name": "Bourbon Coffee", "codename": "bourbon_coffee", "language": "en-US", "type": "simple_article", "sitemap_locations": [], "last_modified": "2019-01-11T11:46:18.2473895Z" }, "elements": { "title": { "type": "text", "name": "Title", "value": "Bourbon Coffee" }, "author": { ... }, "body": { "type": "rich_text", "name": "Body", "images": {}, "links": {}, "modular_content": [ "n44bfddb7_b088_01ef_e782_423deb064718" ], "value": "<p>Arabica Bourbon is among the best coffee varieties you can find in Brazil, Salvador, and Rwanda. This widely known and popular coffee is cultivated in three color varieties: red, orange, and yellow. But what does it have in common with the American whiskey?&nbsp;</p>\n<p>The name comes from where this wonderful variety was first produced: &nbsp;a small island in the Indian Ocean called Réunion, formerly known as Île Bourbon. The earliest records mentioning coffee from this lovely volcanic island come from merchants from the East Indian Company in the beginning of the 18th century. The first exports started in 1718, usually to Mocha in Yemen and then on to Europe.&nbsp;</p>\n<p>The coffee, first called Café du Roy, then Café Leroy, was served to kings at the French court and was the brand of choice of the classic author, Honoré de Balzac, who enjoyed forty cups a day. Or so they say…</p>\n<object type=\"application/kenticocloud\" data-type=\"item\" data-rel=\"component\" data-codename=\"n44bfddb7_b088_01ef_e782_423deb064718\"></object>\n<p><br></p>" } } }, "modular_content": { ... "n44bfddb7_b088_01ef_e782_423deb064718": { "system": { "id": "44bfddb7-b088-01ef-e782-423deb064718", "name": "44bfddb7-b088-01ef-e782-423deb064718", "codename": "n44bfddb7_b088_01ef_e782_423deb064718", "language": "en-US", "type": "blockquote", "sitemap_locations": [], "last_modified": "2019-01-11T11:46:18.2473895Z" }, "elements": { "quote": { "type": "rich_text", "name": "Quote", "images": {}, "links": {}, "modular_content": [], "value": "<p>If I couldn"t, three times a day,</p>\n<p>be allowed to drink my little cup of coffee,</p>\n<p>in my anguish I will turn into</p>\n<p>a shriveled-up roast goat.&nbsp;</p>" }, "source": { "type": "text", "name": "Source", "value": "Coffee Cantata by J. S. Bach" } } } } }

    You have both your main text and your blockquote to add. Now it's merely a matter of telling your app how to handle the structure you've added.

    Modeling blockquotes in your app

    If you're using strongly typed models, you should remember to add your Blockquote model.

    • Java
    // Generate strongly typed models at https://github.com/Kentico/cloud-generators-java import com.github.kentico.kontent.delivery.ContentItemMapping; import com.github.kentico.kontent.delivery.ElementMapping; import com.github.kentico.kontent.delivery.Option; import com.github.kentico.kontent.delivery.System; import java.lang.String; import java.util.List; @ContentItemMapping("blockquote") public class Homepage { @ElementMapping("quote") String quote; @ElementMapping("source") String source; System system; public String getQuote() { return quote; } public void setQuote(String quote) { this.quote = quote; } public String getSource() { return source; } public void setSource(String source) { this.source = source; } public System getSystem() { return system; } public void setSystem(System system) { this.system = system; } }
    // Generate strongly typed models at https://github.com/Kentico/cloud-generators-java import com.github.kentico.kontent.delivery.ContentItemMapping; import com.github.kentico.kontent.delivery.ElementMapping; import com.github.kentico.kontent.delivery.Option; import com.github.kentico.kontent.delivery.System; import java.lang.String; import java.util.List; @ContentItemMapping("blockquote") public class Homepage { @ElementMapping("quote") String quote; @ElementMapping("source") String source; System system; public String getQuote() { return quote; } public void setQuote(String quote) { this.quote = quote; } public String getSource() { return source; } public void setSource(String source) { this.source = source; } public System getSystem() { return system; } public void setSystem(System system) { this.system = system; } }
    • C#
    // Generate strongly typed models at https://github.com/Kentico/kontent-generators-net using System; using System.Collections.Generic; using Kentico.Kontent.Delivery; namespace KenticoKontentModels { public partial class Blockquote { public const string Codename = "blockquote"; public const string QuoteCodename = "quote"; public const string SourceCodename = "source"; public IRichTextContent Quote { get; set; } public string Source { get; set; } public ContentItemSystemAttributes System { get; set; } } }
    // Generate strongly typed models at https://github.com/Kentico/kontent-generators-net using System; using System.Collections.Generic; using Kentico.Kontent.Delivery; namespace KenticoKontentModels { public partial class Blockquote { public const string Codename = "blockquote"; public const string QuoteCodename = "quote"; public const string SourceCodename = "source"; public IRichTextContent Quote { get; set; } public string Source { get; set; } public ContentItemSystemAttributes System { get; set; } } }

    You can see example Simple Article models in Retrieving linked content. For .Net models, you need to make one change – you need to type the Body property as IRichTextContent (not string).

    Controlling how blockquotes will look

    This will depend on the technology you are using. See some examples below. The actual appearance of the blockquote can be defined separately, such as through CSS for a website.

    • HTML
    <!-- This makes use of Spring Book and the Thymeleaf templating engine. See more at: https://kontent.ai/blog/building-java-webservices-with-kentico-cloud-java-delivery-sdk --> <!-- Place this in a file at a path similar to: resources/kentico/templates/blockquote.html --> <blockquote><div th:text="{model.quote}"</div> &ndash; <cite><div th:text="{model.source}"</div></cite></blockquote>
    <!-- This makes use of Spring Book and the Thymeleaf templating engine. See more at: https://kontent.ai/blog/building-java-webservices-with-kentico-cloud-java-delivery-sdk --> <!-- Place this in a file at a path similar to: resources/kentico/templates/blockquote.html --> <blockquote><div th:text="{model.quote}"</div> &ndash; <cite><div th:text="{model.source}"</div></cite></blockquote>
    • HTML
    <!-- Place this in a file at a path similar to: Views/Articles/DisplayTemplates/Blockquote.cshtml --> @model DancingGoat.Models.Blockquote @{ <blockquote>@(Model.Quote) &ndash; <cite>@(Model.Source)</cite></blockquote> }
    <!-- Place this in a file at a path similar to: Views/Articles/DisplayTemplates/Blockquote.cshtml --> @model DancingGoat.Models.Blockquote @{ <blockquote>@(Model.Quote) &ndash; <cite>@(Model.Source)</cite></blockquote> }

    What's next?