Skip Navigation

[Resolved] Creating a Slider with Toolset

This support ticket is created 3 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 29 replies, has 2 voices.

Last updated by Pete 3 years ago.

Assisted by: Shane.

Author
Posts
#1967243

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1967259
code block.png

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?

#1970533

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

#1971281

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1971299

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.

#1971347

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1971353

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

#1971369

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1971407

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

#1971621

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.

#1972271

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1972309

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

#1972689

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1973199

My issue is resolved now. Thank you!

#1973849

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

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.