Adding Random Background Image into Row
Do you want to display the background image randomly in Beaver Builder Row? You can set only one image as a background image in Beaver Builder row. In this article I am showing how you will upload the multiple photos from row settings form and randomly display the image (every page refresh image will be changed) at front-end.
Adding Fields into Row Setting Form
Editing the row settings form and adding some extra new fields there. Beaver Builder have a filter fl_builder_register_settings_form. So you can edit the default settings form as per your requirement. I added the following PHP snippets in functions.php file of my active theme.
Editing the Settings Form
add_filter( 'fl_builder_register_settings_form', 'probb_row_settings_from', 1020, 2 );
function probb_row_settings_from( $form, $slug )
{
if( $slug === "row" )
{
$form['tabs']['style']['sections']['background']['fields']['bg_type']['options']['rand_bg'] = _x( 'Random', 'Background type.', 'fl-builder' );
$form['tabs']['style']['sections']['background']['fields']['bg_type']['toggle']['rand_bg'] = [ 'sections' => [ 'bg_photos', 'bg_color', 'bg_overlay' ] ];
$form['tabs']['style']['sections']['bg_photos'] = [
'title' => __('Background Photos', 'fl-builder'),
'fields' => [
'bg_images' => [
'type' => 'form',
'label' => __('Photo', 'fl-builder'),
'form' => 'random_background_image_form',
'preview_text' => 'bg_img_src',
'multiple' => true
],
'rbg_repeat' => [
'type' => 'select',
'label' => __('Repeat', 'fl-builder'),
'default' => 'none',
'options' => [
'no-repeat' => _x( 'None', 'Background repeat.', 'fl-builder' ),
'repeat' => _x( 'Tile', 'Background repeat.', 'fl-builder' ),
'repeat-x' => _x( 'Horizontal', 'Background repeat.', 'fl-builder' ),
'repeat-y' => _x( 'Vertical', 'Background repeat.', 'fl-builder' )
],
'help' => __('Repeat applies to how the image should display in the background. Choosing none will display the image as uploaded. Tile will repeat the image as many times as needed to fill the background horizontally and vertically. You can also specify the image to only repeat horizontally or vertically.', 'fl-builder'),
'preview' => [
'type' => 'none'
]
],
'rbg_position' => [
'type' => 'select',
'label' => __('Position', 'fl-builder'),
'default' => 'center center',
'options' => [
'left top' => __('Left Top', 'fl-builder'),
'left center' => __('Left Center', 'fl-builder'),
'left bottom' => __('Left Bottom', 'fl-builder'),
'right top' => __('Right Top', 'fl-builder'),
'right center' => __('Right Center', 'fl-builder'),
'right bottom' => __('Right Bottom', 'fl-builder'),
'center top' => __('Center Top', 'fl-builder'),
'center center' => __( 'Center', 'fl-builder' ),
'center bottom' => __('Center Bottom', 'fl-builder')
],
'help' => __('Position will tell the image where it should sit in the background.', 'fl-builder'),
'preview' => [
'type' => 'none'
]
],
'rbg_attachment' => [
'type' => 'select',
'label' => __('Attachment', 'fl-builder'),
'default' => 'scroll',
'options' => [
'scroll' => __( 'Scroll', 'fl-builder' ),
'fixed' => __( 'Fixed', 'fl-builder' )
],
'help' => __('Attachment will specify how the image reacts when scrolling a page. When scrolling is selected, the image will scroll with page scrolling. This is the default setting. Fixed will allow the image to scroll within the background if fill is selected in the scale setting.', 'fl-builder'),
'preview' => [
'type' => 'none'
]
],
'rbg_size' => [
'type' => 'select',
'label' => __('Scale', 'fl-builder'),
'default' => 'cover',
'options' => [
'auto' => _x( 'None', 'Background scale.', 'fl-builder' ),
'contain' => __( 'Fit', 'fl-builder'),
'cover' => __( 'Fill', 'fl-builder')
],
'help' => __('Scale applies to how the image should display in the background. You can select either fill or fit to the background.', 'fl-builder'),
'preview' => [
'type' => 'none'
]
]
]
];
}
return $form;
}
FLBuilder::register_settings_form('random_background_image_form', [
'title' => __('Add Photo', 'fl-builder'),
'tabs' => [
'general' => [
'title' => __('General', 'fl-builder'),
'sections' => [
'general' => [
'title' => '',
'fields' => [
'bg_img' => [
'type' => 'photo',
'label' => __('Photo', 'fl-builder'),
'preview' => [
'type' => 'none'
],
'show_remove' => true
]
]
]
]
]
]
]);
Explaining the Above Code
Line no 7-8: Adding new option “Random” into Background Type drop down.
Line no 9: Adding new section “Background Photos”. It is appearing when you are selecting the Random option.
Line no 12-18: Adding the multiples photo upload form.
Line no 19-83: Adding the following fields: Background Repeat, Background Position, Background Attachment Type, Background Size. These fields are globally applying on all Background Photos.
Line no 88-110: Adding the Settings Form for multiple photo upload field.
Randomly Add the Image into Row
Open the functions.php file of your active theme and add the following PHP snippets. It will pickup one image randomly and add into row as a background image. Every page refresh background image will change.
Randomly Display The Background Image
add_action( 'fl_builder_before_render_row', 'probb_add_random_background_photo', 1007, 2 );
function probb_add_random_background_photo( $row, $groups )
{
$style = $style2 = '';
if( is_object( $row ) )
{
$settings = $row->settings;
if( $settings->bg_type == "rand_bg" )
{
if( !empty( $settings->bg_color ) )
{
$style .='background-color: #'. $settings->bg_color .'; background-color: rgba('. implode(',', FLBuilderColor::hex_to_rgb($settings->bg_color)) .','. $settings->bg_opacity/100 .');';
}
if (is_array( $settings->bg_images ) )
{
$bg_images = $settings->bg_images;
$rand_num = mt_rand( 0, ( sizeof( $bg_images ) - 1 ) );
$style .= 'background-image: url('. $bg_images[$rand_num]->bg_img_src .'); background-repeat: '. $settings->rbg_repeat .'; background-position: '. $settings->rbg_position .'; background-attachment: '. $settings->rbg_attachment .'; background-size: '. $settings->rbg_size .';';
}
if( !empty($settings->bg_overlay_color) )
{
$style2 = '.fl-node-'. $row->node .' > .fl-row-content-wrap::after { background-color: #'. $settings->bg_overlay_color .'; background-color: rgba('. implode(',', FLBuilderColor::hex_to_rgb($settings->bg_overlay_color)) . ','. $settings->bg_overlay_opacity/100 .');}';
}
if( $style != '' || $style2 != '' )
{
echo '';
}
}
}
}
add_filter( 'fl_builder_row_attributes', function ( $attrs, $row ) {
if( is_object( $row ) )
{
$settings = $row->settings;
if( $settings->bg_type == "rand_bg" && !empty($settings->bg_overlay_color) )
{
$attrs['class'][] = 'fl-row-bg-overlay';
}
}
return $attrs;
}, 20, 2 );