Slider with if/else picture check

• Varilux2k

• December 18, 2020 at 3:58 am

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

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

• Varilux2k

• December 20, 2020 at 8:33 am

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

• John Huebner

• December 21, 2020 at 1:07 am

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.