Wordpress Make a Flexible Content envirement

Wordpress Make a Flexible Content envirement

************************create a template 

<?php
/**
 * Template Name: Pure Modules Template
 *
 * @Description:This is the template that only modules.
 *
 */
get_header();
$featured_image_id = get_post_thumbnail_id($post->ID);
$featured_image = wp_get_attachment_image($featured_image_id, 'full', '', array('alt' => 'Banner-image'));
?>
    <!-- Hero Panel -->
    <?php //get_template_part('template-parts/modules/hero', 'panel'); ?>
    <!-- End of Hero Panel -->

    <!-- Content Module -->
    <?php get_template_part('template-parts/content', 'module'); ?>
    <!-- End of Content Module -->

<?php

get_footer();

***************************create a page to get all Flexible Content field

<?php
// Check if module present
$content_modules = get_field('content_modules');
// echo "<pre>";
// print_r($content_modules);
if ( (is_array($content_modules)) and (count($content_modules) > 0) ) {
	// Loop through existing modules
	foreach ($content_modules as $module) {

		$template = $module['acf_fc_layout']; // fetch layout/module name
				
		$filePath = get_template_directory()."/template-parts/modules/" . $template . '.php';
		//Check if file exist or not
		if (file_exists($filePath)) { 
			require($filePath); // call respective module
		}
	}
}
?>

****************************** Make a banner section example ********************************
file name = module_hero_banner.php


<?php
if (isset($module) && !empty($module)):
    $banners = $module['hero_slider'];
    $i = 0;
if ($banners[0]['image'] != null) :

?>

<div id="slider-wrap">
    <div id="slider" class="carousel slide " data-ride="carousel" data-interval="3000" data-pause="false">
        <div class="carousel-inner">
            <?php foreach($banners as $image) : 
            $active = $i == 0 ? 'active' : '';
            ?>
            <div class="carousel-item <?= $active ?>">
                <img src="<?= $image['image']; ?>" alt="Banner Image">
                <div class="container">
                    <div class="carousel-caption-title text-center">
                        <h1><?= $image['title'] ?></h1>
                    </div>
                    <div class="carousel-caption">
                        <p> <?= $image['description'] ?> </p>
                    </div>
                </div>
            </div>
            <?php 
            $i++;
            endforeach; ?>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<?php

endif;

endif;