I'm belatedly getting round to using WebP images using the <picture> tag. What I'm finding is that Backdrop is adding a stray </source> end tag, which then throws an error when being validated.

I'm marking content up by hand, not using CKEditor, and have a "Raw HTML" filter set to correct faulty and chopped off HTML.

(I see this was an issue with Drupal: https://www.drupal.org/project/drupal/issues/2662770.)

Do I have filters incorrectly configured or is this a general issue with Backdrop?

[Added subsequently] To clarify: a clean install of Backdrop 1.18.1, page types set to not use CKEditor, create a new page with the Body field formatting set to Raw HTML, no other modifications, no third-party modules, PHP 7.4.16. Enter this source:

<picture>
  <source srcset="files/flowers-in-a-vase-jacob-van-walscapelle-650.webp" type="image/webp">
  <img src="files/flowers-in-a-vase-jacob-van-walscapelle-650.jpg" alt="Flowers in a glass vase by Jacob van Walscapelle">
</picture>

When saved and logged out, the browser's source is this (which will fail validation):

<picture>
  <source srcset="files/flowers-in-a-vase-jacob-van-walscapelle-650.webp" type="image/webp"></source>
  <img src="files/flowers-in-a-vase-jacob-van-walscapelle-650.jpg" alt="Flowers in a glass vase by Jacob van Walscapelle">
</picture>

How to prevent Backdrop adding that stray </source> end tag?

Comments

klonos's picture

Hey  👋

Sorry for the late response here, I saw this and meant to reply a couple of days ago, but the community is currently busy with and focused on the upcoming Backdrop LIVE event (see https://events.backdropcms.org ).

Your problem does indeed sound like unrelated to CKEditor and more related to the filters in the text format. Here's what I've tried on a fresh Backdrop 1.8.1 installation:

Create a page → switch the text format to "Raw HTML" → copy/paste your code → save → edit the page again → the closing source tag is not there 🤔

...I then inspected the page in incognito, while not logged in → the closing source tag is not there 🤔

Have you tried disabling the "Correct faulty and chopped off HTML" filter, to see if that is actually the culprit?

Also, can you please test this with various browsers and confirm that the closing source tag is added in all of them? (to rule out this being the browser adding the tag). Can you then provide details re which browser you are using, which version of it, and on which operating system?

Thanks

Hi klonos,

Thanks very much for responding.

To clarify: this stray closing tag is never added into the node’s editable content, but is injected at render time and is visible with the browser’s View Page Source.

Good steer on seeing the role, if any, played by the "Correct faulty and chopped off HTML" filter – and it seems that this is indeed the culprit. Unchecking this removes the problem in Firefox Developer 87.0b6 (64-bit), Opera 74, Edge 89.0.774.45 (64-bit), Chrome 89.0.4389.82 (64-bit), all on Windows 10 - and in "Validator.nu/LV http://validator.w3.org/services"

Re-checking the “Correct faulty and chopped off HTML" filter re-introduces the problem in all the above so that the added closing </source> tag once again shows up in the browser’s View Page Source.

Good luck with the upcoming LIVE event. Exciting stuff!

Best