How to display ACF Flexible Content Fields

b_rougeau · November 22, 2022, 11:36pm

Hi there,

I have created some Flexible Content Fields using ACF and I have created styled section templates to display the information. Then I made another template for the flexible content using PHP and I have run into an issue.

While the Flexible content template displays the section templates with the information I have in the fields, the issue is that if I have a second instance of a flexible layout with different information, it will repeat the information I have in the first instance and not add the new unique information, which is the point of flexible content. Is there a fix for this? Have I made an error? Here is the code I am using for the template if that helps sort this out.

<?PHP if( have_rows('test_layouts') ): while ( have_rows('test_layouts') ) : the_row(); if( get_row_layout() == 'test_heading_section' ): echo do_shortcode('[bricks_template id="102"]'); elseif( get_row_layout() == 'test_image_section' ): echo do_shortcode('[bricks_template id="109"]'); endif; endwhile; else : endif; ?>

KeviinCosmos · January 21, 2023, 12:13am

After the v1.6.2 update this is now possible
Just made a post in facebook.

Create a query loop and choose your flexible content.
Then add all your blocks inside and create conditions which matches the slug on your blog.

Link to my FB post:
https://www.facebook.com/592033531/videos/534299948763084/

wissam · April 26, 2023, 2:40am

@KeviinCosmos thanks for the video. Will changing the order of the flexible content get updated in bricks?

mizzinc · May 10, 2023, 10:46am

Hi Kevin,

Been playing with Flexible Content. When inspecting code, the element with the query loop wraps the output, i.e.a section.

For example:

<div class="block with queryloop">
<section></section>
</div>
<div class="block with queryloop">
<section></section>
</div>

This is not desirable. Semantic code should appear as.

<main>
<article>
<section></section>
<section></section>
<section></section>
</article>
</main>

Any ideas how to overcome this?

ocbroadband · June 19, 2023, 5:45pm

Anyone have a end to end video of setting this up? I’m not getting my head around this.

sebastianberger · July 6, 2023, 8:00am

+1 in my case the layout looks awfull with a lot of margins and paddings that are not needed

Roger · July 6, 2023, 9:25am

In your code, you are using the same shortcode for both the ‘test_heading_section’ and ‘test_image_section’ layouts, which might be causing the duplication.

Here’s an updated version of the code that should address the issue:

<?php if (have_rows('test_layouts')) : ?> <?php while (have_rows('test_layouts')) : the_row(); ?>

<?php if (get_row_layout() == 'test_heading_section') : ?>
  <?php the_field('heading_section_content'); ?>
<?php elseif (get_row_layout() == 'test_image_section') : ?>
  <?php the_field('image_section_content'); ?>
<?php endif; ?>

<?php endwhile; ?> <?php else : ?> <?php endif; ?>

In this updated code, we are using the the_field() function to retrieve the specific field values for each section template. Make sure to replace 'heading_section_content' and 'image_section_content' with the actual field names you have defined in your ACF Flexible Content Field.
Let me know, if this was helpful for you.

Wingtracer · December 11, 2023, 3:18am

I am still getting the same type of result. Bricks is wrapping whatever the class and tag of the outer “loopable” element is (div, block, section, or custom), around every single repeated item inside the loop. Any work arounds so that the inside items are not individually wrapped with the tag and class of the parent looper?