Pro 4.0.8: Bug with Looper Consumer Conditionals based on taxonomy / has_term

Support
#1

Hi there,

I am having trouble getting the right functionality out of the Conditionals set on a Looper Consumer element.

I have a Layout set up for Categories, which I then want to separate into two Content Types (which are set by a content_type taxonomy). I have set up a grid element where the Cell is the Looper Consumer. This same Cell also has a Conditional set up on it as shown in the screenshot below, to (in theory) only get rendered when the current post being consumed has the term ‘Video’, which is in the content_type taxonomy.
image

However, I am seeing that these posts are still showing up, which I have shown by using a development style of:

.content_type-video {
  border: 2px solid red;
}

(I have the {{dc:post:classes}} Dynamic Content on the Cell so that it pulls in classes based on taxonomies etc)

In the screenshot below you can see some posts do not have the red border, which indicates which ones don’t have the ‘Video’ term associated with them, yet are still showing up.

image
image1093×272 109 KB

Further to this, the green arrow icon is using the same Conditional on it (an Icon element within the featured image Div element) so that it only shows when the consumed post has the ‘Video’ term, works exactly as expected. The Featured Media Div preset is used elsewhere, hence why the conditional is in place, even though it needn’t be in this situation as in theory there should be no non-video posts showing up. It does however demonstrate that the Conditional in question is working for that inner Icon element, but it is not working to hide the entire Cell, which is the consuming element.

This consuming Cell element is not within a Looper Provider, as it is pulling directly from the main query which is being provided by the Category Archive which this Layout is being used for.

Any help with this would be great – knowing whether it is a bug, or I have done something incorrectly in my setup
Thanks!

#3

Hey @arthurodb,

Thanks for the detailed rundown of everything! We may need to find a good way to communicate this in documentation as you probably won’t be the first to be run into this.

Conditions are the first thing that gets processed on an element. This happens before the Looper Consumer sets up the post to be the new data context. When an individual element renders, the lifecyle looks something like this:

  • Element Conditions - If rules exist and they fail, output nothing and do not continue.
  • Looper Provider - If enabled, pause existing providers and setup the new provider
  • Looper Consumer (Render) - If enabled, consume one item from the provider and render the output.
  • Looper Consumer (Repeat) - If this element consumes more than one item, iterate the looper and render again.
  • If no consumer is active, simply render the element.

The process to “render” looks like this:

  • Use the element’s data to determine which template to use and generate HTML
  • Locate and Dynamic Content in the resulting HTML and expand it.

So the element conditions are not running based on the first post, but without any post because the loop hasn’t started yet. What you can do is add a Div inside the Cell and apply a condition to that, but they you’re left with the top level cell which I don’t think you want. Unfortunately there isn’t a straightforward way to separate the content.

This would be quite an advanced technique but one thing that comes to mind is repositioning the grid items using the classes from {{dc:post:classes}} and custom CSS. Here’s an element CSS example:

$el.content_type-video {
  grid-row-start: -1;
}

That should move the video to the end of the grid instead of the beginning. Take a look at the examples here for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

#5
#6

Hi @arthurodb,

Hope you’ve been doing well! I just wanted to give you a heads up that some of the info I shared above has changed for the next release. I’ve updated the element lifecycle so your use case above will be possible. Now it goes like this:

  • Looper Provider - If enabled, pause existing providers and setup the new provider
  • Looper Consumer - Setup new data context
  • Element Conditions - Test if an element should show with the current looper item in scope.

It works with repeating content so it’s a bit more natural now and works like how you expected it to originally.

We’ve also added expressions to element conditions which will make it even more versatile. More info on that here: https://theme.co/forum/t/element-conditions-discussion/80638/32

1 Like