Add Pages database filters to a page with templates

[mcsg]

Is it possible to add a Pages database fields filter set to a Page or a block using template code?

We have several pages using Pages database field filters that are dragged from widgets.

However, we need to move them around on the page based on device (on mobile they need to be at the top, on desktop, on the side) so I thought we could add them with a block or a template call and manage their appearance.

I would also like to css style the fields and labels, but that is a secondary to just getting them in the right place.

[christopher-w]

On 5/21/2021 at 2:40 AM, mcsg said:

However, we need to move them around on the page based on device (on mobile they need to be at the top, on desktop, on the side) so I thought we could add them with a block or a template call and manage their appearance.

Hey 

Hack Alert

Not fully understanding your need here, but generally can't you just mark the common container as flex (assuming it's not already) and order the contents using media queries and order:-1/+1 etc? It won't work if you just want to move one sidebar item to the top of the page on mobile, but if you want to reposition the entire sidebar above main area then it should be fine. Remember, when in mobile mode, set flex container direction to flex-direction: column;

Alternatively, if that doesn't work for you and you need this in a hurry, as a temp workaround, set page contents to display none and move stuff around on page load with jQ/JS, with events etc, and then show it when done. Messy, but has worked for me in the past.

You could probably also move stuff around in the templates, but given you want to display things differently on mobile and desktop you will probably end up rendering them twice and revealing them as needed with media queries.

If it's the same site as were discussing recently and you want to try the CSS only route, drop me a line and I will see if a few lines of CSS will fix it for you in the short term.

 

Edit: assuming you haven't tried the CSS only route already.

[Jimi Wikman]

On 5/21/2021 at 3:40 AM, mcsg said:

Is it possible to add a Pages database fields filter set to a Page or a block using template code?

We have several pages using Pages database field filters that are dragged from widgets.

However, we need to move them around on the page based on device (on mobile they need to be at the top, on desktop, on the side) so I thought we could add them with a block or a template call and manage their appearance.

I would also like to css style the fields and labels, but that is a secondary to just getting them in the right place.

As a quickfix you can add two filter components. One above the database with show only in mobile and one to the right with show only on desktop. Just use the visibility feature to target properly.

Otherwise, you probably need to change the markup from using flexbox to CSS grid so you can position the filter independently of the sidebar widget area.