How do you upload the different row background image for medium/small mobile devices? How do you upload different size of same row background image for smooth responsive effect? In this tutorial I am showing the complete steps about it. Note: this tutorial will work on any WordPress themes which are supporting the Beaver Builder plugin.

Adding Two Row Background Image Upload Fields

Adding two photo upload fields into row settings form with fl_builder_register_settings_form filter. Open the functions.php file of your theme and add the following PHP snippets.

Adding two photo fields

add_filter( 'fl_builder_register_settings_form', 'probb_add_multiple_background_photo', 1005, 2 );
function probb_add_multiple_background_photo( $form, $slug )
{
	//* Checking your are editing the row
	if( $slug == 'row' )
	{
		//* Excluding the default Photo field
		$bg_image['bg_image'] = array_shift( $form['tabs']['style']['sections']['bg_photo']['fields'] );

		//* Creating 2nd photo field variable as array
		$bg_image_2 = array(
			'bg_image_2' 	=> array(
				'type' 			=> 'photo',
				'label' 		=> __( 'Photo for medium devices', 'fl-builder' ),
				'show_remove' 	=> true,
				'preview'         => array(
					'type'            => 'none',
				),
				'connections'	=> array( 'photo' )
			)
		);

		//* Creating 3rd photo field variable as array
		$bg_image_3 = array(
			'bg_image_3' 	=> array(
				'type' 			=> 'photo',
				'label' 		=> __( 'Photo for small devices', 'fl-builder' ),
				'show_remove' 	=> true,
				'preview'         => array(
					'type'            => 'none',
				),
				'connections'	=> array( 'photo' )
			)
		);

		//* Appending the photo fields with existing row settings form
		$form['tabs']['style']['sections']['bg_photo']['fields'] = array_merge( $bg_image, $bg_image_2, $bg_image_3, $form['tabs']['style']['sections']['bg_photo']['fields'] );
	}

	//* Returing the form
	return $form;
}

Rendering Row Background Images via CSS

Displaying the uploaded background image at front-end via CSS. With this filter fl_builder_render_css to modify the row CSS that is compiled and cached for each builder layout. Again open the functions.php of your theme and add the following PHP snippets.

Filter the row css

add_filter( 'fl_builder_render_css', 'probb_filter_row_css',1000, 3 );
function probb_filter_row_css( $css, $nodes, $global_settings )
{
	foreach( $nodes['rows'] as $row )
	{
		$settings = $row->settings;

		if( 'photo' == $settings->bg_type && ! empty( $settings->bg_image_2 ) )
		{
			$css .= '@media (max-width:' . $global_settings->medium_breakpoint . 'px)
					{
						.fl-node-' . $row->node . ' > .fl-row-content-wrap {
							background-image: url(' . $row->settings->bg_image_2_src . ');
						}
					}';
		}

		if( 'photo' == $settings->bg_type && ! empty( $settings->bg_image_3 ) )
		{
			$css .= '@media (max-width:' . $global_settings->responsive_breakpoint . 'px)
					{
						.fl-node-' . $row->node . ' > .fl-row-content-wrap {
							background-image: url(' . $row->settings->bg_image_3_src . ');
						}
					}';
		}
	}

	return $css;
}

All are done. Now follow the video for next steps.