2 options for responsive images in repeat field

• 

  • cuartostudio

  • July 6, 2017 at 5:03 am

  Hello,

  I need to have 2 options for images in repeat field and show it depend of the screen resolution.

  Example:

  Show image-1 if the screen resolution is less than 640px. If the resolution is bigger, show image-2.

  Any idea?

  Thank you very much!!
• 

  

  • markbloomfield

  • July 6, 2017 at 5:20 pm

  Hello @cuartostudio

  Ideally, you should use srcset for this (explained here). But if this isn’t an option, you can also use a bit of Javascript for this:

  Your HTML could look something like this:

  <img src="<?php echo get_field('image'); ?>" data-small-src="<?php echo get_field('image_small'); ?>" />

  Then the Javascript (jQuery):

  
  var windowWidth = $(window).width();
  
  if (windowWidth <= 768) {
    $('img[data-small-src]').each(function() {
      var small_src = $(this).data('small-src');
      $(this).attr('src', small_src);
    });
  }
  

  What that basically says, is if the window width is less than 768 (or whatever width you want this to happen), then find all the <img> tags with the data-small-src data attribute, loop through them and update its src value, with the ‘small-src’ value which will be the URL of the smaller image.

  You could optionally put that function into a $(window).resize event too so that it swaps out the images based on image size, but then you’ll need to add an else to that if statement so that it reverts back to the large size if necessary.

  Hope that helps?
• 

  • cuartostudio

  • July 15, 2017 at 6:42 am

  Hi @markbloomfield

  Thanks for your answer

  I have and idea it’s possible to do this

  With just PHP, show some field (can be whatever, text, image, etc) when the screen resolution is less than 640px and hide when is more than that.

  Let me know and thank you very much!
• 

  

  • markbloomfield

  • July 17, 2017 at 5:23 pm

  Something like:

  
  <div class="show-on-desktop hide">
    Visible on Desktop
  </div>
  
  <div class="show-on-mobile hide">
    Visible on Mobile
  </div>
  

  and then your JS would be:

  
  var windowWidth = $(window).width();
  var $desktopVisible = $('.show-on-desktop');
  var $mobileVisible = $('.show-on-mobile');
  
  if (windowWidth <= 640) {
    $desktopVisible.addClass('hide');
    $mobileVisible.removeClass('hide');
  } else {
    $desktopVisible.removeClass('hide');
    $mobileVisible.addClass('hide');
  }
  

  CSS:

  
  .hide {display:none;}
  

  Like so?
• 

  • mstates

  • March 22, 2019 at 5:22 am

  This is a beautiful approach to this, and I really like the idea for “srcset” being the idea.

  How would one achieve? I’ve been struggling…

  Create two different image fields, and somehow set them both into variables? One image for mobile, and the other for Desktop? I need them to be two different images (different sizes).
• 

  

  • John Huebner

  • March 22, 2019 at 6:27 am

  This is something that I just did recently on a site and it might help you. In my case I wanted the images to be responsive in the same way that images added to the content area are made responsive, so I make WP do the work for me.

  You’ll need to adjust this because I only work with image ID values, but it will give you the idea.

  
  $image_id = get_field('YOUR IMAGE FIELD', false, false);
  $image_size = 'YOUR IMAGE SIZE'; // set this to the larges image you want shown
  $image = wp_get_attachment_image_src($image_id, $image_size);
  $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
  if (!$image_alt) {
    $image_alt = get_the_title($post->ID);
  }
  $image_tag = '<img src="'.$image[0].'" width="'.$image[1].
                '" height="'.$image[2].'" alt="'.$image_alt.
                '" class="size-'.$image_size.
                ' wp-image-'.$image_id.'" />';
  $image_tag = wp_make_content_images_responsive($image_tag);
  echo $image_tag;
  

  The important part is setting the class of "wp-image-{$image_id}" which is all that WP uses to add the srcset.