PHP code proposal
-
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 astyle=>
So changinstyle="<?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.
-
This topic was modified 3 years, 3 months ago by
-
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.Hi
In this same validator. You can test this urlhttps://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 reportedHi @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:
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: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.
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 theSliderTypeSimpleFrontend.php
this is used:$this->displaySizeSVGs($css);
In theAbstractSliderTypeFrontend.php
is thedisplaySizeSVGs
function and have:
`$svgs = array(
Html::tag(‘svg’, $attrs, ”)
);`
In theNextend/Framework/View/Html.php
is the functionHtml::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 asHtml::tag('svg', $attrs, '')
has a null$content
and$closeTag
andself::$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 thexmlns="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.
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.phppublic 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.
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 orphanCould 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.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….
Maybepublic 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.
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?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….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-actionsThis 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.$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)
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.
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 inif ($content === false) { return $closeTag && self::$closeSingleTags ? $html . ' />' : $html . '>'; } else { return $closeTag ? $html . '>' . $content . '</' . $tag . '>' : $html . '>' . $content; }
I think that
$html . ' />'
Is this rigth?
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 ifHtml::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 theHtml::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. -
This reply was modified 3 years, 3 months ago by
- The topic ‘PHP code proposal’ is closed to new replies.