Blurring Row Background Images

Someone asked if it was possible to blur a background-image using filters for Beaver Builder rows. Due to the way the background-container is used and all elements are positioned into it, when adding the filter:blur() properties as a class, all contents will be blurred out. So I decided to go another route.

Using jQuery a selection of the properties are copied over to a newly inserted element at the bottom of the parent-container, so behind the background. It matches all appropriate styles automatically and adds a few that are needed to fit the blurred image behind the container. It then removes the image from the initial container.

There are a few things:

  1. The blurred version of the image will probably be slightly bigger than the original because the borders are blurred out too. We enlarge the image by 10% and hide 5% on all sides out of view.
  2. It might have a slight delay, it executes on document-ready.
  3. Because the borders need to be hidden the containing container needs to hide the overflow. When editing the page this is a problem, because the icons to edit modules and rows are also outside of the container. So the blur effect is only applied when we are NOT in the editor.
  4. When saving or cancelling an edit, the page is not reloaded and does not display the blur immediately. Just hit reload and the blur effect is applied. Visitors should see the blur applied normally.

You only need to do three things to apply the blur:

  1. Copy the code that is below to your “Global Settings > Javascript” tab.
  2. Add a row-background-type ‘Image’ and an image (can be a connector if you want to).
  3. Add a class-name called ‘blureffect’ to that row on the ‘Advanced’ tab.

Save, reload and watch it happen. Any row that has the class ‘blureffect’ applied to have that blur, no matter what the image is.

//     rowblur.js for Beaver Builder rows
//     (c) 2018 Didou Schol / BadabingBreda
//     rowblur.js may be freely distributed under the MIT license.
//
//     add 'blureffect' as a class to the row and set the background-type to 'image'
//     copy the code below into the "Global Settings > Javascript" tab and the rest will follow
//     blur effect is hidden on fl_builder page, and needs a reload after page is saved.
//     When normally browsing the site loads normally.

(function($) {

    function getCSSProps( element , props ) {

        let $this = $(element);
        var values = {};
        for (let i = 0; i < props.length ; i++) {
            values[props[i]] = $this.css( props[i]);
        }
        return values;
    }

    $('document').ready( function() {

    	// perform code only when not in editor
    	if (!/[?&]fl_builder/.test(location.search)) {

	    	var blurRows = $('.fl-row-bg-photo.blureffect');

	    	for (let i = 0; i < blurRows.length; i++ ) {
	    		// current wrap
	    		let $currentWrap = $( blurRows[i] ).find('.fl-row-content-wrap');
	    		// get the properties
		        let cssProps = getCSSProps( $currentWrap , ['background-image', 'background-repeat', 'background-position', 'background-attachment', 'background-size']);

		        // add an element after the content-wrap
		        $( blurRows[i] ).css({ position: 'relative', overflow: 'hidden' }).append('<div class="blurtainer"></div>')
		        // change the current wrap, hide it's image and set the z-index
		        $currentWrap.css({backgroundImage: 'none', zIndex: 1});
		        // clone the properties of the original wrap and join them with some new ones, make sure to set z-index to one less than original wrap
		        $( blurRows[i] ).find('.blurtainer').css( Object.assign(cssProps,{filter: 'blur(5px)', position: 'absolute', zIndex: '0', top:'-5%', left: '-5%',width: '110%', height: '110%'}) );

	    	}

    	}
    });

}(jQuery));
Posted in

Beaverplugins

Web ninja with PHP/CSS/JS and Wordpress skills. Also stand-in server administrator, father of four kids and husband to a beautiful wife. Always spends too much time figuring out ways to do simple things even quicker. So that you can benefit.

Leave a Comment