pixeled images bacuse of wp resize

Hi,

Thank you for pointing that out. This is actually a WordPress limitation. MetaSlider uses WordPress’ default cropping function image_resize_dimensions to resize the images.

The same would happen if you view the image on any default WordPress custom sizes such as thumbnail, medium, and large. If you want to preserve the high quality image, I would suggest to disable the cropping. Of course this will also have a larger size compared to the cropped image.

Cheers,
Arreane

Thanks Arreane,

The option I actually hoped for would be to use the browser/css resize functions, meaning the ablity to load full image and resize it with e.g. background-size (which off course means the image would have to be set as background, and not an image itself), because I’ve noticed, that when I set the croppping to disable, the size attributes of the slider get not applied and it takes the full image size.

As mentioned, to have slides as background images and scale them with background-size would be a pretty neat workaround, or at least great way to have as another option in the cropping-settings…

Cheers

Patrick

Hi,

Yes, that would be possible. I’ve made a custom CSS code for you. I believe this is what you want to achieve. You can try and copy the following code below and paste it in your css file:

#metaslider_570 .slides .ms-image { background: transparent none no-repeat center center / cover scroll }
#metaslider_570 .slides .slide-571 { background-image: url(https://canelodigital.cl/bsv/wp-content/uploads/2021/06/SoyDonanteObsequios.jpeg); }
#metaslider_570 .slides .slide-572 { background-image: url(https://canelodigital.cl/bsv/wp-content/uploads/2021/06/FurgonDeLado.jpeg); }
#metaslider_570 .slides .slide-573 { background-image: url(https://canelodigital.cl/bsv/wp-content/uploads/2021/03/Galeria20.jpeg); }
#metaslider_570 .slides .slide-574 { background-image: url(https://canelodigital.cl/bsv/wp-content/uploads/2021/06/CrewDelanteFurgon.jpeg); }
#metaslider_570 .slides img {
opacity: 0;
pointer-events: none;
}

Hope this helps, let us know if you need anything else.

Cheers,
Arreane