Field Render

Displayed an enhanced version of the native Flexible Content field. Dozens of new settings and settings were added, allowing developers to create the most advanced page builder and fully control the field’s behavior.

Field Settings

Setting nameDescription
Advanced Flexible ContentShow advanced Flexible Content settings
Stylised ButtonBetter actions buttons integration
Hide Empty MessageHide the empty message box
Empty MessageText displayed when the flexible field is empty
Disable Legacy Layout Title AjaxDisable the native ACF Layout Title Ajax call. See ACF documentation.
Layouts: ThumbnailsSet a thumbnail for each layouts. You must save the field group to apply this setting
Layouts: SettingsChoose a field group to clone and to be used as a configuration modal
Layouts: AsynchronousAdd layouts using Ajax method. This setting increase performance on complex Flexible Content
Layouts: RenderSet template, style & javascript files for each layouts. This setting is mandatory in order to use get_flexible() function. You must save the field group to apply this setting
Layouts: Dynamic PreviewUse layouts render settings to display a dynamic preview in the post administration
Layouts: PlaceholderDisplay a placeholder with a pencil icon, making edition easier
Layouts: Title EditionAllow layout title edition
Layouts: Copy/PasteAllow copy/paste layouts functions
Layouts: ToggleAllow toggle layouts function
Layouts: Close ButtonDisplay a close button to collapse the layout
Hide: Add layout buttonHide all “Add layout” buttons
Hide: Duplicate layout buttonHide the “Duplicate layout” button
Hide: Delete layout buttonHide the “Delete layout” button
Lock Flexible ContentDisable the drag & drop function and lock the flexible content
Layouts Modal: EditionEdit layout content in a modal
Layouts Modal: SelectionSelect layouts in a modal. Enables: Modal Title, Columns & Categories settings
Layouts: Force StateForce layouts to be collapsed or opened

Flexible Content Render

In order to use the “Dynamic Layout Preview”, you’ll have to enable the “Flexible Content Render” setting first. This feature will add new options for each layouts:

  • Template file path. ie: /layouts/hero/template.php
  • Javascript file path. ie: /layouts/hero/script.js
  • CSS Style file path. ie: /layouts/hero/style.css

Once correctly setup, you’ll be able to use the new the_flexible() & get_flexible() functions from ACF Extended. You will no more have to struggle with multiple if & elseif statements on the front-end, the plugin will take care of everything and include the corresponding template/script/style files.

Front-end display:

if(has_flexible('flexible_content_field_name')):
    
    the_flexible('flexible_content_field_name');
    
endif;

Template file: /layouts/hero/template.php

<?php

/*
 * Hero Layout Render Template.
 *
 * @array   $layout Layout settings (without values)
 * @array   $field Flexible content field settings
 * @bool    $is_preview True during AJAX preview
 */
 
?>

<div class="layout-hero <?php echo ($is_preview) ? 'is-preview' : ''; ?>">

    <h1>Hero</h1>
    
    <h3><?php the_sub_field('text'); ?></h3>
    
</div>

Style file: /layouts/hero/style.css

/**
 * Hero Layout
 */
.layout-hero{
    background:#fafafa;
    padding:50px 0;
    text-align:center;
}
.layout-hero h1{
    font-size:50px;
    font-weight:700;
}
.layout-hero h3{
    font-size:32px;
    font-weight:600;
}
/**
 * Preview mode
 */
.layout-hero.is-preview{
    
}