[Resolved] Thumbnail slider module not working

[Author]

Posts

[Marcel]

I am trying to: use the thumbnail slider module

Link to a page where the issue can be seen: /chalet/naam-van-chalet/

I expected to see: a slider

Instead, I got: all the images under each other, with the thumbnails underneath. Seems like the code that should transform the image into a slider doesn't work.

[Waqar]

Hi Marcel,

Thank you for contacting us and I'd be happy to assist.

From the code of your webpage ( /chalet/naam-van-chalet/ ), it seems that the Bootstrap's styles and scripts are not loaded.

This thumbnail slider module depends on those styles and scripts and as explained in its guide ( ref: https://toolset.com/modules/member-slider-with-thumbnails/ ), please make sure that the "Toolset should load Bootstrap 3.0" option is selected for "Bootstrap loading", at WP Admin->Toolset->Settings->General.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Marcel]

Thanks Waqar, this solved the problem 🙂

PS could you remove the URL from this topic please? It's a dev url.

[Marcel]

I have another problem, and since the topic title still covers that problem I reopened this ticket 🙂

So now I'm trying to replace the default portfolio cover image with a custom field from my own custom post type. So I replaced the "portfolio-cover-image" with my own field, which is a repeatable image field in both views and set the post type to my own posttype, all as described in this tutorial: https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/how-to-create-a-wordpress-thumbnail-slider-in-minutes/.

If I load the field group in my template, it works as expected. But if I try to load the same field group in my slider, it doesn't show. It only shows navigation blocks.

[Waqar]

Hi Marcel,

Thanks for the update and glad that the Bootstrap resources are loading as expected now.

I've removed your development website's URL from this thread.

To troubleshoot why the custom field works in the slider view, but not in the navigation one, I'll need to see how they are set up in the admin area.

Can you please share temporary admin login details, along with the link to the views that you're using?

Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi Marcel,

Thank you for sharing the access details.

No images are showing on the single page of "Naam van chalet" ( /chalet/naam-van-chalet/ ), because out of all 6 "Chalets" posts on the website, only this one post has images added in the "Extra afbeeldingen" custom field.

But, both views ( "Portfolio slider with thumbnails" & "Portfolio slider with thumbnails - carousel" ) are set to exclude the current post, through the "Don't include the current page in query result" checkbox.
( screenshot: hidden link )

As an end result, other posts don't show any images, because they don't have any in the custom field and this one post which does have some images, is excluded from the results, by these views.
( the images from the "Naam van chalet" post do show up if any other "Chalet" post is viewed ).

It seems that your requirement is different than what the pre-built thumbnail slider module is designed for. That module shows a single image from multiple posts, on a standalone page.

Whereas on your website, you need to show multiple images from a single post, on that same post's single page.

If my understanding is correct, you can follow these steps:

1. Please remove the existing "Extra afbeeldingen" custom field from its field group and add a new "Repeating Field Group" in the same field group.
( ref: https://toolset.com/documentation/getting-started-with-toolset/creating-and-displaying-repeatable-field-groups/#creating-repeatable-field-groups )

2. Once this repeatable field group has been created, you can add the image type field "Extra afbeeldingen", inside it.

This will help because fields in a repeatable field group are stored as part of a child post and not directly as part of the parent post (Chalet).

3. Add some images into this newly added field "Extra afbeeldingen" and adjust your views to show results from this new repeatable field group and not from the "Chalet" posts.
( screenshot: hidden link )

4. In both your views, you'll also need to include a query filter to only bring in results from those fields, which are related to the post where this view is shown.
( screenshot: hidden link )

I hope this makes sense and let me know if any point is not clear.

regards,
Waqar

[Marcel]

Thanks for you comprehensive answer Waqar, I'm always impressed how far support here is willing to go to help their users achieve what they need 🙂 Thanks to you, I got it to work the way I want it 😀

Only thing is the navigation arrows of the slider are gone, I would like them back... could you tell me how please? And is it possible to show the main image in a lightbox on click?

[Marcel]

Ok, I found how to implement navigation with the help of this article: https://toolset.com/documentation/beyond-the-basics/showcase-content-using-post-sliders/.

However, the navigation arrows only show when I set the number of items per page to 1,which is logical. But when I do that, the thumbnails don't work anymore...

[Waqar]

Hi Marcel,

Thank you for your kind words and glad that you're making progress.

> Only thing is the navigation arrows of the slider are gone, I would
> like them back... could you tell me how please?
> Ok, I found how to implement navigation with the help of this
> article: https://toolset.com/documentation/beyond-the-basics/showcase-content-using-post-sliders/.
> However, the navigation arrows only show when I set the number
> of items per page to 1,which is logical. But when I do that, the thumbnails don't work anymore...

- The way these views are designed in this module, they don't rely on pagination settings, as explained in the other guide ( https://toolset.com/documentation/beyond-the-basics/showcase-content-using-post-sliders/ )

If you'll check the view "Thumbnails onder slider single chalet", you'll note that the code for the navigation is wrapped in a conditional display, so that it only shows, if the count of total found results is greater than 5 ( since thumbnails are shown in a group of 5 - screenshot: hidden link )

When the count of the found results in less than or equal to 5 ( which is true for the post that you're testing with ), the navigation links are not needed and are therefore not shown.

You can learn more about the conditional output in views, from this guide:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

Note: Please revert back the "Pagination and Sliders Settings" to "No pagination" and only keep the "Afbeeldingen van het chalet in de slider" selected in both views.
( screenshot: hidden link )

> And is it possible to show the main image in a lightbox on click?

- To show the images in lightbox/popup, you'll need to include some third-party plugin or script.

For example, you can install and activate the plugin "Responsive Lightbox & Gallery" ( https://wordpress.org/plugins/responsive-lightbox/ ) and then replace the code for the image in "Slider op single chalet pagina" view, from:

[types field='extra-afbeeldingen' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]

To:

<a href="[types field='extra-afbeeldingen' title='%%TITLE%%' alt='%%ALT%%' size='full' url='true'][/types]" rel="lightbox">[types field='extra-afbeeldingen' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]</a>

Note: how the rel="lightbox" attribute has been added around the image in a link tag.

I hope this helps and for a new question or concern, please open a new ticket.

regards,
Waqar

[Marcel]

I needed the arrows on the top slider, but I managed to get it working by copying the navigation code from the thumbnails slider, remove the conditional tag and adjust the ID to #main for the main slider.

Thanks again for all your help!