8

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.

  • 2
    Style tag is not allowed inside body tag (XHTML spec) – Nuno Linhares Sep 9 '13 at 18:34
9

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

| improve this answer | |
  • 2
    +1 I really like this solution given it also allows you to use show where used and track the fact that these multimedia items are associated with this output - reducing further the risk of broken images. – Dylan .. Mark Saunders Sep 11 '13 at 14:13
4

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. :-)

| improve this answer | |
  • The key requirement is to be able to use internally hosted images as an inline style and be able content port. – Nickoli Roussakov Sep 9 '13 at 21:28
  • 1
    How about an optional GUI extension with Content Injection" (embedded component presentations)? Insert the image as a regular component link (maybe with the help of a GUI extension) to let Content Porter resolve the link. But then have a CT and/or TBB that changes this to the output you want. – Alvin Reyes Sep 11 '13 at 2:38
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?

| improve this answer | |
  • Hi Dominic, thus far I have tried to plant <img src=""/> tags and the link is successfully resolved but when I am trying to use inline CSS such as described above (background images) in the first snippet, the link is not resolved. – Josh Hebb Sep 10 '13 at 13:04
  • 1
    See a CSS image resolving TBB example from Eric Huiza by way of YATB, though I'm not sure this will work well with Content Porter. – Alvin Reyes Sep 11 '13 at 2:34
  • That looks like it should also cope with webdav urls, so assuming the content is created like that, it should be OK. (but I've never understood why people choose regexes to find attributes in an XML document) – Dominic Cronin Sep 11 '13 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.