One of the most common challenges of crafting quality solutions in Sitecore centers around the handling of media elements and other complex structures embedded in rich text. Many of my clients write a lot of highly curated, long form articles and reports with embedded pull quotes, images, galleries, videos, audio clips, data visualizations, and more. In most cases, they rely too heavily on rich text snippets to achieve the desired layouts and presentation which has some inherent drawbacks.
- A rich text snippet is a really just structured blob of HTML jammed into the rich text editor as opposed to being a discreet component that exists as part of the platform. They are really brittle. If a content author is trying modify one and accidentally chops out a class it’s difficult to fix it without starting over. It can be time-consuming.
- It’s not possible to edit them inline in Experience Editor.
- If content authors want to change all instances of this snippet in some way they would have to update it in X number of places
- The snippet contains styling markup so if and when content needs to be migrated the styles may not play nicely with the CSS of the destination site and may need to be manually retooled page-by-page.
There is better way. Working with media in rich text can be less clunky and time-consuming through use of dynamic placeholder-driven embeds. It is possible to use discreet, page-editable rich text embeds for all common components that can be included independently anywhere in the text block.
If your solution has commonly used media components such as Image or Video, there is no need to create a rich text snippet that mimics this functionality. Alternatively, allow these components to be embedded within the rich text block. Instead of placing a token with the GUID of the component, Velir has been working on a method that allows the content author to drop a dynamic placeholder into which you can add components as you would any other placeholder. Below is an example of the a customized RTE ribbon that includes 3 new options – Embed Container Float Left, Embed Container Full Width, and Embed Container Float Right.
The content author places the cursor between two paragraphs of text and then chooses an option in the ribbon. They can choose to float the asset left or right or allow it to span the width of the content well. A dynamic placeholder for embeds is dropped into the text block and components can be added as defined by the container. This means media embeds are discreet entities and can be added and fully managed from Experience Editor.
Once saved, the embedded components will be visible in Experience Editor and Preview. Below is an example of an embedded image component floated left and a video component floated right. Front end styling will determine the allowable width of floated embeds and whether they “bust” out of margins as they do in this example.
Below is an example of an embedded pull quote component floated right and an image component at full width. Text like captions can be fully edited inline.
Disclaimer: We are still tooling with this method and need to work out some kinks around reordering embedded assets once set… but so far so good. If, like us, you’d like to find a cleaner, more structured way to manage rich text embeds then I recommend giving this a try.