Support

Account

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

Solving

Slider with if/else picture check

  • Hello community,

    I would like to build a slider in which I integrate two images for the different resolutions (desktop and mobile). I embed the image as a ccs style element over background image. This works very well for a picture. Now my question. Is it possible to write an if/else statement that checks the resolution and then inserts the respective picture? I’ve searched the internet a lot and $(window).width sounds very promising. Unfortunately, I can’t get it to work. I hope you can help me. Here is my source code

    <?php
    				if( have_rows('slider') ):
    					$i = 0; // Set the increment variable
    					
    					echo '<div class="slider-frontpage">
    							<div class="slides">';
    							
    					// loop through the rows of data for the tab header
    					while ( have_rows('slider') ) : the_row();
    			
    						$slider_image = get_sub_field('slider_image');
    						$slider_image_mobile = get_sub_field('slider_image_mobile');
    						$slider_text = get_sub_field('slider_text');
    
    					?>
    					<div class="slide" style="background-image:url(<?php if ( $(window).width() < 576) { echo $slider_image['url']; }} else { echo $slider_image_mobile ['url'];} ?>); ">
    						<div class="slider-text-container">
    							<div class="mb-3"><?php the_sub_field('slider_text'); ?></div>
    						</div>
    					</div>
    					
    			<?php   $i++; // Increment the increment variable
    
    					endwhile; //End the loop 
    					
    					echo '</div>
    						</div>';
    					else :
    
    					// no rows found
    
    					endif; ?>

    Best regards
    Arnim

  • 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>
  • Hello @chrisdark,

    Thank you for your answer and a list of the many possibilities. The HTML solution is unfortunately out of the question for me, because I want to use my invited images as background images.

    I tried the PHP solution, but unfortunately without any result. Where do I have to place the source code? After “backround-image: url (“? I looked a little bit on the Internet. I read that the method can cause problems with caching tools.

    I like your last variant best, but I didn’t get that to work either 🙂

    How and where can I place a or the data attr? I am grateful to you for any help.

    Best regards
    Arnim

  • Another way to make a background image responsive based on images that will be uploaded is to us inline styles. Basically, you add full <style></style> elements to the page that are dynamically generated.

    I don’t have example code that I can share. Basically what you need to do is read through your available image sizes and generate @media CSS for each screen size you want to use and use the element ID and set the background image at for the media selector.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.