5

I'm trying to include an <picture> HTML tag in a RTF Text Field, but it shows me an error like this: enter image description here

The code is something like this:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

And the XSLT Filter is with the default code:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output omit-xml-declaration="yes" method="xml" cdata-section-elements="script"></xsl:output>
    <xsl:template match="/ | node() | @*">
        <xsl:copy>
            <xsl:apply-templates select="node() | @*"></xsl:apply-templates>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="*[      (self::br or self::p or self::div)     and      normalize-space(translate(., &apos; &apos;, &apos;&apos;)) = &apos;&apos;     and      not(@*)     and      not(processing-instruction())     and      not(comment())     and      not(*[not(self::br) or @* or * or node()])     and      not(following::node()[not(         (self::text() or self::br or self::p or self::div)        and         normalize-space(translate(., &apos; &apos;, &apos;&apos;)) = &apos;&apos;        and         not(@*)        and         not(processing-instruction())        and         not(comment())        and         not(*[not(self::br) or @* or * or node()])       )])     ]">
        <!-- ignore all paragraphs and line-breaks at the end that have nothing but (non-breaking) spaces and line breaks -->
    </xsl:template>
    <xsl:template match="br[parent::div and not(preceding-sibling::node()) and not(following-sibling::node())]">
        <!-- Chrome generates <div><br/></div>. Renders differently in different browsers. Replace it with a non-breaking space -->
        <xsl:text> </xsl:text>
    </xsl:template>
</xsl:stylesheet>

How could I include this tag? Thanks in advance.

  • 1
    This may help: tridion.stackexchange.com/a/12888/71 – Jonathan Williams Jan 10 '18 at 11:55
  • <picture> wouldn't be an element that I'd recommend for an RTF field as it requires multiple resources. Usually I recommend using a component link field. Could you explain the use case for this? – paceaux Jan 11 '18 at 4:51
11

By default SDL Tridion 2013 SP1 is not setup to be fully HTML 5 compliant (this is also still the case for Web 8 for that matter). You can extend the RTF field to allow HTML 5 tags, and this can be specified in the file TcmXhtml.Config at the path [Tridion]\web\WebUI\Core\Controls\FormatArea\TcmXhtml\

Depending on how you exactly want it to behave you can enter the <picture> and <source> elements as a new-blocklevel-tag or a new-inline-tag, you will find something like the following there already configured:

new-blocklevel-tags: article aside canvas details figcaption figure footer header hgroup nav output progress section video
new-inline-tags: audio datalist mark meter summary time

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.