Existing picture tag markup gets broken

  • Resolved Jonas

    (@gnuworld)


    2 years, 10 months ago

    Hi

    If I enable alter html then I am seeing with an existing picture tag that another picture tag is added inside of it.

    Original code:

    <picture>
                <source media="(min-width: 768px)" srcset="https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4.jpg 2560w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-300x148.jpg 300w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-1024x506.jpg 1024w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-768x380.jpg 768w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-1536x760.jpg 1536w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-2048x1013.jpg 2048w" sizes="100vw" width="640" height="316" alt="Botswana safari holidays safari vehicle elephant">

                                    <source media="(max-width: 767px)" srcset="https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-mobile.jpg 808w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-mobile-300x247.jpg 300w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-mobile-768x631.jpg 768w" sizes="100vw" width="640" height="526" alt="Botswana safari holidays safari vehicle elephant">

                                <img src="https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4.jpg" sizes="100vw" alt="Botswana safari holidays safari vehicle elephant">
</picture>

    and then this once alter html is enabled:

    <picture>

                <source media="(min-width: 768px)" srcset="https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4.jpg 2560w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-300x148.jpg 300w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-1024x506.jpg 1024w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-768x380.jpg 768w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-1536x760.jpg 1536w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4-2048x1013.jpg 2048w" sizes="100vw" width="640" height="316" alt="Botswana safari holidays safari vehicle elephant">

                                    <source media="(max-width: 767px)" srcset="https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-mobile.jpg 808w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-mobile-300x247.jpg 300w, https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-mobile-768x631.jpg 768w" sizes="100vw" width="640" height="526" alt="Botswana safari holidays safari vehicle elephant">

                                <picture>

<source srcset="https://staging.greenboxdesigns.com/botswana-experience/wp-content/webp-express/webp-images/uploads/2021/12/botswana-safari-tour-operator-hero-4.jpg.webp" sizes="100vw" type="image/webp"><img src="https://staging.greenboxdesigns.com/botswana-experience/wp-content/uploads/2021/12/botswana-safari-tour-operator-hero-4.jpg" sizes="100vw" alt="Botswana safari holidays safari vehicle elephant" class="webpexpress-processed">

</picture>
            </picture>
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author rosell.dk

    (@roselldk)

    Hi Jonas,

    WebP Express ignores img-tags inside picture elements.

    This behavior was added to the responsible library back in june 2021:
    https://github.com/rosell-dk/dom-util-for-webp/issues/24

    I’m guessing it became available in the following WebP Express release (0.21.0), even though it is missing in the changelog. I can see that the fix is at least part of the current release.

    I have taken the code you posted and added it to a test case, which specifies that the code should not be modified. The test succeeds.
    https://github.com/rosell-dk/dom-util-for-webp/commit/044eb3de11c3b2f5656fdc40c2f0f4057208bdcf

    Could it be that you are using an old version of WebP Express?

    Thread Starter Jonas

    (@gnuworld)

    Hi Bj?rn

    Thank you very much for taking a look at this.

    I set up another test case on a sandbox site and am seeing the same issue, see: https://app-6052b515c1ac180a94120f70.closte.com/picture-test/

    The site uses the latest version of WebP Express.

    I’ll email you directly to give you backend access to the site, then you can take a closer look.

    Plugin Author rosell.dk

    (@roselldk)

    Thank you very much for the sandbox site setup!

    I found the bug. The guard I set up against replacing image tags inside picture tags wasn’t working when there were newlines inside the picture tag.

    So this currently works (the tag is skipped – nothing is done):
    <picture><img src=""></picture>

    But this does not (we get picture tags in picture tags):

    <picture>
  <img src="">
</picture>

    I have fixed the bug in the library:
    https://github.com/rosell-dk/dom-util-for-webp/issues/34

    I shall make a new WebP Express release as soon as I have the time, which I think will be tomorrow

    The fix btw consists of the addition of a single letter ??

    Old code (PictureTags.php, line 315)
    $content = preg_replace_callback('/<picture[^>]*>.*?<\/picture>/i', array($this, 'removePictureTagsTemporarily'), $content);

    New code:
    $content = preg_replace_callback('/<picture[^>]*>.*?<\/picture>/is', array($this, 'removePictureTagsTemporarily'), $content);

    Plugin Author rosell.dk

    (@roselldk)

    I have released the fix.

    Of course, what we really would want WebP Express to do is to add source tags for webp in the existing picture tag.

    I created an issue for that long ago, but didn’t follow up on it.
    I have other pressing things this week, but hope to start task next week.

    https://github.com/rosell-dk/dom-util-for-webp/issues/25

    Thread Starter Jonas

    (@gnuworld)

    Thanks Bj?rn

    I checked on the sandbox site and another production site with a bit more complex Picture markup and WebP Express is now in both cases skipping img tags in picture tags. So that now works, which is great.

    And yes, it will of course be amazing if you can take it a step further so it adds the necessary source tags for WebP also. I subscribed to that github issue and look forward to testing and seeing that functionality in action once you’ve had a chance to develop and roll it out.

    Thanks again for your assistance and all the hard work, it is very much appreciated!

    Thread Starter Jonas

    (@gnuworld)

    Hi Bj?rn

    I think I found another issue, not sure if its related to this latest code push? See: https://app-6052b515c1ac180a94120f70.closte.com/picture-test-2/ image does not display when WebP Express is activated.

    Looks like it references a WebP file that it doesn’t actually create?

    Thread Starter Jonas

    (@gnuworld)

    Nevermind, looks like you got on top of that.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Existing picture tag markup gets broken’ is closed to new replies.

Tags