Embedding Images (CSS) in HTML via RTF

Question

The client has requested that would like to be able to use a RTF to embed HTML into a page. The problem that I am encountering is that (due to the clients requirements), the HTML consists of several 'sections' with background images. They would like the options of being able to host images outside Tridion (no problems) and inside Tridion. If using inline CSS the background url is not resolved, understandably.

<div id="sectOne" style="background: url(tcm:44-12023);"></div>

The clients also suggested they would like to be able to embed an internal style sheet, which would solve my problem as we could declare the image paths inside the sheet which should be resolved. However, the RTF seems to be stripping out the style tags as I expect the tag is not recognized or because the sheet is not in the header (and is declaring it invalid).

<style>
 #sectOne {background: url(tcm:44-12023);}
</style>

Just wondering if anyone has any suggestions on how to get the RTF validator to not strip out the internal style sheet? I need to find a solution that is compliant with Content Porter.I'd love to hear any suggestions or recommendations on how to fix the problem. Thanks guys.

Answer 1

One approach i've used in the past is having two fields:

• the first field is a large text field (non rtf) where the users can past in html
• A second field allows repeating multimedia items of any type.

if you wish to embed the path of one of the multimedia items in the content you simple reference the multimedia item by it's name, for example:

• <div style="background: url("MyComponent");
• <img src="MyComponent" />

The code could sniff out all href, src, url(), tags etc and then check if the name exists as a component in the item list.

It would then simply do an addbinary on the item to return the path when publishing / previewing.

If your techies are happy you could introduce/agree on a snytax to reference file names e.g [File:MyComponent] - in the event you've more complicated items then src, href etc.

I hope this helps

Answer 2

I'd argue the best place for referencing a style sheet is at the page level (or its template), regardless of CMS approach. Consider approaching the "embed an internal style sheet" requirement with page metadata or as an external link for components. I describe other RTF approaches in this post.

If the HTML is maintained elsewhere and is simply copy/pasted into components, consider a text box instead of RTF. I wouldn't say it's ideal, but it'll save headaches as you work through three or four layers when forcing RTF to act like HTML:

1. Allowed nodes
2. Per-field XSLT filter
3. Stored XML and any differences in APIs accessing it
4. Template logic

This being said, if this really needs to be in the RTF, look at TcmXhtml.Config for adjusting the allowed nodes as well as the RTF's XSLT filter.

The rich text format area is not an HTML editor, there will be pain when forcing it to act like one and again when changing styles, system, and/or approach. :-)

Answer 3

One possible cause of the style tags getting removed is that this is done by the XSLT of the RTF. That at least should be easy enough to check, although as Nuno has noted, perhaps you need to be publishing the style elements elsewhere in the page (an interesting templating design in any case).

In any case, I think you should be addressing the problem with your background urls not being resolved. The standard mechanism for converting a tcm uri into a link to an image is to use Tridion dynamic linking, which if used correctly will give a link relative to the page you are on, which is what you'd want. It should be straightforward enough to XPath to your inline style elements and output a component link. Have you tried this? What did you try, and what were the problems you encountered?