[Resolved] Creating a slideshow view from rhe results of a custom search

[Author]

Posts

[FRANCESCOD7762]

Hi,
I have so far successfully created a custom search page for the custom Type Art Works with Toolset and Elementor, with the custom search form on top (search field for title, 5 filters dropdowns & reset button) and the resulting Bootstrap display at the bottom (grid of images with titles, artist etc).

Now, I would like the site visitors to be able to see the images of any filtered result set in a slideshow, displayed ideally in an Elementor Popup. This slideshow would be evidently updated when the visitor changes any of the filters, just as the images of the results Bootstrap grid is updated already.

To achieve this goal, how can I intercept the result set returning from the custom search query (array of js objects?), in order to put it into a slideshow, somehow ? Is there a short code for the result set ?

Or : do I have to make another view, a slideshow view, and "hook" it up to the above mentioned custom search result set, maybe with that short code ?

To see the page : hidden link
username: flywheel
password : receptive-giants

Thank you for your help,
Francois De Grandi

[Beda]

To produce a slider in Toolset you need a View.
That View must return (in the loop) only the data you want to see in the slider (likely just the image)

There is a great module actually that you can download and use as is, and then customize.
https://toolset.com/modules/portfolio-slider-with-thumbnails/

I suggest using that - rather than putting this in a Elementor Pop Up I also would suggest to either put it in a Bootstrap Modal or on a blank page, because Elementor Pop Ups may load their data too late for Toolset - this would require some tests first.
Basically you would create the slider in Toolset View and then insert that View anywhere (modal, page, etc)

This would then produce the slider.
Filtering down that slider is possible with a Custom Search, just as in a "normal" View, but it would need to be a standalone View (it can't take the query filters from View A and update View B easily).

It is possible, if you for example set the View with the Slider to have QUERY Filters matching the (others) View Search and Pagination Filters URL arguments.
But it's not suggested, a View should ideally hold its own search and loop.

Please let me know if this helps to achieve the goal.

[FRANCESCOD7762]

Thanks Beda, for your prompt response.

I understand that The slider has to be crested in Toolset View.
You wrote :
"
Filtering down that slider is possible with a Custom Search, just as in a "normal" View, but it would need to be a standalone View (it can't take the query filters from View A and update View B easily).
"
2 Questions :
a) Is it possible to add the same series of 5 filters as drop-downs, with a reset button - like in my first Custom Search form (top of the page) ?
b) what is not "easy" about taking query filters from View A and update View B ?

Isn't the short code [wpv-items-found] representing the result data set from the Custom Search query ? If yes, how about, as you suggested, wrapping the slider's template code in a Bootstrap modal(including trigger button), and inserting the the whole thing into the Custom Search's template loop ?

Thank you for your fees back.
Best regards,
Francois De Grandi

[Christian Cox]

a) Is it possible to add the same series of 5 filters as drop-downs, with a reset button - like in my first Custom Search form (top of the page) ?
It's possible, yes, but I don't think you would want to show the filters twice. Instead, you would configure the second View's Query Filter options identically, and hide the second set of filter controls.

b) what is not "easy" about taking query filters from View A and update View B ?
For starters, there is no JavaScript API for View filters, so it's not exactly straightforward to manipulate a View with JavaScript. Instead, what you would have to do is configure the Query Filters of each View to use identical filter settings and respond to the same URL parameters. AJAX most likely won't be well supported here, since you have two Views to update at the same time.

Isn't the short code [wpv-items-found] representing the result data set from the Custom Search query ?
Yes, but it only works in the immediate context of a View's Loop editor. It cannot be ported elsewhere outside of that View.

If yes, how about, as you suggested, wrapping the slider's template code in a Bootstrap modal(including trigger button), and inserting the the whole thing into the Custom Search's template loop ?
You could put the second View inside the Custom Search's template loop, yes, but if you really place it inside the wpv-loop tags that would repeat the modal for each result. You probably don't need that. You probably only want one modal.

[FRANCESCOD7762]

Hi Christian,

Thank you for your prompt and detailed answer.
I agree, it is not a good idea to try to hook two views together...

So I rebuilt the same Custom Search View with Toolset Blocks (Toolset Views Beta), because I saw in one of the videos, that it was possible to configure images to open a lightbox. So I chose that option for the images link, but the lightbox displays the same image, for any of the looped images... Is there a way to fix that and also to configure the lightbox to be full screen?

Further, there is no option to update the output with Ajax when switching filters. The image size option chosen in the block editor does not work : OK in the preview but not in the actual page (see link below)

Also, the view generated via the Block Editor is not quite compatible with Elementor :
- the image size option chosen in the block editor does not work, or sometimes - in a Elementor Preview f.i.
- the ajax pagination works in a block editor preview, but not in an Elementor Preview or page

Hopefully these flaws are part of the beta - todos ?

The Elementor page has the first View (without block editor) on top ( with ajax filters and pagination); then below it the second View (Block editor) with page reloading filters - submit button - and pagination; at the bottom, anexample of non dynamic Elementor Slider.
To see the Elementor page : hidden link
To see the Block Editor View : hidden link
username: flywheel
password : receptive-giants

I just uploaded it, so you might have to wait a bit to see it properly...

Thank you for your help,
Francois De Grandi

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/problems-creating-custom-search-view-in-block-editor/

[Christian Cox]

It sounds like we're discussing a different topic now, not a slideshow View but a lightbox implementation. I have split that into a separate ticket so we can discuss that in more detail and keep the forum organized. Thanks!