webp-express icon indicating copy to clipboard operation
webp-express copied to clipboard

Alter HTML doesn't work with <picture> tag

Open aleksandrpnshkn opened this issue 3 years ago • 4 comments

I have responsive images in my theme:

<picture>
    <source media="(min-width: 992px)" srcset="<?= wp_get_attachment_image_url( $image_lg ) ?>">
    <?= wp_get_attachment_image( $image_sm ) ?>
</picture>

but instead of replacing urls it wraps <img> in another <picture>:

picture
	source
	picture
		source[type="image/webp"]
		img

That is, I have to exclude these images. By the way, examples have a <picture> in input markup, but why doesn't it contain required <img>?

And not quite on the topic. Two little issues with alter HTML mode:

  1. It cuts off port from src url (http://localhost:8000/wp-content/... -> http://localhost/wp-content/...), so it doesn't work in my development environment.
  2. Doesn't work for relative urls (<img src="/wp-content/...">), just skipping.

Should I create separate issues?

Tested in clean twentytwenty theme. WebP Express v.0.17.4

aleksandrpnshkn avatar Jul 18 '20 23:07 aleksandrpnshkn

I have the same issue. Is there a solution for this? I've been looking everywhere.

woutersteg avatar Sep 16 '20 15:09 woutersteg

This was fixed in dom-util-for-webp v.0.4.1 back in june 2021: https://github.com/rosell-dk/dom-util-for-webp/issues/24

rosell-dk avatar May 02 '22 12:05 rosell-dk

The problem is still there, when there are newlines inside the picture tag

rosell-dk avatar May 03 '22 13:05 rosell-dk

See: https://github.com/rosell-dk/dom-util-for-webp/issues/34 https://wordpress.org/support/topic/existing-picture-tag-markup-gets-broken/#post-15608933

rosell-dk avatar May 03 '22 13:05 rosell-dk