Include <picture> element in RTF Text Field

Question

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

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.

Answer 1

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