Help with loopers and ACF pro

[oriol]

Hi have a project post setup using ACF custom field.

Now I have it all setup working using this structure:

Section ← Looper Provider (WP Query → Specific Post (name of project))
└── layout-row ← Looper Consumer ON
└── left column (text/button)
└── right column (cover images)

layout-grid ← Looper Provider: {{dc:acf:post_field field=“project_gallery”" post=“308”}}
└── layout-cell ← Looper Consumer ON
└── image ← {{dc:looper:item}}

However, I don’t want to keep adding in the specific post id every time i add a project, just the root (Section ← Looper Provider (WP Query → Specific Post (name of project)))

So I tried {{dc:acf:post_field field=“project_gallery” post=“dc:post:id”}} which doesnt work…

Is there a string that could maybe have id=current or something?

Also, the top grid should act like the below grid here: https://ohlalab.com.mx/branding/ but its not.

[ruenel]

Hello @Oriol,

Thanks for writing in!

The Looper Provider is set in the Section element. You can nest the other Looper inside the Looper Consumer. For example:

Section ← Looper Provider (WP Query → Specific Post (name of project))
       Row ← Looper Consumer
          Column 
               Row 
                    Column (text/button)
                     Column (cover images)

             Grid ← Looper Provider: {{dc:acf:post_field field="project_gallery" }}
                  Cell  - Looper Consumer
                       Image - {{dc:looper:item}}

Hope this makes sense.

[oriol]

@ruenel

{{dc:looper:item}

Hi, thanks, but if I set it up like the above, the images dont come through, I have to include the posit id as I mentioned above. As you have it Id love it to work, so Im only putting in one looper provider with the post name, and the rest feeds in, but I cant seam to get it working.

Also, to have the grid working like the one at the very bottom, will the image have to be a background of the cells, so it works with the cell layout i have?

Would you mind taking a look? Login in secure note.

[ruenel]

Hello @Oriol,

You do not have the same structure. The Grid element is outside the Looper Consumer:

The correct way should be:

Both the 2-column row and the Grid will be inside a parent Row element.

Use {{dc:looper:item}} to display the portfolio gallery image item:

It should display like this:

Hope this makes sense.

[oriol]

That did the trick, thanks!

[prakash_s]

You are most welcome @oriol

[oriol]

Sorry to be a pain, I have gone in a different direction, and I want to setup a grid, with the background image of each cell using “{{dc:post:meta key=“cover_image”}}” then cover_image_2 and cover_image_3.

I have it setup with the section as the provider, then the row as the consumer. In the backend, it looks like this:

Yet on the front end, it only shows 1 image:

Please let me know what im doing wrong.

Thanks.

[ruenel]

Hey @Oriol,

Check your Grid settings:

Make sure that you have 2 columns in larger screens.

Cheers.

[oriol]

I think you misunderstood, the layout in the grid is setup how I want (top image in my post, and this is in the backend) yet on the front end, its not displaying it like it should. If you go to the 3rd breakpoint, its setup the same, so 1 row 1 column, 2n row 2 columns, and it displays correctly, so why isnt it on the larger screen?

[ruenel]

Hey @Oriol,

Actually, the images overlap in Cell 1.

To get this resolved, your Cell 1 should be set to Looper Consumer to display ONE:

And Cell 2 will have the remaining items:

But since you are displaying the images with {{dc:post:meta key=“cover_image”}} then cover_image_2 and cover_image_3, then the Looper Consumer is not needed.

Best Regards.

[oriol]

That did the trick, thanks!

[christian]

You’re welcome, @oriol