This thread is resolved. Here is a description of the problem and solution.
Problem:
A custom post type has a repeatable group of fields assigned, which include an image field and a caption text field. How to show these in a slider?
Solution:
Create a slider View as described in the documentation.
For the Content Selection choose the repeatable field group, and output its image and caption fields in the Loop Output section.
Relevant Documentation:
https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/
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 |
|---|---|---|---|---|---|---|
| - | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | - |
| - | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | - |
Supporter timezone: Europe/London (GMT+00:00)
This topic contains 12 replies, has 2 voices.
Last updated by 6 years, 4 months ago.
Assisted by: Nigel.
If you are familiar with WordPress database tables you will know that posts get stored in wp_posts with a post id, and the custom fields for the corresponding post id are stored in wp_postmeta.
So when you create a post and add repeating image fields, you get multiple entries in wp_postmeta, one for each image, for the corresponding post id.
The implementation of repeating field groups creates *posts* (of a hidden post type) for each group of fields.
On your site I have made a new post type, Boats, to which I have assigned a Boat Slides repeating field group.
If you edit the boat post I created you will see that it contains several slides, each of which contains one image field and one caption field. (See screenshot.)
Those fields are stored in wp_postmeta, but not against the id of the boat post, instead against the ids of the hidden rfg posts (of which there are four in this example). Toolset handles connecting those hidden rfg posts to the boat post (as if it were a parent-child relationship).
If that is confusing, forget about it, and just see it in action.
I created a View (Boat Slider) which queries the Boat Slides repeating field group (these are actually posts) and includes a Query Filter so that it only returns Boat Slides belonging to the Boat post where the View is shown.
This is a slider View with pagination settings to create a slider, as described in the documentation I linked to earlier.
It will find and iterate over the four RFG posts belonging to the Tug Boat Willy boat post, displaying the image and caption fields from each.
Take a look at how it is set up for boats and hopefully it will become clear.
Hi Cristian
There was a simple fix to part of the problem, namely the Query Filter for the slider View needed updating (because you are nesting the View inside another View) as shown in the screenshot, where you need to select related to the current post in the loop.
Now you no longer see no results found in place of the slider.
It doesn't seem to be working correctly for the second boat. There could be an issue related to the JavaScript trying to initialise a slider which is hidden (inside a closed accordion tab), that rings a bell, albeit a quiet one.
But the problem could be linked to your use of Layouts.
Right now you have created a template Layout and assigned it to the single page "Vessel List". That is possible, but the intention with templates are that they are used in multiple places. If you just want to design a single page using Layouts, create a new page and use the Content Layout editor to design that very page.
Also, when I go to edit an individual Vessel post, I see you are using the same Vessel List View template Layout for the individual posts. That Layout contains the Vessel List View, the output of which includes the post body of the Vessels, which uses the same Vessel List View, potentially creating an infinite loop.
I think this might be interfering with your sliders working correctly.
I suggest you:
- stop using a template Layout to design the single Vessel List page and either design that page with the Content Layout editor available when editing the page, or if you are just inserting the View and nothing more, don't use Layouts at all on that page and just insert the View directly (using the Fields and Views button).
- stop using the Vessel List View Layout for individual Vessel posts. You shouldn't be including a View which displays Vessel posts in the body of a Vessel post itself, I don't think that is your intention. Use the post body of the Vessel post for something like the description of the boat.
Note that I also found some links were not working correctly, which I think is because your site is using https:// but in Settings > General the URL for your site is set up with just http://
Try changing the above and see whether the sliders-in-accordions works.
I recall a similar issue some time ago with Google Maps inside Bootstrap accordions, the maps on the closed panels failing to instantiate correctly because of display none and lack of height.
There are many JS-based solutions to be found online, but there is a simpler CSS alternative which involves modifying the styles for the Bootstrap accordion panels with the following:
.tab-content > .tab-pane {
display: block;
height: 0;
overflow: hidden;
}
.tab-content > .tab-pane.active {
display: block;
height: auto;
}
Before digging much deeper into this issue, I wondering if the same solution would work here.
Do you want to try adding that?
To make sure the style rules are in effect before the slider JS runs, rather than use the custom CSS section of the View, add the style rules directly within style tags in the Output editor as in the example in my screenshot.
I'm crossing my fingers on this one.
