Support

Account

Home Forums Front-end Issues Slider with if/else picture check Reply To: Slider with if/else picture check

  • 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>