Hi @mikemeinz,
Could you do this with CSS instead? That way you wont be affected by an update.
Alternatively you could use the metaslider_container_style filter to add this.
add_filter('metaslider_container_style', 'mikemeinz_add_container_class');
function mikemeinz_add_container_class($style, $id, $settings) {
return $style . 'max-height: ' . $settings['height] . 'px;';
}
I didn’t test this code but let me know if it’s not working.
@kbat82, Thanks for your comment. What I am really looking for is for the plugin to do whatever is required to prevent browser reflows.
Hi @mikemeinz,
I understand. Adding that filter will do just that though. It hooks into the plugin. I left a note to investigate this further on our end but that could take weeks. There’s a lot to consider when we make changes to the styling.
Let me know if the filter doesn’t work.
@kbat82
With a couple of changes, your example works but I am now not sure that either my solution or your solution (which results in the same HTML as my solution) solved the browser reflow issue.
add_filter('metaslider_container_style', 'EL_add_container_class',10,3);
function EL_add_container_class($style, $id, $settings) {
return $style . 'max-height: ' . $settings['height'] . 'px;';
}
At this time, I don’t have enough expertise to solve the browser reflow issue. If someone else does, I am open to testing. In the meantime, I will continue researching to see if I can find a solution.
Thanks for your help.
-
This reply was modified 6 years ago by Mike Meinz.
@kbat82
The metaslider_container_style filter below works to prevent reflow in a responsive web site by using the image’s aspect ratio to reserve space using padding-bottom. I got the idea from the article found at the link below. It would be nice if this was a standard feature of MetaSlider. Thanks for your help with this and for your consideration.
add_filter('metaslider_container_style', 'EL_add_container_class',1,3);
function EL_add_container_class($style, $id, $settings) {
return $style . 'position:relative;height:0;padding-bottom:' . (100 * $settings['height'])/$settings['width'] . '%;';
}
RE: https://justmarkup.com/log/2015/11/definining-aspect-ratio-to-prevent-reflow/