Hi Beaver Builder Team,
We are using WP Offload Media (Upload Your WordPress Media to Amazon S3 with WP Offload Media - Delicious Brains Inc ) in order to move our media files to Amazon S3 and serve them via a CDN. This works correctly with Beaver Builder, except for background images where the URL is established in the generated CSS files.
Is there a known fix for this combination, or a hook we can use to ensure the URLs are rewritten in the CSS to change from the site URL to the CDN url?
~~Potentially related to this old thread: https://community.wpbeaverbuilder.com/t/hook-for-amazon-s3-cloudfront-plugin/7624~~ Edit: These are hooks for the file locations, not for the URLs inside the files. Same plug-in, different issue.
Thank you,
In case someone runs into this. I ended up implementing a URL rewriter on the front-end via jQuery, its less than ideal, but its an OK workaround in order to find the URLs that need to be replaced.
Would still be interested in some feedback from the Beaver Builder team to determine if there’s any way to address this server side.
wws
May 28, 2024, 11:00pm
3
I’d second this request. I also have the “Add Object Version to Bucket Path” option enabled, so I’m not able to use a front-end replacement to just change the domain.
I’m using the following PHP code, which works pretty well, but it’s not a perfect solution. It needs to run every time the CSS is rendered - and I would really like it if this replacement could happen once and then the background image URLs would be stored correctly.
add_filter( 'fl_builder_render_css', function( $css, $nodes, $global_settings, $include_global ) {
$urls_find = array();
$urls_replace = array();
foreach( $nodes as $node ){
foreach( $node as $nodeKey => $nodeValue ){
if( gettype( $nodeValue ) == 'object' ){
if( isset( $nodeValue->settings->bg_image ) && !empty( $nodeValue->settings->bg_image ) ){
if( ! in_array( $nodeValue->settings->bg_image_src, $urls_find ) ){
$old_url = $nodeValue->settings->bg_image_src;
$attachment_url = wp_get_attachment_url( $nodeValue->settings->bg_image );
$base_filename = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename( $attachment_url ));
$oldUrl_components = explode( $base_filename, $old_url );
$oldUrl_end = $oldUrl_components[1];
$newUrl_components = explode( $base_filename, $attachment_url );
$newUrl_fix = $newUrl_components[0] . $base_filename . $oldUrl_end;
$urls_find[] = $old_url;
$urls_replace[] = $newUrl_fix;
}
}
if( isset( $nodeValue->settings->bg_image_large ) && !empty( $nodeValue->settings->bg_image_large ) ){
if( ! in_array( $nodeValue->settings->bg_image_large_src, $urls_find ) ){
$old_url = $nodeValue->settings->bg_image_large_src;
$attachment_url = wp_get_attachment_url( $nodeValue->settings->bg_image_large );
$base_filename = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename( $attachment_url ));
$oldUrl_components = explode( $base_filename, $old_url );
$oldUrl_end = $oldUrl_components[1];
$newUrl_components = explode( $base_filename, $attachment_url );
$newUrl_fix = $newUrl_components[0] . $base_filename . $oldUrl_end;
$urls_find[] = $old_url;
$urls_replace[] = $newUrl_fix;
}
}
if( isset( $nodeValue->settings->bg_image_medium ) && !empty( $nodeValue->settings->bg_image_medium ) ){
if( ! in_array( $nodeValue->settings->bg_image_medium_src, $urls_find ) ){
$old_url = $nodeValue->settings->bg_image_medium_src;
$attachment_url = wp_get_attachment_url( $nodeValue->settings->bg_image_medium );
$base_filename = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename( $attachment_url ));
$oldUrl_components = explode( $base_filename, $old_url );
$oldUrl_end = $oldUrl_components[1];
$newUrl_components = explode( $base_filename, $attachment_url );
$newUrl_fix = $newUrl_components[0] . $base_filename . $oldUrl_end;
$urls_find[] = $old_url;
$urls_replace[] = $newUrl_fix;
}
}
if( isset( $nodeValue->settings->bg_image_responsive ) && !empty( $nodeValue->settings->bg_image_responsive ) ){
if( ! in_array( $nodeValue->settings->bg_image_responsive_src, $urls_find ) ){
$old_url = $nodeValue->settings->bg_image_responsive_src;
$attachment_url = wp_get_attachment_url( $nodeValue->settings->bg_image_responsive );
$base_filename = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename( $attachment_url ));
$oldUrl_components = explode( $base_filename, $old_url );
$oldUrl_end = $oldUrl_components[1];
$newUrl_components = explode( $base_filename, $attachment_url );
$newUrl_fix = $newUrl_components[0] . $base_filename . $oldUrl_end;
$urls_find[] = $old_url;
$urls_replace[] = $newUrl_fix;
}
}
}
}
}
$css = str_replace( $urls_find, $urls_replace, $css );
return $css;
}, 10, 4 );
1 Like