• Resolved lofesa

    (@lofesa)


    Hi

    1.- In the file smart-slider-3/Nextend/SmartSlider3/Slider/SliderType/Simple/SliderTypeSimpleFrontend.php lines 64 and 72 are this code
    64 <div class="n2-ss-slider-1 n2_ss__touch_element n2-ow" style="<?php echo Sanitize::esc_attr($sliderCSS); ?>">
    72 <div class="n2-ss-slider-3 n2-ow" style="<?php echo $slideCSS; ?>">

    But when $slideCSS is empty the output contais a style=>
    So changin style="<?php echo Sanitize::esc_attr($sliderCSS); ?>">` with some like
    <?php if (!empty($sliderCSS)) echo 'style="' . Sanitize::esc_attr($sliderCSS);
    the output don´t contain an empty attribute.

    2.- When this svg is created in the same file as 1 in line 85
    <svg viewBox="0 0 1400 600" data-related-device="desktopPortrait" class="n2-ow n2-ss-preserve-size n2-ss-preserve-size--slider n2-ss-slide-limiter"></svg>
    Some html parsers throw error of unmatched </svg> label.
    Putting a space then between th > and the </svg> the report pases.

    • This topic was modified 3 years, 3 months ago by lofesa.
Viewing 15 replies - 1 through 15 (of 16 total)
  • Ramona

    (@nextend_ramona)

    Hi @lofesa

    I’ve passed these suggestions to our senior developer for discussion.

    About the 2nd suggestion, which HTML parser/validator throws an error for this? I checked the W3 validator: https://validator.w3.org/nu/
    and that didn’t have problems with the SVG.

    Thread Starter lofesa

    (@lofesa)

    Hi
    In this same validator. You can test this url https://intersindicalrm.org/.
    In Firefox is error 2, in Chrome error 1.
    I use a software called pagespeed module for doing web optimizations and uses and html parser and throw the same error:
    [Mon, 21 Mar 2022 17:22:01 GMT] [Info] [1214] [https://intersindicalrm.org/:1] Unexpected close-tag svg, no tags are open
    When a space is set between > and </svg> the error is not reported

    • This reply was modified 3 years, 3 months ago by lofesa.
    • This reply was modified 3 years, 3 months ago by lofesa.
    • This reply was modified 3 years, 3 months ago by lofesa.
    • This reply was modified 3 years, 3 months ago by lofesa.
    Ramona

    (@nextend_ramona)

    Hi @lofesa

    I think the reason the validator reports the svg tag on your site but not on ours is that the code was modified on your site.
    The SVG should be like this:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" data-related-device="desktopPortrait" class="n2-ow n2-ss-preserve-size n2-ss-preserve-size--slider n2-ss-slide-limiter"></svg>
    But on your site, it looks like this:
    <svg viewBox="0 0 1200 600" data-related-device="desktopPortrait" class="n2-ow n2-ss-preserve-size n2-ss-preserve-size--slider n2-ss-slide-limiter"/></svg>
    There’s a / just before the end of the opening svg tag.

    If you go to the text input validator:

    View post on imgur.com


    and paste these SVG tags one by one, you’ll see that only the one where the opening svg tag has the / makes the validator throw and error. (Adding a space didn’t make the error disappear: https://imgur.com/hWvQAx2 so it’s not the right solution for this.)

    This / a the end of the opening tag is generally added for self-closing tags:
    https://www.techopedia.com/definition/31857/self-closing-tag
    like the img tag can have it. However, the <svg> is not a self closing tag. It has an opening and a closing tag, as you can see at: https://www.w3schools.com/html/html5_svg.asp
    We do add the proper closing svg tag, and because of this / should not be at the end of its opening tag.

    So I think this error is actually created by the plugin or server module that modifies the svg tag’s HTML code, so it should be corrected there.

    I run the test on your site in both Chrome (99.0.4844.82) and Firefox (98.0.1) and neither of them reported problems with the style attribute on the n2-ss-slider-3 element. Here’s a screenshot from Chrome:

    View post on imgur.com

    There are two mentions of the <style> tag (not the attribute) but they’re not connected to Smart Slider. The first one refers to this style tag:
    <h2 class="widget-title">UltimosTweets</h2><style>.fetched_tweets.light>li
    and the second one is about this style tag:
    <script type="application/ld+json">{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://intersindicalrm.org","name":"Home"}}]}</script><style>.wp-container-6238b40c65a19{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-6238b40c65a19>
    Neither of these are connected to Smart Slider.

    I’ve run a test on one of our templates:
    https://validator.w3.org/nu/?doc=https%3A%2F%2Fsmartslider3.com%2Ffull-width-post-slider%2F
    and none of the errors you reported are present. (In fact, none of the reported errors are coming from Smart Slider.). The empty style attribute is present:
    <div class="n2-ss-slider-3 n2-ow" style="">
    but it causes no problems and even the validator doesn’t see it as a problem.

    So I think some kind of optimization plugin (or the pagespeed module) is the root cause of your problems, and that should be fine-tuned not to cause issues.

    You could temporarily turn off pagespeed module and see if the errors are still present. If they are and you use some optimization plugin, try turning that off and see if the problems are still present.

    Thread Starter lofesa

    (@lofesa)

    Hi
    1.- About <style> tag, you can´t view it because I changed the php files to make it conditional
    2.- About the closing /, it comed from Smart Slider, see:
    In the SliderTypeSimpleFrontend.php this is used: $this->displaySizeSVGs($css);
    In the AbstractSliderTypeFrontend.php is the displaySizeSVGs function and have:
    `$svgs = array(
    Html::tag(‘svg’, $attrs, ”)
    );`
    In the Nextend/Framework/View/Html.php is the function Html::tag:
    public static function tag($tag, $htmlOptions = array(), $content = “”, $closeTag = true) {
    $html = ‘<‘ . $tag . self::renderAttributes($htmlOptions);
    if ($content === false) return $closeTag && self::$closeSingleTags ? $html . ‘ />’ : $html . ‘>’; else
    return $closeTag ? $html . ‘>’ . $content . ‘</’ . $tag . ‘>’ : $html . ‘>’ . $content;
    }
    As far as Html::tag('svg', $attrs, '') has a null $content and $closeTag and self::$closeSingleTags are true, the /> is added.
    If I put some string as $content the /> is ommited.

    3.- If I do var_dump() off $attrs there is the xmlns="http://www.w3.org/2000/svg" is here but the var-dump() of $svgs does not have it.

    To make these test I have disabled autoptimize and pagespeed.

    Plugin Support Gabor

    (@nextendweb_gabor)

    Hi @lofesa!

    1. We have modified our code now, so it will be included in the next Smart Slider versions to not have empty style.

    2. In Nextend/Framework/View/Html.php this part fails:
    if ($content === false)
    because $content is ” and triple equal only accepts that exact value, which is compared. So with this condition, this will be returned:
    return $closeTag ? $html . '>' . $content . '</' . $tag . '>' : $html . '>' . $content;

    3. I don’t see this issue either. Tracking the code from SliderTypeSimpleFrontend.php:

    $svgs = array(
        Html::tag('svg', $attrs, '')
    );

    where $attrs has the correct value, it goes to:
    Html.php

    public static function tag($tag, $htmlOptions = array(), $content = "", $closeTag = true) {
            $html = '<' . $tag . self::renderAttributes($htmlOptions);
    

    where renderAttributes creates the attribute:

    public static function renderAttributes($htmlOptions = array()) {
    ...
    foreach ($htmlOptions as $name => $value) {
    ...
    } else if ($value !== null) $html .= ' ' . $name . '="' . ($raw ? $value : self::encodeAttribute($value)) . '"';
    ...

    where
    $name => $value
    equals:
    'xmlns' => "http://www.w3.org/2000/svg"

    and $raw is false, so the result is:
    $html .= ' ' . $name . '="' . self::encodeAttribute($value)

    encodeAttribute does htmlspecialchars, but even if you won’t track that, $name is already there.

    So I think you might have done some changes to the code if these parts are giving you different results, as they should work fine.

    • This reply was modified 3 years, 3 months ago by Gabor.
    • This reply was modified 3 years, 3 months ago by Gabor.
    Thread Starter lofesa

    (@lofesa)

    Hi @nextendweb_gabor

    Yes, I have modified this part:

    $svgs = array(
        Html::tag('svg', $attrs, '#')
    );

    where # mus be read as blank space.
    Then here:

    public static function tag($tag, $htmlOptions = array(), $content = “”, $closeTag = true) {
    $html = ‘<‘ . $tag . self::renderAttributes($htmlOptions);
    if ($content === false) return $closeTag && self::$closeSingleTags ? $html . ‘ />’ : $html . ‘>’; else
    return $closeTag ? $html . ‘>’ . $content . ‘</’ . $tag . ‘>’ : $html . ‘>’ . $content;
    }

    $content is not empty so / is not added and the </svg> is not orphan

    Plugin Support Gabor

    (@nextendweb_gabor)

    Could you tell me why do you consider the result of incubator-pagespeed-mod as being valid in terms of having to have space between <svg></svg> tags, and not managing it as a false result/bug in their test? Because I’m trying to look around HTML documentations and other HTML validators, but I couldn’t really find anything about having to use space in this case. As if this is not a valid request from them, then you could just ignore it and the original code would work fine.

    Thread Starter lofesa

    (@lofesa)

    Hi @nextendweb_gabor

    The space is not the issue. The issue is the ending /.

    As stated by @nextend_ramona

    the opening svg tag has the / makes the validator throw and error.

    Your code, in this case:

    public static function tag($tag, $htmlOptions = array(), $content = “”, $closeTag = true) {
    $html = ‘<‘ . $tag . self::renderAttributes($htmlOptions);
    if ($content === false) return $closeTag && self::$closeSingleTags ? $html . ‘ />’ : $html . ‘>’; else
    return $closeTag ? $html . ‘>’ . $content . ‘</’ . $tag . ‘>’ : $html . ‘>’ . $content;
    }

    makes the <svg......./></svg> as far as $content is empty and $closeTag && self::$closeSingleTags is allways true, this end with the /> ending the <svg making the </svg> orphan. Putting a space in

    $svgs = array(
        Html::tag('svg', $attrs, '#')
    );

    makes $content not empty and creates the <svg........> </svg> and this is a valid one.

    If there is another way to get <svg......></svg> without adding the space….
    Maybe

    public static function tag($tag, $htmlOptions = array(), $content = “”, $closeTag = true) {
    $html = ‘<‘ . $tag . self::renderAttributes($htmlOptions);
    if ($content === false) return $closeTag && self::$closeSingleTags && ($tag != 'svg') ? $html . ‘ />’ : $html . ‘>’; else
    return $closeTag ? $html . ‘>’ . $content . ‘</’ . $tag . ‘>’ : $html . ‘>’ . $content;
    }
    • This reply was modified 3 years, 3 months ago by lofesa.
    Plugin Support Gabor

    (@nextendweb_gabor)

    But this original code should work fine:

    $svgs = array(
        Html::tag('svg', $attrs, '')
    );

    and produce what you need:
    <svg......></svg>

    because this:
    if ($content === false)

    is a not true statement with the given ” $content value. So within this part:

    public static function tag($tag, $htmlOptions = array(), $content = "", $closeTag = true) {
            $html = '<' . $tag . self::renderAttributes($htmlOptions);
            if ($content === false) return $closeTag && self::$closeSingleTags ? $html . ' />' : $html . '>'; else
                return $closeTag ? $html . '>' . $content . '</' . $tag . '>' : $html . '>' . $content;
    }

    you are getting the “else” result. To see this function a little more formatted:

    public static function tag($tag, $htmlOptions = array(), $content = "", $closeTag = true) {
            $html = '<' . $tag . self::renderAttributes($htmlOptions);
    
            // ('' === false) -> results false
            if ($content === false) {
              // wrong result
              return $closeTag && self::$closeSingleTags ? $html . ' />' : $html . '>'; 
    
            } else {
              // correct result
              return $closeTag ? $html . '>' . $content . '</' . $tag . '>' : $html . '>' . $content;
            }
    }

    Could you debug this $content === false part, if you are getting the wrong result?

    Thread Starter lofesa

    (@lofesa)

    Hi @nextendweb_gabor

    Each time I touch the $content === false changin it whit others condition, like empty($content) and so… the slider is not rendered at all or bad rendered.

    Now I have no time to test, and don´t know if it may wordk… but can this be a way:

    $svgs = array(
        Html::tag('svg', $attrs, '', false)
    );

    As far as Html::tag takes 4 arguments being the four true by default….

    Plugin Support Gabor

    (@nextendweb_gabor)

    empty($content) gives a wrong result, because ’empty’ allows more things to go through, than $content === false does. Your test could be rather something like this:

        public static function tag($tag, $htmlOptions = array(), $content = "", $closeTag = true) {
            if ($tag == 'svg') {
                var_dump($content, $content === false);
            }
            
            $html = '<' . $tag . self::renderAttributes($htmlOptions);
            
            if ($content === false) return $closeTag && self::$closeSingleTags ? $html . ' />' : $html . '>'; else
                return $closeTag ? $html . '>' . $content . '</' . $tag . '>' : $html . '>' . $content;
        }

    and clear the slider’s cache afterwards:
    https://smartslider.helpscoutdocs.com/article/1764-slider-settings#slider-actions

    This will display the result under your published slider, which in correct circumstances should be:
    string(0) "" bool(false)

    About the 4th argument:
    In Html::tag the 4th argument has to be ‘true’, because with our original code, the ‘// correct result’ should happen from my previous example. In your case the ‘// wrong result’ happens for some reason, and that is why it helps with your code.

    Thread Starter lofesa

    (@lofesa)

    Hi @nextendweb_gabor

    $svgs = array(
        Html::tag('svg', $attrs, '', false)
    );

    This don´t work, don´t render the image of the slider.

    Making $content == false the background is half rended, don´t display noting beloww “General” “Size”

    Asking if (empty($content)) get a blank page.

    But after all I think:

    public static function tag($tag, $htmlOptions = array(), $content = "", $closeTag = true) {
            $html = '<' . $tag . self::renderAttributes($htmlOptions);
    
            // ('' === false) -> results false
            if ($content === false) {
              // wrong result BUT is rigth $conten = "" evaluates as false
              // AND THEN GET THIS /> an
              return $closeTag && self::$closeSingleTags ? $html . ' />' : $html . '>'; 
    
            } else {
              // correct result FOR svg we need this result even if $content is false
              return $closeTag ? $html . '>' . $content . '</' . $tag . '>' : $html . '>' . $content;
            }
    }

    P.S. Done the test, get string(0) "" bool(false)

    Plugin Support Gabor

    (@nextendweb_gabor)

    I think your modifications are going completely wrong now, and what I rather suggest is to do a reinstallation, to ensure our original codes are being used:
    https://smartslider.helpscoutdocs.com/article/1752-update#alternative-wp
    because those has to work. After the reinstallation is done, use the Export slider as HTML feature:
    https://smartslider.helpscoutdocs.com/article/1764-slider-settings#slider-actions
    to see what HTML codes the slider has, when nothing affects it. That HTML code is generated by the same code which is used when you publish your slider on WordPress, so this can show you the real result.

    If you would have a problem with the HTML exported slider too, contact us here:
    https://smartslider3.com/contact-us/support/?topic=Other&platform=WordPress&version=Free&website=website-yes&slider-export=slider-no&send-screenshot=sreenshot-no
    and we will debug the problem further.

    • This reply was modified 3 years, 3 months ago by Gabor.
    Thread Starter lofesa

    (@lofesa)

    Hi

    Don´t worry, I have copy of the files before get touched and restore it when goes wrong.

    I´m a bit confused, if $content == false is true and $closeTag && self::$closeSingleTags is true, what we can spect in

    if ($content === false) {
              return $closeTag && self::$closeSingleTags ? $html . ' />' : $html . '>'; 
            } else {
              return $closeTag ? $html . '>' . $content . '</' . $tag . '>' : $html . '>' . $content;
            }

    I think that $html . ' />'

    Is this rigth?

    Ramona

    (@nextend_ramona)

    Hi,

    If you use the completely original codes of Smart Slider and export your slider as HTML as Gabor suggested, does the svg tag look correct?

    Anyway, here’s a super simplyfied example:
    https://sandbox.onlinephpfunctions.com/code/95e1d476-519e-46fe-8d98-853590355e4e
    where you can see that the logic behind the slider’s codes works just fine. They correctly output an SVG element:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" data-related-device="desktopPortrait" class="n2-ow n2-ss-preserve-size n2-ss-preserve-size--slider n2-ss-slide-limiter"></svg>

    I’ve tried it with many various PHP versions and the output was always correct. This that the code is correct and all PHP versions handle it the same way. What’s the PHP version on your server? Although based on this, it shouldn’t matter. (You can check it, for example, at WordPress menu: Tools > Site Health > Info tab > Server)

    Code:
    if ($content === false) means it only ends up in the “true” case if Html::tag('svg', $attrs, false) was called. But it’s not. So ignore the “if” case of the condition.

    If you look at the else condition, then you can see that $closeTag is not specified when the Html::tag is called, which means the default value, true will be used. So the $html . '>' . $content . '</' . $tag . '>' will be the end of the output.

    We’re not able to reproduce the issue you’re trying to report, even in a simplified enviroment. So it’s either that some of your code modifications cause the problem or something else on your website/server.

    If you have not done it yet, download a fresh copy of Smart Slider export it as HTML and check the SVG tag.

    You can also try running a plugin and theme conflict test:
    https://smartslider.helpscoutdocs.com/article/1735-how-to-do-a-plugin-theme-conflict-test
    and also make sure that any dropin and must use plugin is disabled. If you manage your own server, it’s worth temporarily turning off any optimization module as well, just in case they mess something up. Then turn back everything one by one, and this should help figuring out what exactly causes your problem.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘PHP code proposal’ is closed to new replies.