[Resolved] Creating a Slider with Toolset

[Author]

Posts

[Shane]

Hi Pete,

I managed to replicate the situation already, however I was providing a workaround that would allow you to generate the slider without a view.

But the HTML texts for the slider requires some specific wrappers as well as shortcodes for it to work. Without these the slider won't render as it is using the flexsider javascript.

This means we are essentially stuck using views unless we can have a Text Editor block that has formatting similar to elementor.

Also I must apologise for the delays as the forums are extremely busy and we have a few supporters on vacation at the moment.

Thanks,
Shane

[Pete]

Hey Shane,

You never need apologise, grateful for the help when it's available 🙂

Ok, not sure I understand what you are saying, a little beyond me.

However, if you are saying you need to add specific code to the Modal, which house the Toolset View.
The way to do this on Oxygen is to add a Code Block to the same element as the one that requires additional code.

So as in pic attached, click top left + Add > in search type code block.

With your Toolset View selected in the Structure panel, click add code block.

It'll appear like in my pic. Here you add any HTML, CSS and JS.

I rarely use this however on the odd occasion I do for CSS.

Is this of any help?

[Pete]

Hey Shane,

Appreciate you may be busy. Any head way on this?

If this can't be resolved I need to bin either Toolset or Oxygen.

I'm thinking it may need to be Toolset as it's creating way to many restrictions on what we need to do moving forward. This would be a shame however we started trying to sort this over a week ago now and need to move forward.

Any conclusion would be most welcome 🙂

Thanks as always, Pete

[Shane]

Hi Pete,

What I would need to do here is to escalate it to our 2nd tier supporters for them to perform further debugging on this one.

While I consult with them have you tried using this workaround below using flexslider ? It won't involve the use of views as it can be added directly to the page template itself to produce a slider.
https://toolset.com/forums/topic/creating-a-slider-with-toolset/#post-1967229

[Pete]

Hi Shane,

Thanks for getting back to me.

Ref your suggestion using Flexslider? Never heard of it and the link you sent is to this page.
Happy to try anything however never having tried anything else I wonder if it's complicated, will it be something I can actually do.

I would certainly appreciate this being escalated.

[Shane]

Hi Pete,

I won't need to escalate this one because the problem here is a conflict with gutenburg and the oxygen builder. It would appear on their site that they are compatible with gutenburg but there is something strange that I can't quite put my finger on.

However I would recommend that you open a ticket with the oxygen team for them to investigate the issue as to why the item won't show up until you inspect the element.

Without changing your view I went ahead and setup the repeatable fields using the classic views output and the flexslider and it loads fine. This is a good indication that the issue is between Gutenburg and Oxygen and not views and oxygen. If you take a look at the page now you will see that the images load when you click on the button.
hidden link

Secondly here is the view
hidden link

Where you can see what was added. Also for additional display options for the flexslider you can have a look at their documentation below.
hidden link

Please let me know if this helps.
Thanks,
Shane

[Pete]

Hey Shane,

Goodness. Ok, I opened a ticket with Oxygen over the weekend summerising your comments and the issues I and we were having.

I can further add your comments.

Looking at what you've done....this works...yes!

I'm not bothered if there is an issue with there system if this works.

Is there an issue with using this moving forward? In other words is it stable enough to use?
Certainly hope so.

Finally if we can use this is there a way we can get rid of the indicator dots at the bottom and make the arrows appear permanently?

Again, I really apprentice your time on this, I do feel, if this is a compatibility issue on their side...you have gone above and beyond what could be expected.

I do appreciate this and your time.
Pete

[Shane]

Hi Pete,

Again i must apologize for the extreme delay in getting to this point.

The solution that i've provided is stable and was previously used before our implementation of Toolset Blocks with the image block that can do this.

I do not forsee you having any issues with this solution. Yes you can remove the dots by modifying the controlNav attribute.

I've went ahead and added this to the javascript that triggers the slider. See the code below.

jQuery(window).load(function() {
   jQuery('.flexslider').flexslider({
        controlNav: false
 
   });
 });

However I see no way how to make the arrows appear permanently on the image. There is however an automatic sliding option as well.

Thanks,
Shane

[Pete]

Hey Shane,

Well thank you for coming to a conclusion that does work, it's a relief.

I've never lived Toolset Blocks, even more reason not to now 🙂

Ok, it's late here so I will look into flexslider tomorrow and your set up of the view...just so I know.

Thanks ref the dots, whay are the arrows half missing by the way?

If you don;t mind I'll leave this ticket open until tomorrow, where I'll just ensure I understand what you've done.
If you don't mind.

Again thank you very much. Good night. Pete

[Pete]

Morning Shane,

Well it's very early morning here 🙂

The slideshow you created for us, however.

Check out other listings:
hidden link

Why is the gallery not using the image gallery from each listing?

And...

How do we stop the auto sliding? This we don't want.
However if we did, how would we speed this up?

Thank you.

[Shane]

Hi Pete,

Why is the gallery not using the image gallery from each listing?

I checked the filters on the view and saw that there isn't a filter that will restrict the view to display only for the current post being viewed. To resolve this you will need to add the Post ID query filter to your view and then set it to "Posts with IDs set by the View shortcode attribute".

Currently it defaults to the attribute ids, this is what you will use to pass the current post id into the view.

Example

[wpv-view name='my-view' ids='[wpv-post-id]']

Using the [wpv-post-id] shortcode, you can pass the current post id into the view to let the view filter for only the current post.

How do we stop the auto sliding? This we don't want.
However if we did, how would we speed this up?

This can actually be done by adding the attribute "slideshow: false," to the JS script that was added on the view in the JS section.
Example

jQuery(window).load(function() {
   jQuery('.flexslider').flexslider({
        controlNav: false,
        slideshow: false
   });
 });

Please let me know if you're having any difficulties and I will be more than happy to assist. Also the website is coming on quite nicely.

Thanks,
Shane

[Pete]

Hey Shane,

Thank you for that. Update JS worked great.

Is it possible to add a 'x' to close the image lightbox?
No big deal if not.

This portfolio template was always going to be a challenge using Oxygen. Nearly there with it and it'll work better than what we have in Elementor.

Working on styling it now as most of the dynamic function is there.

Thanks again. Pete

[Shane]

Hi Pete,

Unfortunately no that is not possible. Remember its not the flexslider that is generating the popup it is the oxygen builder's popup module.

I've checked around and found this tutorial below that was able to add a button to trigger the closing of the popup.
hidden link

Thanks,
Shane

[Pete]

My issue is resolved now. Thank you!

[Pete]

Sorry Shane, I missed something and only just discovered an issue I mentioned earlier.

I asked: Why is the gallery not using the image gallery from each listing?

You said...

I checked the filters on the view and saw that there isn't a filter that will restrict the view to display only for the current post being viewed. To resolve this you will need to add the Post ID query filter to your view and then set it to "Posts with IDs set by the View shortcode attribute".

Currently it defaults to the attribute ids, this is what you will use to pass the current post id into the view.

Example
1

[wpv-view name='my-view' ids='[wpv-post-id]']

Using the [wpv-post-id] shortcode, you can pass the current post id into the view to let the view filter for only the current post.

---ok

I don't understand this. I'm not using a shortcode I'm using a dynamic widget by Oxygen. Are you saying I need to replace the widget with a shortcode for this to work?

Sorry, I don't understand what I need to to ref the above?

Thanks, Pete