Skip navigation

Retrieve structured content 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 buildersOpens in a new window.

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

Then, you'll learn how to resolve links to content items inserted into rich text elements.

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: 

    1. Defining resolvers for content types that might appear in the rich text.
    2. 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.

    You can choose whether your models will be structured data or strings using the --structuredmodel parameter of the model generatorOpens in a new window.

    Choosing to use a structured model can help ensure you don't need to know what type 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 you how to resolve tweets embedded within the body of articles. Once you have tweets in your content, follow the steps below to resolve them.

    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/kontent-generators-java // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/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/kontent-generators-java // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/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.Abstractions; 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.Abstractions; 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
    // Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript 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; } }); } }
    // Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript 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
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/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>" } }
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/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>" } }
    • JavaScript
    // This is a global resolver for all tweets. You can also define a resolver for a given query: https://docs.kontent.ai/js-resolve-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://docs.kontent.ai/js-resolve-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
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/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; } }
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/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
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/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)
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/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)
    • TypeScript
    // This is a global resolver for all tweets. You can also define a resolver for a given query: https://docs.kontent.ai/js-resolve-query import { ContentItem } 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://docs.kontent.ai/js-resolve-query import { ContentItem } 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 ReactOpens in a new window and VueOpens in a new window applications.

    3. Register the resolver

    For technologies like JavaScript, defining a global resolver is enough to get it ready to go.

    You'll need to register the resolver to ensure its use.

    • Java
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java DeliveryClient client = new DeliveryClient("<YOUR_PROJECT_ID>"); client.registerInlineContentItemsResolver(new TweetInlineContentItemsResolver());
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java DeliveryClient client = new DeliveryClient("<YOUR_PROJECT_ID>"); 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("<YOUR_PROJECT_ID>") // 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("<YOUR_PROJECT_ID>") // Registers an inline content item resolver for Tweets .WithInlineContentItemsResolver(new TweetResolver()) // Registers strongly typed models .WithTypeProvider(new CustomTypeProvider()) .Build();
    • PHP
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php $client = new DeliveryClient("<YOUR_PROJECT_ID>"); $client->inlineLinkedItemsResolver= new CustomLinkedItemsResolver();
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php $client = new DeliveryClient("<YOUR_PROJECT_ID>"); $client->inlineLinkedItemsResolver= new CustomLinkedItemsResolver();
    • Ruby
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client = Kentico::Kontent::Delivery::DeliveryClient.new project_id: '<YOUR_PROJECT_ID>', inline_content_item_resolver: item_resolver
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client = Kentico::Kontent::Delivery::DeliveryClient.new project_id: '<YOUR_PROJECT_ID>', 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
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java SimpleArticleItem item = client.getItem("my_article", SimpleArticleItem.class); String description = item.body;
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java SimpleArticleItem item = client.getItem("my_article", SimpleArticleItem.class); String description = item.body;
    • JavaScript
    var deliveryClient = new DeliveryClient({ projectId: '<YOUR_PROJECT_ID>', typeResolvers: typeResolvers }); deliveryClient.item('my_article') .toObservable() .subscribe(response => { console.log(response); document.getElementById('mainContent').innerHTML = response.item.body.resolveHtml(); });
    var deliveryClient = new DeliveryClient({ projectId: '<YOUR_PROJECT_ID>', typeResolvers: typeResolvers }); deliveryClient.item('my_article') .toObservable() .subscribe(response => { console.log(response); document.getElementById('mainContent').innerHTML = response.item.body.resolveHtml(); });
    • C#
    DeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("my_article"); SimpleArticle simpleArticle = response.Item; string simpleArticleBody = simpleArticle.Body;
    DeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("my_article"); SimpleArticle simpleArticle = response.Item; string simpleArticleBody = simpleArticle.Body;
    • PHP
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php // Retrieves a content item named 'My article' $item = $client->getItem('my_article'); // Retrieves text from the 'body' Rich text element $description = $item->body;
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php // Retrieves a content item named 'My article' $item = $client->getItem('my_article'); // Retrieves text from the 'body' Rich text element $description = $item->body;
    • Ruby
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client.item('my_article').execute do |response| item = response.item text = item.get_string('body') puts text end
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client.item('my_article').execute do |response| item = response.item text = item.get_string('body') puts text end
    • TypeScript
    // Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript import { ContentItem, Elements, TypeResolver } from '@kentico/kontent-delivery'; deliveryClient.item<Article>('my_article') .toObservable() .subscribe(response => { console.log(response.item.body.resolveHtml()); });
    // Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript import { ContentItem, Elements, TypeResolver } from '@kentico/kontent-delivery'; deliveryClient.item<Article>('my_article') .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 APIOpens in a new window.

    This example will show you how to resolve links to content items used within the body of articles. Without adjusting your application, any link in a rich text element that points to a content item will contain an empty value. To make sure such links resolve correctly, follow the steps below.

    1. Define a model

    If you're using strongly typed models, add a model for each type of content item you want to link within rich text.

    2. Implement a resolver

    To ensure your links are resolved correctly, you need to implement a resolver with two methods:

    • The first method will return the URL of an available item.
    • The second method will return a 404 Not found error when the linked item is not available.

    A content item is unavailable when deleted or, in case of live environments, unpublished.

    When resolving links in RichTextElement, you resolve all of them with a single link resolver. For this reason, we recommend you specify the type of the content type you want to resolve. You can access the original link text using the context parameter.

    • Java
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java package com.github.kentico.kontent.delivery; public class CustomContentLinkUrlResolver implements ContentLinkUrlResolver { @Override String resolveLinkUrl(Link link) { // Resolves URLs to content items based on the Article content type if ("my_article".equals(link.getCodename())) { return String.format("/articles/%s", link.getUrlSlug()); } } } public class CustomBrokenContentLinkUrlResolver implements BrokenLinkUrlResolver { @Override String resolveBrokenLinkUrl() { // Resolves URLs to unavailable content items return "/404"; } }
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java package com.github.kentico.kontent.delivery; public class CustomContentLinkUrlResolver implements ContentLinkUrlResolver { @Override String resolveLinkUrl(Link link) { // Resolves URLs to content items based on the Article content type if ("my_article".equals(link.getCodename())) { return String.format("/articles/%s", link.getUrlSlug()); } } } public class CustomBrokenContentLinkUrlResolver implements BrokenLinkUrlResolver { @Override String resolveBrokenLinkUrl() { // Resolves URLs to unavailable content items return "/404"; } }
    • JavaScript
    // This is a global resolver for all links to articles. You can also define a resolver for a given query: https://docs.kontent.ai/js-resolve-query class Article extends ContentItem { constructor() { super({ urlSlugResolver: (link, context) => { return { url: `/articles/${url_slug}` }; } }) } }
    // This is a global resolver for all links to articles. You can also define a resolver for a given query: https://docs.kontent.ai/js-resolve-query class Article extends ContentItem { constructor() { super({ urlSlugResolver: (link, context) => { return { url: `/articles/${url_slug}` }; } }) } }
    • C#
    public class CustomContentLinkUrlResolver : IContentLinkUrlResolver { public string ResolveLinkUrl(ContentLink link) { // Resolves URLs to content items based on the Article content type if (link.ContentTypeCodename == "article") { return $"/articles/{link.UrlSlug}"; } // TODO: Add the rest of the resolver logic } public string ResolveBrokenLinkUrl() { // Resolves URLs to unavailable content items return "/404"; } }
    public class CustomContentLinkUrlResolver : IContentLinkUrlResolver { public string ResolveLinkUrl(ContentLink link) { // Resolves URLs to content items based on the Article content type if (link.ContentTypeCodename == "article") { return $"/articles/{link.UrlSlug}"; } // TODO: Add the rest of the resolver logic } public string ResolveBrokenLinkUrl() { // Resolves URLs to unavailable content items return "/404"; } }
    • PHP
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php class CustomContentLinkUrlResolver implements ContentLinkUrlResolverInterface { public function resolveLinkUrl($link) { // Resolves URLs to content items based on the Article content type if ($link->contentTypeCodeName == "my_article") { return "/articles/". $link->urlSlug; } // TODO: Add the rest of the resolver logic } public function resolveBrokenLinkUrl() { // Resolves URLs to unavailable content items return "/404"; } }
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php class CustomContentLinkUrlResolver implements ContentLinkUrlResolverInterface { public function resolveLinkUrl($link) { // Resolves URLs to content items based on the Article content type if ($link->contentTypeCodeName == "my_article") { return "/articles/". $link->urlSlug; } // TODO: Add the rest of the resolver logic } public function resolveBrokenLinkUrl() { // Resolves URLs to unavailable content items return "/404"; } }
    • Ruby
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' link_resolver = Kentico::Kontent::Delivery::Resolvers::ContentLinkResolver.new(lambda do |link| # Link is available return "/articles/#{link.url_slug}" if link.type.eql? 'article' end, lambda do |id| # Link is broken return "/notfound?id=#{id}" end)
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' link_resolver = Kentico::Kontent::Delivery::Resolvers::ContentLinkResolver.new(lambda do |link| # Link is available return "/articles/#{link.url_slug}" if link.type.eql? 'article' end, lambda do |id| # Link is broken return "/notfound?id=#{id}" end)
    • TypeScript
    // This is a global resolver for all links to articles. You can also define a resolver for a given query: https://docs.kontent.ai/js-resolve-query import { ContentItem, Elements } from '@kentico/kontent-delivery'; export class Article extends ContentItem { constructor() { super({ urlSlugResolver: (link, context) => { return { url: `/articles/${url_slug}` }; } }) } }
    // This is a global resolver for all links to articles. You can also define a resolver for a given query: https://docs.kontent.ai/js-resolve-query import { ContentItem, Elements } from '@kentico/kontent-delivery'; export class Article extends ContentItem { constructor() { super({ urlSlugResolver: (link, context) => { return { url: `/articles/${url_slug}` }; } }) } }

    When building the resolver logic, you can use the link parameter to get more information about the linked content items.

    3. Register the resolver

    For technologies like JavaScript, defining a global resolver is enough to get it ready to go.

    You'll need to register the resolver to ensure its use.

    • Java
    // You can also register lambdas with the DeliveryClient as the resolvers are functional interfaces: https://docs.kontent.ai/java-register-resolver // Sets the resolver as an optional dependency of the DeliveryClient DeliveryClient client = new DeliveryClient("<YOUR_PROJECT_ID>"); client.setContentLinkUrlResolver(new CustomContentLinkUrlResolver()); client.setBrokenLinkUrlResolver(new CustomBrokenContentLinkUrlResolver());
    // You can also register lambdas with the DeliveryClient as the resolvers are functional interfaces: https://docs.kontent.ai/java-register-resolver // Sets the resolver as an optional dependency of the DeliveryClient DeliveryClient client = new DeliveryClient("<YOUR_PROJECT_ID>"); client.setContentLinkUrlResolver(new CustomContentLinkUrlResolver()); client.setBrokenLinkUrlResolver(new CustomBrokenContentLinkUrlResolver());
    • C#
    // You can also register it in IServiceCollection or another framework for dependency injection: https://docs.kontent.ai/net-register-resolver using Kentico.Kontent.Delivery; // Sets the resolver as an optional dependency of the `IDeliveryClient` instance IDeliveryClient client = DeliveryClientBuilder .WithProjectId("<YOUR_PROJECT_ID>") .WithContentLinkUrlResolver(new CustomContentLinkUrlResolver()) .Build();
    // You can also register it in IServiceCollection or another framework for dependency injection: https://docs.kontent.ai/net-register-resolver using Kentico.Kontent.Delivery; // Sets the resolver as an optional dependency of the `IDeliveryClient` instance IDeliveryClient client = DeliveryClientBuilder .WithProjectId("<YOUR_PROJECT_ID>") .WithContentLinkUrlResolver(new CustomContentLinkUrlResolver()) .Build();
    • PHP
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php $client = new DeliveryClient("<YOUR_PROJECT_ID>"); $client->contentLinkUrlResolver = new CustomContentLinkUrlResolver();
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php $client = new DeliveryClient("<YOUR_PROJECT_ID>"); $client->contentLinkUrlResolver = new CustomContentLinkUrlResolver();
    • Ruby
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client = Kentico::Kontent::Delivery::DeliveryClient.new project_id: '<YOUR_PROJECT_ID>', content_link_url_resolver: link_resolver
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client = Kentico::Kontent::Delivery::DeliveryClient.new project_id: '<YOUR_PROJECT_ID>', content_link_url_resolver: link_resolver

    4. Retrieve the article

    Now that your app knows how to resolve links, it's enough to simply retrieve an article and the links will be included inside the body.

    • Java
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java SimpleArticleItem item = client.getItem("my_article", SimpleArticleItem.class); String description = item.body;
    // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/java SimpleArticleItem item = client.getItem("my_article", SimpleArticleItem.class); String description = item.body;
    • JavaScript
    var deliveryClient = new DeliveryClient({ projectId: '<YOUR_PROJECT_ID>', typeResolvers: typeResolvers }); deliveryClient.item('my_article') .toObservable() .subscribe(response => { console.log(response); document.getElementById('mainContent').innerHTML = response.item.body.resolveHtml(); });
    var deliveryClient = new DeliveryClient({ projectId: '<YOUR_PROJECT_ID>', typeResolvers: typeResolvers }); deliveryClient.item('my_article') .toObservable() .subscribe(response => { console.log(response); document.getElementById('mainContent').innerHTML = response.item.body.resolveHtml(); });
    • C#
    DeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("my_article"); SimpleArticle simpleArticle = response.Item; string simpleArticleBody = simpleArticle.Body;
    DeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("my_article"); SimpleArticle simpleArticle = response.Item; string simpleArticleBody = simpleArticle.Body;
    • PHP
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php // Retrieves a content item named 'My article' $item = $client->getItem('my_article'); // Retrieves text from the 'body' Rich text element $description = $item->body;
    // Tip: Find more about PHP SDKs at https://docs.kontent.ai/php // Retrieves a content item named 'My article' $item = $client->getItem('my_article'); // Retrieves text from the 'body' Rich text element $description = $item->body;
    • Ruby
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client.item('my_article').execute do |response| item = response.item text = item.get_string('body') puts text end
    # Tip: Find more about Ruby SDKs at https://docs.kontent.ai/ruby require 'delivery-sdk-ruby' delivery_client.item('my_article').execute do |response| item = response.item text = item.get_string('body') puts text end
    • TypeScript
    // Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript import { ContentItem, Elements, TypeResolver } from '@kentico/kontent-delivery'; deliveryClient.item<Article>('my_article') .toObservable() .subscribe(response => { console.log(response.item.body.resolveHtml()); });
    // Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript import { ContentItem, Elements, TypeResolver } from '@kentico/kontent-delivery'; deliveryClient.item<Article>('my_article') .toObservable() .subscribe(response => { console.log(response.item.body.resolveHtml()); });

    The URL to a content item linked in the rich text element is now correctly resolved.

    • HTML
    <p>The used coffee grounds are retained in the filter, while the <a href="/articles/which-brewing-fits-you" data-item-id="65832c4e-8e9c-445f-a001-b9528d13dac8">brewed coffee</a> is collected in a vessel such as a carafe or pot.</p>
    <p>The used coffee grounds are retained in the filter, while the <a href="/articles/which-brewing-fits-you" data-item-id="65832c4e-8e9c-445f-a001-b9528d13dac8">brewed coffee</a> is collected in a vessel such as a carafe or pot.</p>

    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 projectsOpens in a new window to give you an idea how you can work with display templates (a similar approach could be used with an engine such as ThymeleafOpens in a new window 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 blogOpens in a new window).

    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? </p>\n<p>The name comes from where this wonderful variety was first produced:  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. </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. </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? </p>\n<p>The name comes from where this wonderful variety was first produced:  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. </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. </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/kontent-generators-java // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/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/kontent-generators-java // Tip: Find more about Java/JavaRx SDKs at https://docs.kontent.ai/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.Abstractions; 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.Abstractions; 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> – <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> – <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) – <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) – <cite>@(Model.Source)</cite></blockquote> }

    What's next?

    Check out how to render different output for rich text in ASP.NET MVCOpens in a new window, a blog post by Rob West. Also, see our docs on how to approach rendering structured rich textOpens in a new window and strings in rich textOpens in a new window in .NET apps.

    Check out how to resolve items and components in PHP appsOpens in a new window.