I using block editor to edit my Content templates and i have a view that uses a CPT.
the grid is set to 3 columns. and all is looping fine.
I sort by a primary value from a CF, and thats working perfekt.
My sorting is
Monday, tuesday, wednesday, thursday, friday.
Every post is listed as it should and sorting works.
it is listed
Monday monday tuesday
tuesday tuesday wednesday...etc
But now i like to divide the sorting.
So all monday is seen like this
Monday monday monday
<HR>
Tuesday tuesday tuesday
<HR>
wednesday...etc...
how can i do this ?
Whn i look at the css there is nothing i can call and use (in my knowledgement)
thank you
Hello, unfortunately there is no simple way to group results in a View by some custom field value. It sounds like that is what you really need here. The simplest solution is probably to create one View for each "day", and filter each View by that custom field value:
- View 1: filtered by custom field = Monday
- View 2: filtered by custom field = Tuesday
- View 3: filtered by custom field = Wednesday
- and so on. Place all the Views in your template, and insert HR or divider blocks between each View.
Will this work in your situation, or is something more complex needed here?
Hi Christian,
This was my first approach. But, i need the search and filter to work as well. Not one search per View, one search that search on all View is not possible?
Unfortunately the search filters added to one View in the Block Editor are not designed to directly influence the results of another View included in the same Block Editor design. There are some hacky ways around this with many limitations, and I don't recommend them. Instead, I would explore a CSS solution. These links show how you can use a CSS selector to target the first element with a specific CSS class by overriding subsequent items with that CSS class using ~:
https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class
https://philna.sh/blog/2018/03/18/css-first-of-class/
In the Loop of the View, you could use the value of the custom field to generate a CSS classname in a custom HTML block, like this:
<div class="day-[types field='your-day-field-slug' output='raw'][/types]">
Then you would need to close that div in another custom HTML block, after the other content in the loop:
That would generate content like:
div.day-monday
div.day-monday
div.day-tuesday
div.day-tuesday
div.day-tuesday
div.day-tuesday
div.day-wednesday
div.day-wednesday
... and so on.
Then you could use CSS to add a top border, or use CSS ::before to add some other content above that element.
Thanks! But i cant find how i can add a CF to a class ?
when i add this in the class field i got 2 classes from "day-[types field='summitday' output='raw'][/types] " 😀
first class is Day- and next will be "field=summitday 😀
I Belive i do it wrong 😉
i also had a thought of do like this, but that was no good approach. mThe thought was to "interrupt" the grid to start over.
Yes, No - my css-skills is NOT as good as i would like it to be 🙂
.tb-grid-column:nth-child(6)::after,
.tb-grid-column:nth-child(12)::after,
.tb-grid-column:nth-child(18)::after,
.tb-grid-column:nth-child(24)::after,
.tb-grid-column:nth-child(30)::after,
.tb-grid-column:nth-child(36)::after {
content :'</div><div class="tb-grid">';
}
EDIT : GOT it, now i added a "custom html field" and now i got it like you described.
now next step...
Okay let me know what you need from us. Custom CSS programming is a bit outside the scope of support we offer here. I can try to point you to some examples like the links I provided earlier, or I can show you how to add your own custom CSS classes in the Block Editor or a custom shortcode, or make recommendations based on what I see on the front-end of your site if you provide a URL.
