Slide Anything plugin/ owl carousel slider not working

You don’t only have AO, but also AsyncJS, so that could be the issue here. Try disabling AsyncJS for now, see if it works that way and if it doens’t see if the problem is with CSS or JS by disabling those for a second. If JS have a look at the browser console for JS errors. Feel free to report back ??

frank

I figured out the problem. It’s not the CSS or JS.

It’s the “Optimize Images” in Images tab. The “Optimize images on the fly and serve them from Shortpixel’s global CDN.” checkbox was checked and when I unchecked them, the logos showed up.

How do I fix this?

errr … are you sure? because on the site you linked AO image optimizationn is not active and it looks severely broken, with multiple JS errors on the console?

All I know is that the logos/images did show up when I unchecked the box.

I also checked the Console in Edge browser and I don’t see any error.

I thought you already fixed the bug with background-images?

rechecked the site now, no more JS errors on the browser console so I guess you reconfigured *something*? ??

re. the slider not working; I’ll have to see it broken (also tell me where specifically on which page I have to look) to be able understand what breaks any why.

re. “the bug with background images”; to my knowledge there is no such thing at the moment, no ??

Okay, I re-checked the box again and checked again at Edge Browser but the images are still there. I think I should wait until Shortpixel optimize the logos and serve them again from CDN.

The page where the sliders are is at https://test.idssite.com/

OK, ping me when it breaks and share a screenshot please so I know where I should be looking. Won’t be able to test in Edge though, but if I understand correctly it also broke in Chrome?

It broke again. I couldn’t see anything on Chrome yet. I’m thinking that the page haven’t updated their code even through I made sure to clear the cache of the page. But I can see that it broke on Firefox and Edge.

Upon inspection, the background images displayed like this url(https://cdn.shortpixel.ai/client/q_lossy,ret_img/"https://test.idssite.com/wp-content/uploads/2019/02/dellcolor.png")

aha! that is because your original background-images are set as

background-image:url("https://test.idssite.com/wp-content/uploads/2019/03/breastcarecenterslogo.png");

turn that into

background-image:url("https://test.idssite.com/wp-content/uploads/2019/03/breastcarecenterslogo.png");

or

background-image:url(https://test.idssite.com/wp-content/uploads/2019/03/breastcarecenterslogo.png);

and all should be fine.

frank

How?

In Slide Anything slider, I just add it as a background image in each slide. I might need to contact Slide Anything plugin about that….

OK, feel free to keep me informed. If need be I can provide you with a small code-snippet as a workaround, but ideally indeed this is fixed at the root ??

Yes please provide me with a code snippet. ??

OK, this should work, but I have not tested it though as I don’t have my dev computer with me;

add_filter( 'autoptimize_filter_imgopt_normalized_url', 'fix_quot' );
function fix_quot( $url_in ) {
    return str_replace( '"', '', $url_in )
}

It works.

Also, you forgot to add the ; after the return statement in the function. I already added it in the code. I’m just adding the note in case anyone is looking for solution to this kind of problem.

Final code:

add_filter( 'autoptimize_filter_imgopt_normalized_url', 'fix_quot' );
function fix_quot( $url_in ) {
    return str_replace( '"', '', $url_in );
}

ah, darn that semi-colon, good you corrected & mentioned here for others to find! ??

any feedback from the slide-devs?