Repeater Responsive Images

• scorch

• January 1, 2015 at 2:48 am

Hello,

I’m using the repeater field for showing some images. Now I want to figure out how I can show different responsive images with the <picture> element.

The current code to show the images is:

<figure>
     <img src="<?php $image = get_sub_field('work_image_browser'); echo 
       $image['url']; ?>"
	  alt="<?php $image = get_sub_field('work_image_browser'); echo 
       $image['alt']; ?>" />	      				 
  </figure>

this is what I want:

<figure>
  <picture>
    <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/medium.jpg" media="(min-width: 800px)">
    <source srcset="examples/images/large.jpg">
 
    <!-- fallback -->
    <img srcset="examples/images/large.jpg" alt="alt text">
  </picture>
</figure>

Nothing works until now. Any ideas??

• WooHoo

• September 3, 2015 at 8:25 pm

Scorch,

I don’t know if you figured this one out yet, but there is an amazing plugin called ‘RICG Responsive images’. And that plugin works great with ACF.
After installing the plugin, all you have to do in your template is:

$image = get_field('your-image-field');
$size = 'medium'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
     echo wp_get_attachment_image( $image, $size );
}

(Make sure to set the return value of your image field in ACF to ‘Image ID’.)

This code returns the appropriate <img /> tag including all parameters you need (srcset).

• John Huebner

• September 4, 2015 at 6:27 am

@WooHoo Does this plugin give you the ability to specify differently cropped alternate images to use at different sizes? This is the ability that I need and what designers are demanding. Automatic inclusion of automatically cropped and resized images may be great for a simple blog but none of my clients or the designers are happy with the results and I always end up building some special interface.

• WooHoo

• September 4, 2015 at 5:14 pm

John,
The RICG plugin does not let you specify any image size or crop by itself. It takes the predefined image sizes (small, medium, full) and custom image sizes to do his work. It’s sole purpose is to deliver the image of a given size that fits within the area defined in HTML, taking retina/hi-dpi screens into account.
Because you can create your own image sizes with the add_image_size function in your functions.php, you can also specify how to crop these images. You should check the WordPress Codex to see what possibilities this function offers: https://developer.wordpress.org/reference/functions/add_image_size/
If you need more advanced sizing and/or cropping you should check other alternatives.

• John Huebner

• September 4, 2015 at 10:42 pm

I know all about how adding image sizes work, I was just curious because what I usually need to do is more complex.

For and example, someone will put text in an image, not matter how many times I tell them not to. When these images with text are reduced in size the text becomes illegible. So what they want to do is have an alternate image that is cropped differently, narrow and taller than the original with text added to that image that is legible at that size. So basically, using completely different images at different screen resolutions. The srcset attribute allows for this to be done.

I’ll have to take a look at that plugin and dig around in it. I’m thinking that this could be entirely possible using ACF to create custom fields on image media files so that users can select alternate size images in the media library for each image and size that needs to be displayed.

• WooHoo

• September 4, 2015 at 11:03 pm

Hi John,

You made this very clear, and believe it or not, I’m one of those designers (although I try to keep away form text in images, there are often better/smarter ways to do that with HTML and CSS).
But as I understand what you are trying to do, I think RICG is too limited.
On the other hand, I’m very interested in your approach with ACF.
I’ve done something similar in the past, but that was completely done in CSS with background images and before I knew about ACF. Not a very friendly solution, and every time the client wanted a new image, I had to dig into that CSS to make it happen.

• John Huebner

• September 4, 2015 at 11:21 pm

You know exactly where I’m coming from. The reason I use WP is so that I don’t need to take care of changing things like images and diging through old code every time the client wants something changed 🙂

What got me started on this was a site I recently built where the client wanted responsive background images and all of these images had text over them, real text, no in the images. When the images were reduced in size they got shorter so that the text overflowed the image. I needed to build a special tool just for them so that they could specify different background images for 6 different screen widths.

I have another client that is a bit more technically savvy that’s manually editing the srcset attributes of image elements to do the work, but this is an exception, most of my clients would not be able to accomplish it.

I like to keep things like this in mind so that the next time I can do something better, either when I’m working on a project that needs or I get enough time to do it. Getting time does not happen frequently, but winters coming, which is usually when I get more time for my own projects.