Image href property rendered if image is contained within an anchor tag

Question

In a rich text field in Tridion, I have added the following code:

<a href="https://www.thisisatest.com/" target="_blank"><img alt="Test Alt Text" src="tcm:5-222222" class="footer__logo"/></a>

tcm:5-222222 is the image multimedia component containing the uploaded image.

However, when published out this renders as:

<a href="https://www.thisisatest.com/" target="_blank"><img alt="Test Alt Text" href="/_images/testimage_tcm9-222222.png" src="/_images/testimage_tcm9-222222.png" class="footer__logo" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="Test title"></a>

Why is the href attribute added to the img tag in the rendered version? This makes it invalid markup. Is this is a bug with the Tridion rendering? Is there a good workaround for this problem, other than to keep the image outside of the CMS?

For reference, this is the markup of the 'Summary' field in the schema template:

 <xsd:element name="summary" minOccurs="0" maxOccurs="1" type="tcmi:XHTML">
          <xsd:annotation>
            <xsd:appinfo>
              <tcm:ExtensionXml xmlns:tcm="http://www.tridion.com/ContentManager/5.0"></tcm:ExtensionXml>
              <tcm:Size xmlns:tcm="http://www.tridion.com/ContentManager/5.0">5</tcm:Size>
              <tcm:FilterXSLT xmlns:tcm="http://www.tridion.com/ContentManager/5.0">
                <stylesheet xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
                  <output omit-xml-declaration="yes" method="xml" cdata-section-elements="script"></output>
                  <template name="FormattingFeatures">
                    <FormattingFeatures xmlns="http://www.tridion.com/ContentManager/5.2/FormatArea" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
                      <Doctype>Transitional</Doctype>
                      <AccessibilityLevel>2</AccessibilityLevel>
                      <DisallowedActions></DisallowedActions>
                      <DisallowedStyles></DisallowedStyles>
                    </FormattingFeatures>
                  </template>
                  <template match="/ | node() | @*">
                    <copy>
                      <apply-templates select="node() | @*"></apply-templates>
                    </copy>
                  </template>
                  <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 -->
                  </template>
                  <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 -->
                    <text> </text>
                  </template>
                </stylesheet>
              </tcm:FilterXSLT>
            </xsd:appinfo>
          </xsd:annotation>
        </xsd:element>

Answer 1

I got to the bottom of this. In my TBB I was replacing the xlink:href property of the output string with an href linking to the component URL.