Pulse Of The Blogosphere

“Truncate text to these many characters” Bricks Control

—

por

admin
en

Bricks provides a :<number> dynamic data tag modifier that can be used to limit the amount of text by the specified number of words.

Ex.:

{author_bio:20}

As of Bricks 1.6 beta, there is no similar modifier for limiting text by a certain number of characters.

This Pro tutorial provides the steps to add a number-type of custom control (input field) for Bricks‘ Heading, Basic Text, Rich Text, Post Title, Post Excerpt and Post Content elements and trim/truncate the text output to the specified characters if the field is not empty.

We shall also add ... at the end on the frontend where needed i.e., if the length of the original text is greater than the number of specified characters.

What is involved:

  • Specifying the desired elements for which the control should be added in an array, looping through it and for each, adding Bricks’ control_groups and controls filters.
  • In the function hooked to control_groups, adding a “Custom Controls” control group to the CONTENT tab.
  • In the function hooked to controls, adding a number-type of control.
  • Using bricks/element/settings filter to truncate the element’s text to the input number and adding ellipses if necessary.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

// Add "Custom Controls" control group and "Truncate text to these many characters" control to Heading, Basic Text, Rich Text, Post Title, Post Excerpt and Post Content elements.
add_action( 'init', function() {
  $names = [ 'heading', 'text-basic', 'text', 'post-title', 'post-excerpt', 'post-content' ];

	foreach( $names as $name ) {
		add_filter( "bricks/elements/{$name}/control_groups", 'bl_add_control_groups_19Nov2022' );

		add_filter( "bricks/elements/{$name}/controls", 'bl_add_controls_19Nov2022' );
	}
}, 30 );

function bl_add_control_groups_19Nov2022( $control_groups ) {
	$control_groups['custom_controls'] = [
		'tab' => 'content',
		'title' => esc_html__( 'Custom Controls', 'my_plugin' ),
	];

	return $control_groups;
}

function bl_add_controls_19Nov2022( $controls ) {
	$controls['truncate_text_to_characters'] = [
		'tab' => 'content',
		'group' => 'custom_controls',
		'label' => esc_html__( 'Truncate text to these many characters', 'my_plugin' ),
		'type' => 'number',
	];

	return $controls;
}

add_filter( 'bricks/element/settings', function( $settings, $element ) {
	if ( isset( $element->settings["truncate_text_to_characters"] ) ) {
    // store the element text in a variable
    $original_text = $settings['text'];

    // trim the text by the number of characters and assign it to the element's text
    $settings['text'] = substr( $settings['text'], 0, $element->settings["truncate_text_to_characters"] );

    // if the length of the original text is greater than the number of characters, add "..." to the end of the element text
    if ( strlen( $original_text ) > $element->settings["truncate_text_to_characters"] ) {
      $settings['text'] .= '...';
    }
	}

	return $settings;
}, 10, 2 );

Reference

https://brickslabs.com/draft-status-control-for-sections-in-bricks/