Home › Forums › Front-end Issues › 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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.