problems with code validation when “Alter HTML” is enabled

  • Hello,

    in the source code of the site, I see validation errors (on validator.w3) when the plugin is enabled, these options:

    switch options to ON:

-Alter HTML
-Replace <img> tags with <picture> tags, adding the webp to srcset.
-Dynamically load picturefill.js on older browsers
-Reference webps that haven't been converted yet
-Use content filtering hooks (the_content, the_excerpt, etc)

    Errors validation:

    Error: Element source is missing required attribute srcset.
<source data-srcset="/wp-content/webp-express/webp-images/uploads/img.jpg.webp 150w" sizes="(max-width: 286px) 100vw, 286px" type="image/webp">

Error: The sizes attribute may be specified only if the srcset attribute is also present.
<source data-srcset="/wp-content/webp-express/webp-images/uploads/img.jpg.webp 150w" sizes="(max-width: 286px) 100vw, 286px" type="image/webp">

Error: Bad value image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 280 187'%2F%3E for attribute src on element img: Illegal character in path segment: space is not allowed.
<img width="280" height="187" src="image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.domain.com/wp-content/uploads/img.jpg 150w" sizes="(max-width: 280px) 100vw, 280px">

    and also, if i do not include “Alter HTML”, then the image does not show in the site logo. somewhere incorrectly replaces. it tested in work on The7 template

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Sergiy

    (@se8pro)

    maybe there is an even simpler method for generating webp images (universal and less painful for all templates in the integration, so that the code is cleaner), writing a rule in htaccess and adding images created in a separate folder

    Plugin Author rosell.dk

    (@roselldk)

    And no validation errors without Alter HTML, I suppose?

    The first error message says that <source> element must have “srcset” attribute. I can see that it has “data-srcset” attribute.

    How can this happen? I dug into it and found that the problem occurs when both “srcset” and “data-srcset” (or “data-lazy-srcset”) are set on an image. If both are present, only the “data-srcset” will be used.

    Ie:
    <img data-lazy-srcset="1.jpg 480w, 2.jpg 800w" srcset="1.jpg 480w, 2.jpg 800w">

    The result becomes:
    <picture><source data-lazy-srcset="1.jpg.webp 480w, 2.jpg.webp 800w" type="image/webp"><img data-lazy-srcset="1.jpg 480w, 2.jpg 800w" srcset="1.jpg 480w, 2.jpg 800w" class="webpexpress-processed"></picture>

    I shall fix…

    • This reply was modified 3 years ago by rosell.dk.
    • This reply was modified 3 years ago by rosell.dk.
    Plugin Author rosell.dk

    (@roselldk)

    You are suggesting using .htaccess instead of altering HTML. WebP Express already allows you to do that ?? (in the “Varied Image Responses” operation mode)

    • This reply was modified 3 years ago by rosell.dk.
    • This reply was modified 3 years ago by rosell.dk.
    Thread Starter Sergiy

    (@se8pro)

    Thanks for the replies and updates of the useful plugin

    Earlier it showed errors with the method: “How to replace:? The complete page (using output buffering)”
    and sometimes in the template the logo in the header of the site disappeared from the mobile adaptive version (but this is not on all templates, on generatepress ok, for example on the7 it may be so arranged that it was not quite ok in it)

    then changed to this method
    “How to replace:? Use content filtering hooks (the_content, the_excerpt, etc)”
    but it does not convert the site logo to this format

    now, when I double-check, I see that both show ok

    I will check it again, but most likely everything is ok already)

    and often have to be disabled on many shared hosting: “Enable direct redirection to existing converted images?
    Enable redirection to converter?
    Create webp files upon request? ”
    but as I understand it, these are optional options

    on the7 template shows this yet, but not entirely critical (there were a lot of code validation notifications before):

    Error: Bad value wp-content / webp-express / webp-images / uploads / logo.png.webp 307w, wp-content / webp-express / webp-images / uploads / logo.png.webp 307w for attribute srcset on element source: Width for image wp-c… ges / uploads / logo.png.webp is identical to width for image wp-c… ges / uploads / logo.png.webp.

    From line 71, column 128; to line 71, column 345

    > <picture> <source srcset = “wp-content / webp-express / webp-images / uploads / logo.png.webp 307w,… / wp-content / webp-express / webp-images / uploads / logo.png. webp 307w “sizes =” 307px “type =” image / webp “> <img c

    Error: Bad value wp-content / uploads / logo.png 307w, wp-content / uploads / logo.png 307w for attribute srcset on element img: Width for image wp-content / uploads / logo.png is identical to width for image wp-content / uploads / logo.png.

    From line 71, column 346; to line 71, column 621

    age / webp “> </ pict

    Plugin Author rosell.dk

    (@roselldk)

    Ok, the problem you now report is that you get HTML like this:

    <picture>
  <source srcset="logo.png.webp 307w, logo.png.webp 307w">
  <img srcset="logo.png.webp 307w, logo.png.webp 307w">
</picture>

    The complaint from the validator is that it makes no sense to specify the same width twice in an srcset, neither in a “source” tag, nor in an “img” tag.

    I’m puzzled how this came to happen.
    Can you provide the HTML before it was altered by my plugin?

    I have btw fixed the other issues in the library that alters HTML. These fixes will be part of next WebP Express release.

    • This reply was modified 3 years ago by rosell.dk.
    • This reply was modified 3 years ago by rosell.dk.
    Plugin Author rosell.dk

    (@roselldk)

    I have now released the fixes.

    I have NOT done anything about the extra issue that you reported. I need some more info on that (see my last reply).

    • This reply was modified 3 years ago by rosell.dk.
    Plugin Author rosell.dk

    (@roselldk)

    @se8pro: I’m still interested if you could provide the HTML.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘problems with code validation when “Alter HTML” is enabled’ is closed to new replies.