Preview API
This is a technical summary of what is offered by our Preview API and how to create your own Preview integration.
The Preview refers to the display of the page or document in Cornerstone.
Before Preview Frame
cs_before_preview_frame is the action that is fired before the Preview starts rendering. This is a useful action to hook into if you have special scripts or flags to call to better integrate into Cornerstone. The following is a sample of our WooCommerce integration that adds in the WooCommerce cart fragments.
add_action('cs_before_preview_frame', function() {
if (class_exists( 'WooCommerce' )) {
wp_enqueue_script( 'wc-cart-fragments' );
}
});Preview is Rendering
The checking the action cs_element_rendering will determine if you are in the preview. This can be useful if you are displaying a different look and feel to an element when the preview is where the element is being viewed.
$isPreview = did_action('cs_element_rendering');@since Cornerstone 7.5.11
There is also a helper function for this called is_cornerstone_preview that does the same thing as the above.
$isPreview = is_cornerstone_preview();Preview Output Zone Priority
cs_preview_output_zone_priority is the filter to change to alter the Preview content zone overwrite. Certain plugins might need to also hook into the_content and with this filter you can change that priority. The default is -9999999.
add_filter('cs_preview_output_zone_priority', function() {
return 11;
});Preview rendered
@since Cornerstone 7.5.11
The JS event cs-preview-render will dispatch every time Cornerstone has had a change with it's document. This can be useful if your custom element should resize based on a possible change to the document.
window.addEventListener('cs-preview-render', function() {
console.log('Cornerstone has rendered');
});Advanced Preview Features
cs_render_as_preview_valid
This filter allows you to bypass the special preview rendering features and is useful if your custom element needs to always have a complete rendering of the inner child elements.
Example render method using this
// Prevent special preview rendering
add_filter('cs_render_as_preview_valid', '__return_false', 100);
// Render HTML to elements key
$data['elements'] = base64_encode(cs_render_child_elements($data, 'cs_custom_html_element'));
// Remove preview valid filter
remove_filter('cs_render_as_preview_valid', '__return_false', 100);See something inaccurate? Let us know