I’ve been trying to find a solution for a few days, but nothing was clear when searching online. Maybe I wasn’t using quite the right search terms, but I wanted to share this with others who may come across this issue.
I wanted to use the Beaver Builder layout I had created, but using ACF, and the only solution I could get it work in was an html module. This was to display an image in one column and content in the other, and for them to reverse in the next (even) row, switching position. The image was only pulling the image itself, and no other data, such as srcset or alt tag. I’d rather use srcset than creating media queries for the image sizes, and as Wordpress creates the srcset images already, it would make sense to use that facility.
This was the repeater code I used in the HTML module to start with, which would only pull in one version of the image and at a specified size:
[wpbb-acf-repeater name='partner']
<div class="partner">
<div class="col-sm-12 col-md-6 image">
<img src="[wpbb post:acf type='image' name='custom_image' image_size='full']">
</div>
<div class="col-sm-12 col-md-6 text">
<div class="content">
<h2>[wpbb post:acf type='text' name='name']</h2>
[wpbb post:acf type='text' name='intro']
</div>
</div>
</div>
[/wpbb-acf-repeater]
In the end, I had to create a custom shortcode to get the image to show srcset versions and an alt tag, as referenced in the ACF documentation here. The shortcode I created was the following…
function my_acf_repeater() {
if( have_rows('partner') ):
while ( have_rows('partner') ) : the_row();
$html.= '<div class="wrapper">';
$html.= '<div class="col-sm-12 col-md-6 image">';
$image = get_sub_field('custom_image');
if( $image ) {
$html.= wp_get_attachment_image( $image, 'full' );
}
$html.= '</div>';//image
$html.= '<div class="col-sm-12 col-md-6 text">';
$html.= '<div class="content">';
$html.= '<h2>' . get_sub_field('name') . '</h2>';
$html.= get_sub_field('intro',false,false);
$html.= '</div>';//content
$html.= '</div>';//col
$html.= '</div>';//row
endwhile;
endif;
return $html;
}
add_shortcode("acf_repeater", "my_acf_repeater");
I hope this is of some help to others and continue to enjoy developing using BB and only recently ACF too.