Images slider - Toolset

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user had some repeated image fields and wanted to create a slider using these images.

Solution:

I managed to create a flexslider plugin that should be able to help your.

Download and install the plugin in the link below.
https://drive.google.com/file/d/1CFU2_oBqe9PJBks8cT1VqMND8-ytDdVE/view?usp=sharing

Then create a content template for your post and add the following.

<div class="flexslider">
  <ul class="slides">
   [wpv-for-each field="wpcf-image_1"]
  <li>[types field="image_1" size="medium" align="none" resize="pad" padding_color="#FFF"][/types]</li>
  [/wpv-for-each]
  </ul>
</div>

After doing this then you will need to add the script for it to work.

Add this to the js section of the content template.

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

This support ticket is created 6 years, 3 months 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)

Tagged: Front-end display, Layouts plugin

This topic contains 21 replies, has 2 voices.

Last updated by domenicoS 6 years, 2 months ago.

Assisted by: Shane.

1 2 →

Author

Posts

August 23, 2018 at 4:02 pm #1090367

domenicoS

Hi Shane,
Can you please Help me with images slider?
I need to display it in the layout "accommodation layout".
I created the view as you suggested me.
Thank you
Domenico

August 23, 2018 at 7:38 pm #1090432

Shane

Supporter

Languages: English (English )

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

Hi Domenico,

I tried the previous credentials you had sent but it's not working.

Could you share the new ones here as well as the link where the slider is?

Thanks,
Shane

August 24, 2018 at 2:14 pm #1091272

Shane

Supporter

Languages: English (English )

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

Hi Domenico,

Thank you for the credentials, however i'm not seeing where you provided a link to where the slider is suppose to be.

Could you send me a link to where this is setup.

Thanks,
Shane

August 24, 2018 at 4:04 pm #1091355

domenicoS

Hi Shane,

this is the layout I used: hidden link (you can add a box to try, no problem)

this is the view which I enter in the layout to generate the slider: hidden link

this is the Content template generated by the view: hidden link

August 24, 2018 at 7:17 pm #1091425

Shane

Supporter

Languages: English (English )

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

Hi Domenico,

I checked on the post and there were no images on the post to be displayed.
hidden link

Thanks,
Shane

August 24, 2018 at 10:45 pm #1091491

domenicoS

Because was a draft.
This post has images gallery. You can try on this.
However when you set the gallery I remeber you have worked inly on view calling displaying in the layout with the relative code.

August 27, 2018 at 2:12 pm #1093050

Shane

Supporter

Languages: English (English )

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

Hi Domenico,

I'm not sure what really to do here because if the post has no images then the slider won't display.

If you added images to the repeatable fields on a post then the images should start displaying as a slider on the frontend.

Thanks,
Shane

August 27, 2018 at 6:52 pm #1093226

domenicoS

Hi Shane, i try to explain in a better way my problem.

This is the backend of the post: hidden link
and this is the layout which I'm using for this product: hidden link

As you can see I've updated many images but no slider is displayed in frontend. I see only the button next and previous.

To display the slider I've put the following code in the layout using view as you said me:

[wpv-view name="accommodation-gallery"]

August 27, 2018 at 7:36 pm #1093238

Shane

Supporter

Languages: English (English )

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

Hi Dominico,

The slider works now but it seems that there are other issues on the site that is causing the slide not to display correctly.

Possibly Custom CSS that is causing this issue with the slider not displaying correctly. If you have any custom css on your site could you temporarily remove it and check again.

Thanks,
Shane

August 27, 2018 at 11:54 pm #1093302

domenicoS

Hi Shane,

I try to remove CSS file.
It works for few minutes, but now it doesn't works.

I see that if I copy the view code in another draf post or page it works with the pictures of the product.
If I put it in the layout it tell me I've not images..but as you can see there are 5 images

August 28, 2018 at 10:02 am #1093773

Shane

Supporter

Languages: English (English )

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

Screen Shot 2018-08-28 at 4.58.38 AM.png

Screen Shot 2018-08-28 at 4.58.52 AM.png

Hi Domenico,

The main reason why this isn't working is because you're using the visual editor cell. With the visual editor cell you're not able to add the JS code that needed to get the slider to work.

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

What I did was to create a content template that i've added to the layout that will load the slider. See Screenshot.

If you need to add this slider to another layout, you can just add the content template that i've created. Remember adding the slider is a 2 part step.

The HTML structure is required and then the JS to load the slider is also required.

Please let me know if this clears up the issue for you a bit.

Thanks,
Shane

August 28, 2018 at 10:52 am #1093794

domenicoS

Ok Shane, it works in the accommoation page and in the Accommodation layout.
How can I do if I want to use the same in a product which use another layout.

I try to put the content in the other layput but it doesn't works.

I've to create a newone?

August 28, 2018 at 7:19 pm #1094081

Shane

Supporter

Languages: English (English )

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

Hi Domenico,

Remember that if the Post Type that the layout is displaying uses a different set of repeatable fields for the images then you will need to change the custom field names to match .

Thanks,
Shane

August 28, 2018 at 10:36 pm #1094135

domenicoS

Hi Shane,

I follow your instructions. I created the new content template directly in the layout of the product with the right slugs.
This is the result: hidden link

a slider of shortcodes.

I tried to change the theme but no success.

August 29, 2018 at 3:01 pm #1095051

Shane

Supporter

Languages: English (English )

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

Hi Domenico,

This is actually done correctly but it seems that the shortcode itself isn't rendering.

What I recommend that you do is to contact your host and ask them to increase the max_execution_time of your server so the scripts have more time to run.

Thanks,
Shane

1 2 →