Video Showcase

Getting Started

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 configured, 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{
    
}