Description
This action hook is run by the builder_module_render action and tells a specific module to render. The MODULE portion of the name refers to how each module has its own version of this action where MODULE is replaced with the specific module's variable.
Possible Uses
This action gives direct access to the entry point for a specific module's rendering process. Adding a higher priority and lower priority function would allow for adding additional wrappers around specific modules. The default action function could even be removed to prevent all instances of the module from rendering on a layout or to substitute a different set of rendering code.
Default Attached Functions
- Priority 10 - The specific module's render method
Parameters
- $fields
- (array) (required) Contains data necessary to render a module.
- Default: None
Example Use
A good example would be to show how to do something most designers are excited to do with Builder, add rounded corners. This example shows how to implement the CSS Liquid Round Corners technique on all Image modules. A zip file for an extension that includes the code, images, and styling needed to fully implement this concept is below, but first, here is how the action was used to implement this example:
add_action( 'builder_module_filter_widths', 'filter_module_widths' );
add_action( 'builder_module_render_image', 'open_module_border', 0 );
add_action( 'builder_module_render_image', 'close_module_border', 20 );
function filter_module_widths( $fields ) {
if ( 'image' === $fields['module'] ) {
$fields['widths']['container_width'] -= 50;
$fields['widths']['content_width'] -= 50;
}
return $fields;
}
function open_module_border( $fields ) {
?>
<div class="builder-module-rounded-corners">
<div class="builder-module-rounded-corners-top"><span></span></div>
<div class="builder-module-rounded-corners-content">
<?php
}
function close_module_border( $fields ) {
?>
</div>
<div class="builder-module-rounded-corners-bottom"><span></span></div>
</div>
<?php
}
Note that the builder_module_filter_widths action is also used in order to shrink the module size down. This is to allow the styling to pad the module inside the rounded corners box.
The key to getting the opening and closing elements in the right place is by using the 0 and 20 inside the add_action function calls. For more details on how this works, read the priorities page.
Since this type of solution uses solid images, HTML structure, and CSS, it is cross-browser compatible and doesn't require JavaScript. However, it will not adapt to just any style. If a different background color or rounded corner box colors are wanted, the images will need to be recolored by hand in a image editor.
Download the example extension
Other rounded corner solutions may better fit your project. This solution was used since it is popular and has the most flexibility since the size of the box is not limited in either dimension. The goal of this example is to show how Builder is flexible enough to allow for any type of solution while showing how such a solution can be implemented.