Hook for Amazon S3 / Cloudfront Plugin

Hi Beaver Builder Team:

Our client’s site uses the Amazon S3 and Cloudfront plugin to copy files from the Media Library to Amazon S3 (https://wordpress.org/plugins/amazon-s3-and-cloudfront/).

(They’re running staging and production instances in an auto-scaling clustered environment, so file storage in the “/content/uploads” directory is ephemeral and not shared across servers.)

Beaver Builder worked fine on a local dev installation. But when we moved it to staging, we encountered a 403 error that prevented the CSS and JavaScript files from loading.

The S3 plugin code runs whenever certain Wordpress hooks are called, attachments are saved or the media browser is used.

Would it be possible to provide a hook in Beaver Builder that would trigger the S3 plugin code to run?

Best wishes,

Frank

Hi Frank,

Have you seen this topic and does it resolve your issue.

Thanks,
Danny

Hi Danny,

That post actually prompted us to ask for a new hook.

We’re getting a 403 error because the S3 plugin isn’t allowing us to write the files to the server.

We’re working with a team that is familiar with the S3 plugin. I could share their contact information if it will help to clarify the issue.

Best wishes,

Frank

[Content Hidden]

Hi Frank,

I’ve already assigned another member of the team to assist you with your concern.

Thanks,
Danny

[Content Hidden]

Hi Andres,

The FLBuilderModel::get_upload_dir() and FLBuilderModel::get_cache_dir() methods are used to get the paths for both reading and writing.

Each has it’s own filter that I imagine you could use to change the paths. Those are fl_builder_get_upload_dir and fl_builder_get_upload_dir.

For cropping photos, we’re letting WordPress handle writing to files via $editor->save( $cropped_path[‘path’] );. The $editor var is an editor instance returned from wp_get_image_editor().

For writing CSS/JS cache we’re just using file_put_contents.

I’m not really familiar with the S3 plugin, so I don’t really have any ideas as to what kind of integration could be done. Hopefully the above will point you guys in the right direction. Let me know how it goes!

Justin

[Content Hidden]

Hey Andres,

You’re welcome! We’re always opening to adding hooks. When you say “post-save action hook” do you mean after the CSS/JS cache is saved? Do you have an idea as to what you would need that hook to make available to you to get this working?

Let me know.

Justin

Hi Justin,

Yes, we would need to push the CSS / JS cache to Amazon Web Services after the files are saved.
(The AWS account is configured so we can’t write to a filesystem.)

Ideally, the hook could give us parameters of what we just saved. A code snippet would suffice for testing purposes.

Thanks for your help!

Frank

Hi Frank!

I hope you don’t mind me chiming in but we too are planning on using this plugin, and hadn’t yet considered the cached assets URLs…

I’m just wondering whether you use the pro version of S3 offload? It seems like they might have added (in a new release) a way to only serve certain assets from Amazon. This is definitely a workaround, but you might be fine with just serving images/files from S3/CloudFront and JS/CSS from the web server.

https://deliciousbrains.com/wp-offload-s3/doc/assets-addon/

If you’re not a pro user, I will at some point over the next week be testing this - so I’ll try and remember to post back with my findings so you know whether to purchase it or not!

Of course, if you can hook in and write the cached stuff to S3 then rewrite URLs - then great!

Hi DB,

We tried the S3 pro version, but we weren’t able to sync new directories with AWS.
(The default setting is to ignore folders outside the Media Library.)

We reached out to support and they recommended that we:

use the "as3cf_assets_locations_in_scope_to_scan" filter to customize or exclude custom directories from the assets plugin scan: Resource Link

It may help to see how the filter is being called- you can find this in the “get_file_locations()” method in “amazon-s3-and-cloudfront-assets/classes/amazon-s3-and-cloudfront-assets.php”.

Best wishes,

Frank

Hi Frank,

I went ahead and added two hooks for you, fl_builder_after_render_css and fl_builder_after_render_js.

For testing, you can add those at the end of the FLBuilder::render_css and FLBuilder::render_js methods.

Once you have those in place, you can use them like so…

function my_builder_after_render_css() {
	$asset_info = FLBuilderModel::get_asset_info();
	$path = $asset_info['css'];
	$url = $asset_info['css_url'];
}
add_action( 'fl_builder_after_render_css', 'my_builder_after_render_css' );

function my_builder_after_render_js() {
	$asset_info = FLBuilderModel::get_asset_info();
	$path = $asset_info['js'];
	$url = $asset_info['js_url'];
}
add_action( 'fl_builder_after_render_js', 'my_builder_after_render_js' );

Does having access to the cached paths and urls help with what you need to do?

Let me know if you have any questions about that.

Justin

Thanks Justin,
How would I get access to the hooks you’ve added?

Hi Frank,

I’ve committed those for the next release, but it’s not out yet. For now, you’ll have to add those manually. That can be done in classes/class-fl-builder.php.

do_action( 'fl_builder_after_render_css' ); can be added after line 2035 file_put_contents($asset_info['css'], $css);.

do_action( 'fl_builder_after_render_js' ); can be added after line 2301 file_put_contents($asset_info['js'], $js);.

Let me know if you have any questions about that.

Justin