Set rendered html for images and docs in the editor

One of the benifits of a WYSIWYG editor like in sitefinity is that it allows you to add custom content directly inline with the text, such as this blog post.

However the limitation of Sitefinity (right now) is that it just converts a document to a link, or an image to the image, you have no control over the markup generated.

Example:

Lets say you drop a DocumentLink widget on a page and pick a document, it’ll be styled all fancy with an extension\type icon and some meta data.  However if you add it to the WYSIWYG editor it’s just a dumb link, this creates a disconnect and frustration for content editors.

It leaves you zero control over your markup, like what if you want all images to have the bootstrap “img-responsive” class, can’t do it unless you wire up some javascript.

What’s the fix, is there anything we can do?

As of now, on Razor, YES!  I’ve created an extension you can use which will let you define cshtml views that will render the content exactly as you want.  Even better you can define different cshtml views wherever and whenever you want depending on the content.

It’s as simple as adding a Nuget Package to your project.

Do you have a practical use-case?

Sure!

• What, if you want all your images to have title=“Description”
• What if you want every image to show the Authors name under the image
• Maybe you have a custom field on the image and you need to show that data in a card.
• …Or maybe you just want all your content to render the same regardless of where it’s added

Checkout the WIKI over here: Link