acf/fields/flexible_content/layout_title

Overview

This filter allows you to modify the text (HTML) displayed at the top of each flexible content layout. All sub field functions are available within this filter to load and display values. This filter is also run via AJAX when the layout is toggled open or closed.

Here is a before/after example to show how this filter can be used to improve your client’s experience.

Changelog

  • Added in version 5.3.6

Parameters

  • $title (string) the layout title text. Defaults to the layout title
  • $field (array) the flexible content field settings array
  • $layout (array) the current layout settings array
  • $i (int) the current layout index. The first layout index is 0

Usage

All sub field functions are available within this filter to load and display values. Please read up on the get_sub_field() function to see some examples of loading sub field values.

There are 3 ways to hook into this filter.

  1. acf/fields/flexible_content/layout_title filter for every field
  2. acf/fields/flexible_content/layout_title/name={$field_name} filter for a specific field based on it’s name
  3. acf/fields/flexible_content/layout_title/key={$field_key} – filter for a specific field based on it’s key

functions.php

<?php

function my_acf_flexible_content_layout_title( $title, $field, $layout, $i ) {
	
	// remove layout title from text
	$title = '';
	
	
	// load sub field image
	// note you may need to add extra CSS to the page t style these elements
	$title .= '<div class="thumbnail">';
	
	if( $image = get_sub_field('image') ) {
		
		$title .= '<img src="' . $image['sizes']['thumbnail'] . '" height="36px" />';
		
	}
	
	$title .= '</div>';
	
	
	// load text sub field
	if( $text = get_sub_field('text') ) {
		
		$title .= '<h4>' . $text . '</h4>';
		
	}
	
	
	// return
	return $title;
	
}

// name
add_filter('acf/fields/flexible_content/layout_title/name=my_flex_field', 'my_acf_flexible_content_layout_title', 10, 4);

?>

Related