How to create an ACF Repeater Beaver Builder shortcode and use SRCSET for images.

Time needed: 30 minutes

To create an ACF Repeater Beaver Builder shortcode and use SRCSET for responsive images, use the following steps and plugins.

1. Install Beaver Builder

   Either install the plugin through the WordPress admin area or download Beaver Builder.
   

2. Install Advanced Custom Fields

   To use the repeater option of Advanced Custom Fields, you need purchase the ACF PRO plugin. Once downloaded, install the plugin through the WordPress admin area, under Plugins > Add New > Upload Plugin.

3. Install Code Snippets

   To ease the addition of adding a shortcode, install the Code Snippets plugin. This helps with adding any additional snippets of code rather than editing the functions.php file, which could potentially cause errors on the site.

4. Create your advanced custom fields

   In the admin sidebar, go to Custom Fields > Add new. Enter your New Fields Group title, and set up the fields you want to pull into the front end of Beaver Builder. For this example, we have set up a title, description and image.
   
   NB. For the image to pull in the srcset variations and the image alt tag, make sure to select ID for the Return Format for the image source.
   
   

5. Choose the page you want the ACF Fields to show on

   Make sure to select which page you want this ACF to show on, by choosing the location from the next set of fields required of your ACF:
   

6. Set up the ACF fields

   Edit the page you want the ACF fields to show on through the WordPress page editor. After that, to add more sections, simply click the “Add Row” button. Save this page when you have the sections/fields required.

7. Set up Beaver Builder

   With Beaver Builder, the framework is built on Bootstrap. You can choose to use version 3 or 4 currently. To set this up, go to the Customise option under Appearance or on the front page logged in view. In the top wordpress admin bar, select General > Layout > CSS Framework. Choose from the option of Minimal Bootstrap 3 or 4, or Full Bootstrap 3 or 4. However, for this example, either versions will work.

8. Create the shortcode

   The shortcode solution for connection the acf repeater beaver builder srcset is the following…
   
   function my_acf_repeater() {
if( have_rows('repeater_name') ):
while ( have_rows('repeater_name') ) : the_row();
$html.= '<div class="repeater-wrapper">';
$html.= '<div class="col-sm-12 col-md-6 repeater image">';
$image = get_sub_field('repeater_image');
if( $image )}
$html.= wp_get_attachment_image( $image, 'full' );
}
$html.= '</div> ';//image
$html.= '<div class="col-sm-12 col-md-6 repeater text">';
$html.= '<div class="content">';
$html.= '<h2>' . get_sub_field('repeater_heading') . '</h2>';
$html.= get_sub_field('repeater_copy',false,false);
$html.= '</div>';//content
$html.= '</div>';//col
$html.= '</div>';//row
endwhile;
endif;
return $html;
}
add_shortcode('acf_repeater', 'my_acf_repeater');

9. Set up the fields for the page in Beaver Builder

   Either go to the front end view of the page on the website and click Beaver Builder, or go the page editor option in the WordPress admin area and click the Launch Beaver Builder button.
   
   Once in the Beaver Builder editor, click the + button and under the modules option select HTML. After that, simply enter the shortcode created. For our example, this will be:
   [acf-repeater]
   
   Click Save and you should see the ACF elements now showing. Next, click Done top right on the Beaver Builder page editor, and then Publish. Your ACF field repeater will now be showing on the page.

10. Styling the repeater sections

    Lastly, to make sure the copy and title sit vertically centred to the adjacent image, add the following css to your style.css file. This css uses the *flexbox layout module. Furthermore, included in the below css is the code that makes alternate sections switch positions for the image and copy. For instance, odd rows are image left, copy to the right, but even rows are copy to the left and image right.
    .repeater-wrapper:not(:last-of-type) {
padding-bottom: 50px;
}
.repeater-wrapper .repeater {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-ms-flex-align: center;
-ms-flex-pack: center;
background-color: #51bcb6;
}
.repeater-wrapper .repeater.image{
padding:0 ;
}
.repeater-wrapper .repeater.text{
padding: 0;
color: #fff;
}
.repeater-wrapper .repeater.text .content{
padding:0 20px
}
.repeater-wrapper .repeater .content{
width: 100%;
}
.repeater-wrapper .repeater.image img{
width: 100%;
}
@media (min-width:768px){
.repeater-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.repeater-wrapper:not(:last-of-type) {
padding-bottom: 100px;
}
.repeater-wrapper:nth-of-type(even){
flex-direction: row-reverse;
}
.repeater-wrapper .repeater.image img{
width: 100%;
object-fit: cover;
height: fit-content;
}

}
@media (max-width:768px){
.repeater-wrapper .repeater.text .content{
padding:0 20px 20px;
}
}