Lazyload background images in wp bakery js composer

Actually this is not a question but an answer.
First of all I want to say thank you to the author for such an amazing plugin!
And I want to share modifications that I have done in the js_composer template in order to lazy load background images that are specified in CSS.

In general the solution is a little bit ugly, but it works.
I have removed background from the custom CSS that was generated by js_composer and added background image inside custom_css_class.lazyloaded class as was suggested a few times in previous post by plugin author.

So, here is the modified part of vc_row.php file.
You need to copy this file from:
wp-content\plugins\js_composer\include\templates\shortcodes\vc_row.php

to:
your_child_theme\vc_templates\vc_row.php

1. Replace the following code:

$css_classes = array(
	'vc_row',
	'wpb_row',
	// deprecated
	'vc_row-fluid',
	$el_class,
	vc_shortcode_custom_css_class( $css ),
);

with the following part:

$custom_css_class = vc_shortcode_custom_css_class( $css );

$css_classes = array(
	'vc_row',
	'wpb_row',
	// deprecated
	'vc_row-fluid',
	$el_class,
);

2. Add the following code at the end:

$pattern = '~lazyload~' ;
$m = preg_match_all($pattern,$el_class,$matches);
if ( ! empty( $matches[0] ) ) {
	$pattern = '~url\((.*)\).?\!important~i' ;
	$m = preg_match_all($pattern,$css,$matches);
	if ( ! empty( $matches[0] ) ) {
		$custom_css_class = 'like_'.$custom_css_class;
		$bg_image_src = $matches[1][0];
		$url_to_remove = $matches[0][0];
		$fixed_css = str_replace($url_to_remove, "none", $css);
		$fixed_css = substr($fixed_css, 1);
		$fixed_css = '.like_'.$fixed_css;
		$lazy_load_css = $fixed_css.'.'.$custom_css_class.'.lazyloaded{background-image: url('.$bg_image_src.')!important;}' ;
		$output .= '<style type="text/css" data-type="vc_shortcodes-custom-css">'.$lazy_load_css.'</style>' ;
	}
}

$css_classes[] = $custom_css_class;

$css_class = preg_replace( '/\s+/', ' ', apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, implode( ' ', array_filter( array_unique( $css_classes ) ) ), $this->settings['base'], $atts ) );

In order activate this code all you need now is to add lazyload class in “Row Settings”->”Extra class name”.

• This topic was modified 1 year, 1 month ago by armourer1.