I am using the Legacy Version of Toolset Views and I want to display these 3 components:
- List of the post in a grid format
- list of posts on the map
- Filters
However, the articles/documentations above are using the WP Blocks. I want to use the Toolset View legacy version.
I am able to list the posts on the map, and I have added in some filters:
hidden link
however, I am not sure how I can include a list of post in a grid format.
Both the map and the list of posts (in a grid format) should be linked to the filter, so once the filter values are updated, the results should be updated on both.
Is it possible to have these 3 components using the Toolset View legacy version?
Could you point me in the right direction?
If you are using the legacy editor and you want the output to be in a grid format, you'll want to use the Loop Wizard to generate the markup (based upon Bootstrap) that will output the posts in a grid.
(Make sure at Toolset > Settings you specify that the site can use Bootstrap 4.)
Using the Loop Wizard will overwrite what you already have for the loop output, which presumably currently includes the shortcode to output the map marker, so you will need to add that back to the template created by the loop wizard to collect the fields and content for the loop output.
You already have the filter set up, so this should complete your requirements.
Thank you Nigel, but how can I add that the post in a grid format with the Map and Filters?
In the 'Search and Pagination' section, I already have:
[wpv-filter-start hide="false"]
[wpv-filter-controls]
[wpv-control-distance distance_unit_url_param="toolset_maps_distance_unit" distance_radius_url_param="toolset_maps_distance_radius" distance_center_url_param="toolset_maps_distance_center" compare_field="place-address" default_distance="5" default_unit="km"]
[wpv-filter-submit output="bootstrap" class="btn-secondary"][/wpv-filter-controls]
[wpv-filter-end]
In the 'Loop Editor' section, I already have:
[wpv-layout-start]
[wpv-items-found]
[wpv-map-render map_id="map-7" map_height="600px" style_json="//sc.thedev.ca/rosetestsite/wp-content/plugins/toolset-maps/resources/json/Silver.json" ]
<p>Please wait while the map is loading...</p>
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-map-marker map_id='map-7' marker_id='marker-[wpv-post-id]' marker_title='[wpv-post-title]' marker_icon='[get_image_URL_by_ID field="acf_place_marker_icon"]' marker_field='wpcf-place-address']
<h2>[wpv-post-title]</h2>
<p>Toolset field output: [types field='place-address'][/types]</p>
<p>ACF field output: [wpv-post-field name='acf-place-address']</p>
[wpv-post-body view_template="None"][/wpv-map-marker]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-map-render]
[/wpv-items-found]
[wpv-no-items-found] [wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
I still want to keep these 2 components, and just add a list of posts below the map. Once the filter values are updated, the results should be updated on both the map and the list of posts section.
Like this hidden link , but using the Toolset Views Legacy Version?
As I said, you need to use the Loop Wizard to generate the markup that will output the posts in a grid.
I suggest you try a new test View so you can see what is involved and don't have to worry about losing what you did already.
Create a new View for the post type.
In the Search and Pagination section add your filters.
Use the Loop Wizard to generate the loop section markup that will generate a grid.
You can then insert the wpv-map-render shortcode immediately after the wpv-items-found shortcode, just like in your current example.
Then add the wpv-map-marker shortcode. You can either include it in the template for your loop items which the Loop Wizard will by default create.
Or you could add it immediately after the <wpv-loop> tag, also as per your current example.
(Adding the map and marker shortcodes is easy; adding the markup that outputs the posts in a grid is more complex, which is why you will likely want to use the Loop Wizard to do that, although you can add the required shortcodes manually. Therefore it helps to use the Loop Wizard first, before you then edit the results to insert your map shortcodes where needed.)
You can add the map shortcode pretty much wherever you like outside of the loop (it must only be added once to the page), while the marker shortcode must appear inside the loop (so that a marker gets output for every iteration of the loop), but it doesn't really matter where inside the loop.
The problem from your screenshots is that you haven't set it up to display as a grid, which was your original request.
My screenshot shows me using the Loop Wizard and choosing grid output, and then it generates markup in the Loop Editor something like this:
Thank you Nigel! We usually use custom code to create the grid layout, so using the built-in toolset grid layouts doesn't matter to us, as long as it displays the post and works with the filter.
I was hoping that the map + marker shortcodes are place correctly. So what I have in my code is correct, right?
