New Var format of dynamic content in CSS

[GL_creative]

i’ve noticed that when I use dynamic content in my CSS, it now outputs a var with a dynamically generated name. In most cases this is fine, however I have one problem… I am not always using these dynamic content tags in a var context!

For this example, I’ve got a loop of posts, and I want to hide individual items that don’t match a certain taxonomy. The taxonomy ID is stored in a URL parameter.
What I tried:

1. Create a looper inside my post consumer that fetches all the taxonomy items.

2. Give the taxonomy items a custom attribute called iamid that has {{dc:term:id}}

3. Go back up to the parent (the post item) and add the following CSS

   $el:has(:not([iamid=’{{dc:url:param key=“iam”}}’])) {display:none;}
   $el:has([iamid=’{{dc:url:param key=“iam”}}’]) {display:block;}

Unfortunately, this outputs the following :
.e11901-e40:has(:not([iamid=‘var(–tco-dc96l-1n)’])) {
display: none;
}
.e11901-e40:has([iamid=‘var(–tco-dc96l-1o)’]) {
display: block;
}

I can’t find confirmation that vars are not allowed in this type of pseudo selector, but it certainly doesn’t seem to work, and when I manually enter an ID in place of the dynamic content to test, the CSS rule itself does work.

$el:has(:not([iamid=“561”])) {display:none;}
$el:has([iamid=“561”]) {display:block;}

Is there a flag that can be included in the dynamic tag to tell it to output a raw number?

I tried type=“image-css-url” (single and double quote versions) from the help docs but it still output a var for me. And just for funsies tried type=‘json’ pretty_print=‘1’ also.

Is there another way I can do what I’m after?

Maybe conditionals are a smarter choice, but I couldn’t figure out how to make that work, since I’d have to get terms for the current post before I could filter them on the URL parameter.

Thanks gang!

[charlie]

In your case I would try renderInFrame in your parameters, doc below. It uses var() so it would properly work with different breakpoint values, but in your case I don’t think that would work with a conditional has() statement. Let me know if this helps.

Parameters | Themeco Docs

[GL_creative]

I don’t think that’s going to work out for me? I’ll break it down better, I think I did a bad job explaining how I’m using dynamic content here.

Archive page
Column set as looper consumer for the post type.
Div inside the column with a looper that gets Current Post Terms (taxonomy “personas”), consumes the looper, and then sets a custom attribute with the fetched term IDs.

When someone arrives on this archive page through a certain search, the term ID of the persona is appended as a URL parameter. eg - fakesite . com/taxonomy-a/taxonomyterm/?iam=561 (Where iam is the ID of the taxonomy-b term that also applies.)

What I’d hoped to achieve with the CSS is to pull in that URL parameter, and check with :has() for any columns containing that hidden list of term ID tagged divs that don’t have that term ID and hide them. That allows me to filter content by two category-type taxonomies at once. Now if I manually input a number into my has statements, it works.

But :has() doesn’t play nice with vars. So if I take the dc term or dc url parameter a step further out and define it with a custom parameter set with renderinframe, would that allow me to then use the output as a straight number in CSS instead of a var? The notes in the docs weren’t entirely clear.

Maybe there’s a better looper arrangement that solves this problem more succinctly that I’m not thinking of?

Appreciate the brainstorming on this, definitely not urgent.

[charlie]

So if you are just trying to hide content maybe you could use a condition like the below screenshot. Does that help?

[GL_creative]

Well, I don’t think so?

Because I’d need to put the rule at the column level to selectively hide posts, but the key is a taxonomy for said post. If I wrapped all the content of the inside of the column with the looper that’s got the taxonomy info, I might be able to hide that? but not the box that contains it, so there’d be empty ghost boxes.

So the red boxes are the column items, which are the posts for this taxonomy archive display. The second taxonomy info is called inside that column in the yellow highlight area (a div). And the taxonomy ID to filter by is in the URL. This one, 561, matches only the middle post of this example. So in some version of a working method, we’d hide left and right, and keep the middle.

Forgive my markup quality.

So I guess the question is, how could I put a condition on the red box content, which is post level, that requires the related taxonomy data contained inside it?

I’m basically trying to trick this into giving me posts filtered by two taxonomies simultaneously. And current CSS could do the trick, because it can say if the following appears inside this div, hide it, but with dynamic content getting abstracted out to variables, I’m stuck because of the way data flows. Variables was probably the right move for 99% of use cases, I just happen to be the pesky one percent, I think.

[charlie]

I still think you can use a condition. You would use {{dc:term:id}} as the other part of is. I could be misunderstanding.

You can pass {{dc:url:param key=“iam”}} into JS as well as a workaround. Personally I wish we didn’t use CSS variables at all.

Have a great weekend.