Filter Looper output like Preview > CPT > Post

[splaquet]

I’m trying to find a way to express my thought into words, so bare with me.

I have my looper setup correctly and I’m able to output a list of thumbnails ON each CPT, but I’d like to output collected lists of all thumbnails from each CPT on one page.

Is there a way to filter out the loop like you can for the Preview, on a specific column/row/section? I’ve looked through docs, videos and forum posts, but I can’t seem to find anyone else who’s looking to produce thumbnail loops like this.

[splaquet]

I should add that I’ve tried several different types of queries, but the images keep reverting back to the thumbnails of the parent posts.

the airline logos are a 2-way relationship field between Airline & Destination CPTs.

[tristup]

Hi @splaquet,

What you are expecting here is not very clear. Can you please elaborate a bit more to help us understand? Also, we may need to investigate it through the WordPress admin dashboard. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[splaquet]

I was having a hard time thinking how to put this into words, so I knew it’d be hard for me to explain this. I’ll try with more visuals.

What I’m trying to do is this…

I’m trying to put together a page of components, where the shortcodes would automatically update when the airlines and/or destinations changes.

So this section has the airlines on the back of the cards:
https://dev101.bradleyairport.com/journey-5/nonstop-destinations/#grid

I’m trying to make shortcodes of each destination, that I can insert into this code (like the highlighted example):

And have it produce a result like this (when you hover over a destination):
https://dev101.bradleyairport.com/journey-5/nonstop-destinations/#map

The loop will work as expected when inserted into a template, but I’m trying to produce a collection of the templates/components so our customers can easily reference the display and make any changes.

[ruenel]

Hey @splaquet,

What you are trying to do may not be possible simply because you cannot pass a variable like the post ID from your [leaflet-maker] to the [cs_component] shortcode. What you can do is to manually add the ID or something that is in relation to your CS Component. For example;

[leaflet-maker iconurl="some-random-1.svg" iconsize="12,12" address="Atlanta, GA"]
[cs_component id="..." parameters='{ "destination_ID": "123" }']
[/leaflet-maker]

[leaflet-maker iconurl="some-random-1.svg" iconsize="12,12" address="Baltimore, MD"]
[cs_component id="..." parameters='{ "destination_ID": "456" }']
[/leaflet-maker]

[leaflet-maker iconurl="some-random-1.svg" iconsize="12,12" address="Chicago, IL"]
[cs_component id="..." parameters='{ "destination_ID": "789" }']
[/leaflet-maker]

You can then use the destination_ID in a Looper Provider Query String to be able to display the flights associated with the destination.

Hope this makes sense.

[splaquet]

I haven’t really built out query strings before, so bare with me here…

so, would my query look like this?
post_type=destination&p=destination_ID&{{dc:acf:post_field field="direct_flight_airlines"}}

and then the code for the map would look like this?
[leaflet-marker iconurl="/wp-content/uploads/2025/08/bullseye-solid-full.svg" iconsize="12,12" address="Wichita, KS"] Wichita, KS
[cs_component id="63IronTdiyYo1Yrvpr" parameters='{ "destination_ID": "15810" }']
[/leaflet-marker]

[tristup]

Hi @splaquet,

As suggested by my colleague, you can use the destination_ID, if {{dc:acf:post_field field=“direct_flight_airlines”}} is returning what you need to use it in p value like the following.

post_type=destination&p={{dc:acf:post_field field="direct_flight_airlines"}}

If that is not the field, you need to add the exact field that returns that.

Hope it helps.
Thanks

[splaquet]

I’m just not following along on how the parameters should be constructed.

I’m trying to reveal the airlines aligned with Orlando.

Orlando is (CPTslug:postID) destination:15810

the direct_flight_airlines field is a bi-relationship field associated with CPTs Airline & Destination.

when I use this component on a loop, it reveals the airlines as expected. when I use the same component shortcode as above, I’m just not sure how the destination ID would be set to filter out airlines associated with the destination.

are there any examples you could share that come close to what I’m trying to accomplish?

[tristup]

Hi @splaquet,

Can you give an example of how you are getting the Destination ID inside the Looper? Also, please share the page where you have used the Looper and the page where you have used the single shortcode.
I have tried to investigate through the previously given credentials, and it seems they are not working anymore. I would suggest you reshare the credentials for further investigation.

Thanks

[splaquet]

I just noticed that autocorrect changed uname themeco (to theme). I’ve fixed it above, tested out the login/pass and confirmed that it’s working.

as I read through the messages, I’m thinking that there might be a misunderstanding (I probably didn’t explain clearly enough).

I’ll try to explain again and simplify…

direct_flight_airlines is a ACF, bi-relationship dc:acf:post_field. it’s what links the Airlines to the destinations

@@@

this page: https://dev101.bradleyairport.com/cornerstone/edit/15903
(Outline: Map Stack Looper/Map Section - top)

I’m trying to output the airline logo stack into the shortcode, where the user can enter in the destination ID on the Nonstop/Map page (below).

the shortcode from the Flip Card Section is inserted into the Nonstop Destination loop and works correctly.

the Map Section shortcode IS NOT part of a looper and needs the manual attribute (destination ID) entered into each shortcode on the Nonstop Destination > Leaflet Shortcode page

@@@

this page: https://dev101.bradleyairport.com/cornerstone/edit/15857
(Outline: Map > Map > Raw Content/Leafly Shortcode)

I’m trying to insert the Map Section Top shortcode and add the parameter destination ID
[leaflet-marker iconurl="/wp-content/uploads/2025/08/bullseye-solid-full.svg" iconsize="12,12" address="Wichita, KS"] Wichita, KS
[cs_component id="63IronTdiyYo1Yrvpr" parameters='{ "destination": "15810" }' ]
[/leaflet-marker]

@@@

this page: https://dev101.bradleyairport.com/journey-5/nonstop-destinations/

if you hover over any of the airplane icons, you’ll see the airline logo popup. each one of those is currently inserted and created manually. as the airlines change, I’m trying to fix this with parameter input, so it automatically pulls in the updates.

(Wichita, KS is the city I’m testing. the ID in the destination : ID is Orlando, not Wichita)

I hope this explains better. please let me know if I left anything out.

[ruenel]

Hello @splaquet,

I am already consulting with the developers how to make this work. Normally, you can have something like this:

[leaflet-maker iconurl="some-random-1.svg" iconsize="12,12" address="Atlanta, GA"]
[cs_component id="..." parameters='{ "destination_ID": "15784" }']
[/leaflet-maker]

And in your Component, you can run a Looper Provider Query String post_type=destination&p={{dc:param:destination_ID}} with a nested Looper Provider Dynamic Content {{dc:acf:post_field field="direct_flight_airlines"}}. The Component itself must have the JSON parameter like:

{
  "destination_ID" : "15784"
}

Our developers are currently looking into this as well. We will wait for them to chime in.

Please bear with us.

[splaquet]

no worries! thank you for your feedback.

so, do I understand this correctly that there are traditionally 2 methods of accomplishing this?

1. adding the post_type=destination&p={{dc:param:destination_ID}} into a higher level provider

and then, either

2a) adding ‘parameters’ into the shortcode
or
2b) adding JSON parameter into the component

is that correct, or does it have to be declared in both places?

[ruenel]

Hello @splaquet,

I can see that you already set it up. Try this instead:

[leaflet-marker iconurl="/wp-content/uploads/2025/08/bullseye-solid-full.svg" iconsize="12,12" address="Wichita, KS"] Wichita, KS
[cs_component id="bCSwG1VMdYidy0lNTm" destination="15810"]
[/leaflet-marker]

Make sure to test this in a test page first to avoid getting confusion.

Cheers.

[splaquet]

Let me start by expressing my sincerest appreciation and utmost gratitude for your help! …but, I’m just not figuring it out. As you’ll read… I’ve gotten it closer, but something just isn’t working right.

I did discover that if I added post_type=destination&p={{dc:param:destination_ID}} to the provider query and enable the consumer toggle (on the top level), it will display a loop of every destination’s airlines… going through all destinations.

I then noticed that if I added {"destination_ID":"15810"} to the parameters field (on that top level element), it ONLY showed the airlines for destination_ID:15810. (that’s exactly the result that I’m trying to achieve on the frontend of the website, so I know that I’m getting closer!)

I thought I had figured it out, because removing the {"destination_ID":"15810"} from parameters then shows the repeating destination loop of airlines on the front end.

…but the frontend shortcode still wasn’t working when I added destination_ID="15810" to the [cs_component id="…"] shortcode. it’s still not filtering out the destination_ID.

I really hope that I’m missing something small at this point. Any ideas?

[ruenel]

Hello @splaquet,

The JSON parameter and the component shortcode should have the same key destination_ID . It should also be used in your Looper Provider Query String.

I made a demo on a test page.

• See the secure note below

Thanks.

[splaquet]

oh my gosh, you did it!? I’m nearly positive that I tried that line and it didn’t work for me.

thank you so very much for your hard work and attention! I really wish I understood what I had done wrong, because this is an incredibly powerful feature that Pro offers. I can easily see myself taking advantage of this in the future.

thank you again!!!

[tristup]

Hi @splaquet,

Glad that we are able to help you.

Thanks