I frequently am asked by clients to create a View of a custom post types that can toggle between a tile display and a list display.
I typically lay this our with a bootstrap grid, placing the filters on one side and the results & pagination in the other.
Is it possible to use 2 different Content Templates, one for the tiled display of posts and one for the list display? This would greatly reduce the amount of duplicate code I typically end up writing because I currently create 2 completely separate views for each layout.
I am not sure if I can use conditional logic in the View loop to toggle between the 2 different content templates. Do you recommend I continue to use 2 separate Views, or should I be using 2 Content Templates in a single View?
It's not the content template that determines how the results are organised, the content template simply determines what to show for one of the results. In a grid, a content template would represent one card. In a list, the content template would represent one row of the list.
If you are using the legacy Views editor then you have complete control over the markup generated by the View, and I think the optimal solution would involve outputting a grid using CSS grid or flexbox and toggling a class on a container to change the display type when you want to display it as a list.
There isn't such kind of built-in feature within Toolset plugins.
The [wpv-conditional] shortcode works in server side, in your case, it needs to switch the content template in user side(user browser).
So I still recommend to use two different separate Views for each layout.
I found an article that covers toggling list and grid views in bootstrap using CSS: hidden link
The problem is that the legacy Views loop would need to change in order to account for the items per row being different for each layout. There might be a way to make the whole thing work entirely in CSS, but I would need to figure out how to avoid using the Views [wpv-item index=x] structure entirely, which is a rabbit hole I haven't gone down yet.
I've configured 2 different views. Now, the only issue is that, when switching between these 2 views, because they are on different pages and each page also holds other views related to the site functions, it doesn't remember which page of the results was being displayed.
You can try these:
Create two different pages, each page display different post view, in both pages, display the link to anther page for user to click it and redirect to the different layout mode.
Thanks, Luo. How do I pass the current page of the results between those two pages?
If I'm on the grid view and go to page 4 of the results, clicking the list view button return to the first page of results. How do I maintain current page number between those two views/pages?
There isn't such kind of built-in feature within Toolset plugins, I suggest you try to create a custom shortcode with a PHP function, https://developer.wordpress.org/reference/functions/add_shortcode/
In this PHP function, pass those specific URL parameters to target page as link, then use this shortcode to display the target page link.
