Imagify replaces img tags inside existing picture tags resulting in nested picture tags

[andressoop]

Describe the bug When webp images display option with picture tags is used from the settings and theme already has picture tags present, then Imagify replaces img tags inside existing picture tags resulting in nested tags.

Expected behavior Imagify should ignore already existing picture tags with webp images.

Screenshots

Backlog Grooming (for WP Media dev team use only)

• [ ] Reproduce the problem
• [ ] Identify the root cause
• [ ] Scope a solution
• [ ] Estimate the effort

[indrek-k]

Any updates on this?

[mostafa-hisham]

Reproduced localy: :heavy_check_mark:

Root Cause:

Imagify replaces img tags inside existing picture tags

Scope for Solution:

we can remove all picture tags from the page before search for img tags with regex add new function to remove picture tags

    private function remove_picture_tags( string $html ): string {
        $replace = preg_replace( '#<picture[^>]*>.*?<\/picture\s*>#mis', '', $html );

        if ( null === $replace ) {
            return $html;
        }

        return $replace;
    }

in process_content function, we need to removefirst $html_no_picture_tags= $this->remove_picture_tags($content);

https://github.com/wp-media/imagify-plugin/blob/ad8a59ef0d3f5b907b833f35f3971e0a471e8fb2/classes/Webp/Picture/Display.php#L138

Estimate Effort

[S]

[akojif]

@iCaspar @mostafa-hisham It's the year 2023, and this is still an issue. I could decide to create another issue for this, but since I saw this issue perfectly describes the bug - I have decided to drop a comment. In summary, Imagify removes the className in the <img> tag and adds it to the <picture> tag.

For example: <img class="akfdev" src="https://random.com/media/akfdev.png" alt"Francis"> is rendered as:

<picture class="akfdev">
<img src="https://random.com/media/akfdev.png" alt"Francis">
</picture>