Reply To: Slider with if/else picture check

• ChrisDark

• December 18, 2020 at 11:17 am

Hey @varilux2k ,

It seems you’re using JavaScript ( JQuery > $ ) within PHP tags wrongly.

PHP solution:

<?php

if (!wp_is_mobile()) {
echo $slider_image['url'];
} else { 
echo $slider_image_mobile ['url'];
}

?>

HTML solution:

<picture>
   <source media="(min-width: 36em)"
      srcset="large.jpg  1024w,
         medium.jpg 640w,
         small.jpg  320w"
      sizes="33.3vw" />
   <source srcset="cropped-large.jpg 2x,
         cropped-small.jpg 1x" />
   <img src="small.jpg" alt="A rad wolf" />
</picture>

JavaScript solution ( if you extend your html with data attr ):

<script>
var imageBgs = document.querySelectorAll('[data-bg-mobile]');
var screenWidth = window.innerWidth;

for(var i=0; i<imageBgs.length; i++) {
    if( screenWidth < 576 ){
        // Load mobile image
        imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-mobile')+')';
    }
}
</script>