Images not loading on a entry with shortcode

Hi @jesuswitker

As for the missing background images:
Have you managed to fix this problem? Since I checked the linked page, and in my case the background images appeared fine on all slides.
But I noticed that, a third party actually modified the HTML of your slider, as there are third party attributes on our images that shouldn’t be there, also there is a noscript tag added below the img tag. This is usually done by third party image lazy loading. So I find it possible that you have a plugin that tries to lazy load our images, too.
Generally third party lazy loading just causes problems for our images, so you should exclude our images from their lazy loading, e.g.:
by the following class name:

• skip-lazy

or by the following data attribute:

• data-skip-lazy

As for the arrow image:
The arrow images won’t show up as their HTML was also modified by something and messed up the value of the src attribute. If you inspect that image, you will see an base64 image source with a value starting like this:

image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzI...=

but that is wrong, as base64 image sources should start rather like this:

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzI...=

I can see the same noscript tag with the working img HTML below this, too. So I find it possible that this problem is caused by the some lazy loading plugin, that caused problems for the Slide background images. Excluding either the class or the data attribute should fix this problem, too.

Content is unreadable in mobile view:
The problem is that you added the layer ( that contains the texts ) with Absolute position:

• https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#absolute

However, absolute position is not meant for content, but just for decoration, as absolute positioned layers are just floating on the slide, hence they won’t affect to the height of the slider meaning that if your content is too high, it might appear off screen. Also when the aspect ratio of your slider changes, the absolute positioned layers can appear in a different position.

Content should be built always with Default position. So to avoid this issue, you should make your absolute positioned layers to default:

• https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#make-default

that way the content would affect to the height of your slider as well, meaning that it wouldn’t appear offscreen anymore.

Tip: Some of your texts are very long, which can make your slider in mobile view pretty high. If you want to avoid that, you could set a fix height on the Text Layer that contains the long text, by using the “Height” field on the Style tab:

• https://smartslider.helpscoutdocs.com/article/1812-layer-style#default-size

and then you should set the “Crop” setting to “Scroll”:

• https://smartslider.helpscoutdocs.com/article/1812-layer-style#effect

this way the overflowing parts of the text could be scrolled.

Best regards,
Laszlo.

Hi thanks for the reply, about the lazyload images, The mobile fix was perfect! Thanks!. Abour the lazy load, I don’t have any lazy load plugin (may be Jetpack Boost?) so Idk why the arrow icons dissappared

• This reply was modified 1 year, 4 months ago by jesuswitker.

@jesuswitker

As far as I know, Jetpack and Jetpack Boost both have lazy loading features. So you could try disabling the related settings:

• https://smartslider.helpscoutdocs.com/article/1976-cache-or-minification#jetpack

and see if that makes any difference.

If disabling those settings fixed the problem, then that confirms that the problem is caused by their lazy loading. But the strange thing is that, their documentation states that the images with the “skip-lazy” class should be excluded by their lazy loading by default:

• https://jetpack.com/support/lazy-images/#customizing-lazy-loading-images

and as you could see, our images have that class, so I am not really sure why our images are still getting affected by their codes.

Either way, in our documentation above, you can find a possible workaround for their conflict with the base64 images.

I had already deactivate lazy load images from Jetpack Boost, the arrows got fixed but the not loading background images problem continues

Hi @jesuswitker

Have you managed to fix the problem with the Slide background images as well?

Since I checked the linked page in the following browsers:

• Windows 10 – Chrome, Firefox
• Mac – Safari

And all of your slide background images appeared fine for me.

However I can see that, the slide background images are still getting optimized by a third party as they are coming from the “i0.wp.com” domain which is Jetpack’s image CDN. and they end like this “.webp?w=640” so they are converting the images to webp format.

If you still see the problem, then:

• Can you reproduce it in other browsers, too? If you can’t please disable all browser extensions, and inspect if that makes any difference.
• Is your browser up-to-date?
• If you open the browser console, and you refresh the page with the error, then you try to navigate to the slide where you don’t see the background image, can you see any red errors in the console?

Tip: You can open the console like this – https://smartslider.helpscoutdocs.com/article/1935-troubleshooting-with-your-browser#jserror