I am trying to:
Test the new sliders with imported sample posts and then set up on my own custom post type.
Link to a page where the issue can be seen:
localhost site for testing but it is a copy of vaughanprint.com and I am testing on the print type.
The first thing I notice is that the arrows left and right don't work. Clicking on the thumbnails in the carousel do work but you can't navigate to the next and previous group. If I temporarily switch to the TwentyNineteen theme everything works fine.
The other issue. If I switch the views to my own custom post type, the thumbnail carousel is styled so the thumbnails are stacked.vertically. I also notice that not all images load from my custom post type. The first four seem fine but after that it becomes sporadic, just a blank space where the image should be. I am using the featured image as this is the option I am using for the print image. I have tried to limit the number of loaded slides to 10 as the catalogue in the CPT is over 200 posts. I also checked the images used in the Toolset slider example are also larger than my featured images.
I also notice that the Add first Portfolio gallery button in the Portfolio type doesn't add a set of the grouped fields when editing a post of that type?
I have followed all the necessary troubleshooting steps of turning off plugins etc.
Okay I'll be glad to take a look and see what we can do to work with your theme. Do you want to set up a staging environment where we can collaborate, or would you prefer to create a clone of your localhost site I can install on my own environment?
Okay the main issue is that the Divi theme adds some markup to Content Templates that is breaking the design a bit. The secondary issue is that Divi and Bootstrap have some known incompatibilities and we don't recommend using them together. If you'd like to try it anyway, I can show you some techniques to help prevent the problem where Divi adds some unnecessary markup. Additional modifications may be required to fix other incompatibilities between Divi and Bootstrap.
Edit the Portfolio Slider with Thumbnails - carousel View (hidden link) and copy the contents in the "portfolio-single-thumb" template:
<div data-target="#main-slider" data-slide-to="[wpv-loop-index offset="-1"]" class="thumb">
[wpv-post-featured-image]
</div>
Now scroll to the Loop output panel and replace the portfolio-single-thumb wpv-post-body shortcodes with the contents you just copied. Here is one of those shortcodes:
[wpv-post-body view_template="portfolio-single-thumb"]
Replacing all these shortcodes will effectively remove the Content Template from the Loop. The code from the Content Template is placed directly in the loop instead. This should remove extra markup that is causing the thumbnails to extend full width. Beyond that, you may need to make some other adjustments to account for Divi and Bootstrap incompatibilities.
Sorry I just realized this fix does not address the arrow problem. I will continue to investigate that and update you shortly.
I need to escalate this one to my 2nd tier team for additional investigation. I'll update you with some more information as soon as possible.
Hi Christian,
Thanks for looking into this. I tried that fix you suggested and it restored the thumbnails to the correct orientation, though the thumbnails are correct initially if you import the slider and and original samples through the modules plugin. Is it because I am using the featured image instead of a custom image upload field? The sample portfolio sample works fine bar the nav arrows.
The core problem here is that Divi and Bootstrap are incompatible, and the slider is heavily reliant on Bootstrap. We recommend you do not use Bootstrap with Divi ( https://toolset.com/documentation/recommended-themes/toolset-divi-integration/ ). I was hoping I could find a good workaround for you but I'm told that the best approach here is to use a different slider implementation that does not require Bootstrap. We have some information available for Flexslider here: https://toolset.com/forums/topic/how-to-display-the-pics-i-uploaded-as-a-slider/#post-518295
Hi Christian,
Just getting back to you regarding a bit more information. I am working on a trimmed down version of the slider without the carousel underneath. This seems to work ok.
Two things. First, is there documentation to switch the animation from slide in from right to fade in. Second, you mentioned that Divi adds extra markup into the mix. I happened to come across some Toolset tickets that mentioned the addition of et-boc and et_builder_inner_content classed divs. Is this what you were referring to?
https://toolset.com/forums/topic/whats-up-with-et-boc-and-et_builder_inner_content/
Let me know. I might get onto Divi support about this.
First, is there documentation to switch the animation from slide in from right to fade in.
I haven't tried that with this particular module, but in general you can adjust the transition of a slider View by editing the View in wp-admin. Scroll down to the Pagination and Sliders Settings panel. If you cannot see it, scroll to the top right corner of the screen and click "Screen Options". You can enable the panel here. In the panel, you have the ability to choose different transition effects like Fade.
I happened to come across some Toolset tickets that mentioned the addition of et-boc and et_builder_inner_content classed divs.
Yes, that's part of the problem. If you do not use the Divi Builder to modify the Content Template, the extra markup is not added. You could bypass this problem by not using the Divi Builder to modify the Content Templates. However as soon as you edit the template with Divi Builder, the extra markup is inserted. Furthermore, the bigger problem is a fundamental compatibility issue between Divi and Bootstrap.
My issue is resolved now. Thank you!
