Flexible Content Being Output Doubled

Loops & Logic
#1

Hey folks,

So I have been playing around with Flexible Content and have run into an issue. I have looked at the docs and searched this forum, but cannot seem to find the solution.

This could be all my fault in how I am doing things or maybe a bug – I am not sure.

I have created a ACF Flexible Content field group and in that I have two sections, a Hero and a Services section. I write out the two sections in my code and then wrap both of them in a . What I then find is each section is duplicated (one is filled and the other is empty).

I have also tried to wrap each section as its own , but then nothing is outputted.

Again this could be my fault, but any insight would be muchly appreciated.

Here is a screen recording: L&L Flexible Content - YouTube

Cheers and keep up the great work, I love this plugin! =)

#2

Belay my post – I solved the issue.

If someone is using Flexible Content with ACF you first wrap your markup with the and the flexible content field value. Then, you use the statement with the Layout value.

Here is an example of my code that worked great.

<Loop acf_flexible=services_page>  
  <If field=layout value=hero_section> 
    <!-- Hero Section -->
      <section class="hero-wrapper alighfull">
        <div class="hero-inner">
          <h1 class="hero-headline">
            <Field headline />
          </h1>
          <h2 class="hero-header">
            <Field header />
          </h2>
          <p class="hero-snippet">
            <Field snippet />
          </p>
        </div>
      </section>
 
  <Else if field=layout value=service_section />
  
    <!-- Services Section -->
    <section class="services-wrapper">
      <div class="services-inner">

        <!-- Service Item One -->
        <div class="services-item one">
          <h1 class="services-title">
            <Field heading_1 />
          </h1>
          <p class="services-snippet">
            <Field snippet_1 />
          </p>
        </div>

        <!-- Service Item Two -->
        <div class="services-item two">
          <h1 class="services-title">
            <Field heading_2 />
          </h1>
          <p class="services-snippet">
            <Field snippet_2 />
          </p>
        </div>

        <!-- Service Item Three -->
        <div class="services-item three">
          <h1 class="services-title">
            <Field heading_3 />
          </h1>
          <p class="services-snippet">
            <Field snippet_3 />
          </p>
        </div>

      </div>
    </section>
   </If>
</Loop>
1 Like