Stylised Button

Display a stylised centered button to add layouts, instead of the native ACF button.

Click the "Add Row" button below to start creating your layout
0 Layout

Empty Message

Hide Empty Message

This setting allow developers to hide the default message “Click the ‘Add Row’ button below to start creating your layout”. This setting is automatically turned ON when the “Stylised Button” setting is enabled.

Click the "Add Row" button below to start creating your layout
0 Layout

Custom Empty Message

Customize the default empty message with the one of your choice.

My custom message to add row
0 Layout

Layouts Placeholder

Display a block placeholder with an “Edit” icon when a layout is collapsed. This setting will give more height to the collapsed layouts to make the edit action easier.

Click the "Add Row" button below to start creating your layout
0 Layout
1 Layout

Layouts Thumbnails

Display thumbnails for each layouts in the “Add Row” dropdown/modal. This setting is useful to show the user what the layout will look like on the front-end.

Click the "Add Row" button below to start creating your layout
0 Layout 1
0 Layout 2

Change Thumbnail URL

/*
 * @int/string  $thumbnail  Thumbnail ID/URL
 * @array       $field      Field settings
 * @array       $layout     Layout settings
 */
filter('acfe/flexible/thumbnail',                                          $thumbnail, $field, $layout);
filter('acfe/flexible/thumbnail/name=my_flexible',                         $thumbnail, $field, $layout);
filter('acfe/flexible/thumbnail/key=field_5ff71ef3542c2',                  $thumbnail, $field, $layout);
filter('acfe/flexible/thumbnail/layout=my_layout',                         $thumbnail, $field, $layout);
filter('acfe/flexible/thumbnail/name=my_flexible&layout=my_layout',        $thumbnail, $field, $layout);
filter('acfe/flexible/thumbnail/key=field_5ff71ef3542c2&layout=my_layout', $thumbnail, $field, $layout);
add_filter('acfe/flexible/thumbnail/layout=my_layout', 'my_acf_layout_thumbnail', 10, 3);
function my_acf_layout_thumbnail($thumbnail, $field, $layout){

    // Must return an URL or Attachment ID
    return 'https://www.example.com/my-image.jpg';

}

Async Settings

Asynchronous Layouts

By default, ACF will load all layouts and all their sub fields in a hidden container. This container is later used by the system when a user add layout. This logic can burden the initial page load, especially when using a complex Flexible Content with dozens of layouts and sub fields.

To enhance the admin page load, the Asynchronous Layout will remove that logic and load the layout on the fly, when a user actually add a new layout using an ajax request.

Click the "Add Async Layout" button below to start creating your layout

Disable Title Ajax

By default, ACF will run an Ajax request on page load and everytime a user collapse a layout, in order to retrieve all layouts title when using the acf/fields/flexible_content/layout_title. This setting will remove those requests to lighten the server load.

Inline Title Edit

Allow users to customize the Layout Title on the Post Edit screen. The title can be modified directly by clicking on it from the layout handle.

Click the "Add Row" button below to start creating your layout
0 Layout
1 Click here to customize the title

Toggle Layout

Allow users to hide/show specific layout from the front-end. This setting will add a new icon in the layout handle. When a layout is toggeled off, the layout will fade-out in the administration and won’t be rendered on the front-end.

Click the "Add Row" button below to start creating your layout
0 Layout
1 Layout

Copy/Paste Layout

Add a new action allowing users to copy a layout and paste it on an another post using the same Flexible Content. This setting add a “Copy” icon on each layouts of the Flexible Content.

To paste the layout, the user has to use the new secondary dropdown that appear next to the “Add Row” button. It is possible to copy all layouts from one post and paste them all at once.

Click the "Add Row" button below to start creating your layout
0 Layout
1 Layout
Add Row

Lock Layouts

Remove the ability to re-order layouts from the Post Edit screen.

Click the "Add Row" button below to start creating your layout
0 Layout 1
0 Layout 2
1 Layout 1
2 Layout 2

Close Button

Add a “Close” button at the bottom the sub fields render for a better user experience.

Click the "Add Row" button below to start creating your layout
0 Layout
1 Layout

Hide Buttons

Hide Collapse Button

Remove the native collapse button from the layout handle which allow users to collapse/open a layout.

Hide Add Button

This setting will remove the “Add Row” button from the general Flexible Content field and from the Layout Handle bar. Users won’t be able to add new layouts.

Hide Delete Button

Remove the “Delete” icon from the layout handle bar. The user won’t be able to delete a layout that has been added on a post.

Hide Duplicate Button

Remove the “Duplicate” button from the layout handle bar. The user won’t be able to duplicate a layout.

Layout States

User Preference

This is the default ACF behavior applied to Flexible Content. The browser save the user preference of the opened and closed Layouts for each posts.

Collapsed

Force the layouts to be loaded as collapsed (or display the Preview Mode). This setting will ensure that the user always see all layouts closed when loading a post.

Opened

Force all layouts to be opened, and showing all layouts sub fields, by default.

Always Opened

An alternative “Opened” layout state which remove the ability to collapse layouts, which means they will be always opened.