How to use SXA Content Tokens in a JSS solution

Intro In a regular MVC SXA solution we usually use Content Tokens for static content that has to be shown in multiple places, for instance, a copyright text. So let's start creating the token we're going to use. In the Data folder on your site, create a Content Token folder and a Content Token inside of it. P.S. I'm using Sitecore 10.3, SXA and JSS (React) Content Token Folder Path: your-site-path/Data/Content Tokens Template:  /sitecore/templates/Feature/Experience Accelerator/Content Tokens/Content Token Folder -  {29252703-D448-451C-BF1E-65B16174F4B0} Content Token Path: /your-site-path/Data/Content Tokens/Copyright Template:  /sitecore/templates/Feature/Experience Accelerator/Content Tokens/Content Token -  {7D659EE9-D487-4D40-8A92-10C6D68844C8} Once the token is created we can use it in single-line or multi-line text fields like that:  $(Copyright) . And in RTE fields the Insert Variable button shows up the Content Token modal, then you can select one of the existing t

RenderField pipeline - GetImageFieldValue processor returns empty when image comes from Content Hub

Intro If you are trying to customize the way how Sitecore renders an image field globally in your solution, the most common approach to do that is by creating a pipeline processor for Sitecore.Pipelines.RenderField pipeline and configure it to be invoked right after or instead of GetImageFieldValue processor. A really good example for that is when you need to add a loading=”lazy” attribute to all of your images, because doing that in all Field helper call, like shown below, can be quite challenging if you have many places to update, and you probably have. @Html.Sitecore().Field( "Thumbnail Image" , Model.Item, new { loading = "lazy" }) P.S My intention here is not teaching you how to implement a lazy loading mechanism, but I’ll use this as an example since it’s a very common use case. If you need some idea of how to do it just read this article That said, the best option we have is implementing