Today, we will show you how you can have different versions for images for your ACF Fields within WordPress. This will work for images, ACF Repeaters and so on…

Recently, we built a website and we used the ACF Repeater field to create the contents for a Carousel using Bootstrap. For this particular job, we needed to use different images for the desktop and mobile version.

So first things first, create a field for ‘Desktop Hero Image’ and a separate field for ‘Mobile Hero Image’.

For our particular example, we ended up with an ACF Repeater as below:

For the full code for a Bootstrap 4 Carousel in WordPress, see the code at the end of this post.

Now, we’ll show you what we did to have a desktop and mobile version for the hero image. If you’ve already created this, you might have a field like this:

    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);"</span>

What we need to do is amend this and create a data attribute for both the desktop and mobile version, as per the below example:

    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_hero_image'); ?>"  data-lrg-src="<?php the_sub_field('desktop_hero_image'); ?>"></span>

Next, we need to add some jQuery code to change the hero image based on the browser width. In our example, we wanted to change the hero image if the window width is equal to or less than 575px. To do this, we added the below jQuery code:

<code class="language-JS">
    // Desktop/Mobile Hero Images

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

One thing to note is that the above code will only work on page load. So if you are resizing the browser, the above code will not change the image. We can, however, fix this by using the resize function. To do this, simply add the below code:

<code class="language-JS">
    // Desktop/Mobile Hero Images + Resize Function

    $(window).bind('resize',function(){

        var windowWidth = $(window).width();

        if (windowWidth <= 575) {
          $('[data-small-src]').each(function() {
            var small_src = $(this).data('small-src');
            $(this).css({'background-image':'url('+small_src+')'});
          });
        } else {
          $('[data-lrg-src]').each(function() {
            var lrg_src = $(this).data('lrg-src');
            $(this).css({'background-image':'url('+lrg_src+')'});
          });            
        }

    });

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

Well, we hope this has helped you.

If you are wanting to know how to create a basic carousel using Bootstrap 4 with an ACF Repeater, please refer to the below code:

	<!-- Home Carousel -->
	<div id="homepage-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-touch="true" data-interval="6000">
		<ul class="carousel-indicators">
			<?php 
				$count = 0;
				while( have_rows('hero_carousel') ): the_row();
					if ($count == 0) {
						echo '<li data-target="#homepage-carousel" data-slide-to="0" class="active"></li>';
					} else {
						echo '<li data-target="#homepage-carousel" data-slide-to="'.$count.'"></li>';
					}
				$count++; endwhile;
			?>				
		</ul>
		<div class="carousel-inner" role="listbox">
			<?php
				if( have_rows('hero_carousel') ): $counter = 1; ?>

				    <?php while ( have_rows('hero_carousel') ) : the_row(); ?>

						<div class="carousel-item <?php echo ($counter==1)?'active':''; ?>">
							<div class="container">
						      <div class="title-container">
						            <div class="headline animated fadeInLeft">
						            	<div class="row">
						            		<div class="col-md-8">
								                <h1><?php the_sub_field('title'); ?></h1>
								                <p class="txt-headline"><?php the_sub_field('text'); ?></p>
								                <?php if(get_sub_field('button_text')) { ?>
								                	<a href="<?php the_sub_field('button_url'); ?>" class="btn"><?php the_sub_field('button_text'); ?></a>
								                <?php } ?>
								            </div>
						            	</div>
						            </div>
						       </div>
						    </div>
						    <div class="homepage-overlay">   					
					        	<span class="hero-slider" style="background-image: url(<?php the_sub_field('image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_image'); ?>"  data-lrg-src="<?php the_sub_field('image'); ?>"></span>
					        </div>
						</div>

				    <?php $counter++; endwhile;
				else : endif; 
			?>
		</div>				
	</div><!-- #Home Carousel -->

As always, we hope you enjoyed this tutorial... If this has helped you, leave a comment below! Happy Coding! O_o