Flexible Content Reorder Issue

• anantarajkhanal

• April 15, 2021 at 7:23 pm

Hi plugin author, I had implemented ACF PRO latest version in the website,

First of all, sorry for making the duplicate posts

https://support.advancedcustomfields.com/?post_type=topic&p=144579

I have created a flexible content for section and implemented background color and background image for each section,

As per my design , i have created my design almost complete but when the client says to add something above certain section the issue is showing. At first I create a section through flexible content and reorder as per the client needs the background image is showing in two section one with background color and one with background image itself

I had created a dummy page for the issue to show you in my website.

Page Link

I have also included some pics of the issue.

Here is my code

At page.php file I run a flexible content loop and set the content to desired templates as need.

<?php
//Get subfield values
$section_background = get_sub_field('section_background');

$section_color = get_sub_field('section_background_color');

$section_extra_class = get_sub_field('section_extra_classes');

?>

<?php if (!empty($section_background)): ?>
    <?php $unique_id = esc_attr(uniqid('section-'));?>
    <style>
        #<?php echo $unique_id; ?> {
            background-image: url(<?php echo $section_background; ?>);
        }
    </style>
<?php endif;?>

<section class="section<?php echo sprintf(' %s %s', $section_color, $section_extra_class); ?>" <?php if (isset($unique_id)) {
	echo sprintf(' id="%s"', $unique_id); }?>>

    <div class="container">
        <?php
/**
 * Loop through layout types registered in ACF plugin.
 * Field group -> "Page Sections" -> "Section" -> "Section Content Types"
 *
 */
if (have_rows('section_content_types')):
	while (have_rows('section_content_types')): the_row();

		//Regular Layout
		if (get_row_layout() == 'regular_layout'):

			get_template_part('template-parts/page/layout', 'regular');

			//Equal Columns Layout
		elseif (get_row_layout() == 'equal_column_layout'):

			get_template_part('template-parts/page/layout', 'equal-columns');

			//Landing Layout
		elseif (get_row_layout() == 'landing_layout'):

			get_template_part('template-parts/page/layout', 'landing');

			//Tabs Layout
		elseif (get_row_layout() == 'tabs_layout'):

			get_template_part('template-parts/page/layout', 'tabs');

		endif;

	endwhile;
endif;
?>
    </div>
</section>

ACF In posts

ACF Structure in Posts

When the New Section is added

When New Section is added

When Reordering The section

When Reordering the section

In Inspect Element

In Inspect Element

here is my issue in Problem.