[Resolved] Flexslider 2 Not Working Within Views

[Author]

Posts

[LiamH4958]

Hi,

Realise that Flexslider is not a Toolset "thing" but having a nightmare trying to get it to work with custom user fields and Views. Have followed the info from https://toolset.com/forums/topic/how-to-useinstall-flexslider-in-a-custom-post-type-with-multiple-images/ and as far as i can tell have done everything correct but it simply wont work.

So far I've done...

Used the Code Snippets pluging to add

function flexslider_method() {
    wp_enqueue_script(
        'flexslider-min',
        get_stylesheet_directory_uri() . '/js/jquery.flexslider-min.js',
        array( 'jquery' )
    );
    wp_enqueue_style( 'flexslider', get_stylesheet_directory_uri() . '/css/flexslider.css');
}
 
add_action( 'wp_enqueue_scripts', 'flexslider_method' );

This seems to ok as there are

<script type='text/javascript' src='<em><u>hidden link</u></em>;

<link rel='stylesheet' id='flexslider-css'  href='<em><u>hidden link</u></em>' type='text/css' media='all' />

showing in the page source and the files are in these locations.

The Views content template is

<div class="flexslider">
<ul class="slides">
[wpv-for-each usermeta="wpcf-rescue-gallery"]
<li>
[types usermeta="rescue-gallery"][/types]
</li>
[/wpv-for-each]
</ul>
</div>

and the JS for that content template is

jQuery(document).ready(function($) {
   $('.flexslider').flexslider({
    animation: "slide"
  });
});

The page is being generated and displays the images one after another but the slider doesn't seem to be generated. The only thing I've noticed is the HTML seems to be a bit messed up as all the images are within a single LI tag and not separate ones...

<div class="flexslider"> 
<ul class="slides"> 
<li>
 <img alt=""  src="<em><u>hidden link</u></em>" />
<img alt=""  src="<em><u>hidden link</u></em>" />
<img alt=""  src="<em><u>hidden link</u></em>" />
<img alt=""  src="<em><u>hidden link</u></em>" />
<img alt=""  src="<em><u>hidden link</u></em>" />
<img alt=""  src="<em><u>hidden link</u></em>" /> 
</li> 
</ul> 
</div>

Ignore the image names - using random ones via google to test things lol

Any help would be great - pretty sure its something simple but just cant work it out.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Liam,

Thank you for contacting our support forum.

Would you mind providing me with a link to the page so that I can have a look ?

There could be an error on the page causing this.

Thanks,
Shane

[LiamH4958]

Hi Shane,

The site is hosted locally so not sure how to link to it. I've done some digging on a fresh head and If i create a list of images manually it works as expected so the script and css are all ok at least.

The problem is being caused by [wpv-for-each] putting all the images within one LI tag rather than separating them, not sure why this is happening though as either of the content templates below should open and close the tags correctly?

<div class="flexslider">
<ul class="slides">
[wpv-for-each usermeta="wpcf-rescue-gallery"]
<li>
[types usermeta="rescue-gallery"][/types]
</li>
[/wpv-for-each]
</ul>
</div>

<div class="flexslider">
<ul class="slides">
[wpv-for-each usermeta="wpcf-rescue-gallery"]
<li>
[types usermeta="rescue-gallery"][/types]
[/wpv-for-each]
</li>
</ul>
</div>

I've also got it working with this code by using the LI tag as a custom separator

<div class="flexslider">
<ul class="slides">
<li>
[types usermeta='rescue-gallery' alt='%%ALT%%' title='%%TITLE%%' size='medium' align='none' resize='proportional' separator='<li>'][/types]
</ul>
</div>

Are there likely to be any issues generating the list of images this way rather than using [wpv-for-each]?

Thanks again 🙂

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Liam,

Its a bit difficult to debug without seeing the site.

Would you be able to provide a duplicator package of it so that I can set it up on my localhost to check on the issue as well ?

TO provide the duplicator please follow the instructions in the link below
https://toolset.com/faq/provide-supporters-copy-site/

Thanks,
Shane

[LiamH4958]

Hi Shane,

Have used the link provided to create the duplicate - is there anyway of sending the link over without making it public?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Lliam,

I've enabled the private fields.

Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Lliam,

I was able to successfully setup the duplicator package.

Could you let me know an example page where I can see the view or the layout where the view is setup.

Thanks,
Shane

[LiamH4958]

Hi Shane,

Cheer for that, the "user profile" page with the flexslider is at

/view-profile/?users-filter=2

and the view that loads the images for the slider is called "Rescue Profile - Flexslider Gallery" - the layout for the page is "View Rescue Profile"

At the moment the flexslider is working with the

 [types usermeta='rescue-gallery' alt='%%ALT%%' title='%%TITLE%%' size='medium' align='none' resize='proportional' separator='<li>'][/types] 

but as I say the "recommend" / shown in example way of using [wpv-for-each] doesnt as the code is generated without the require li tags - the script and css are working its just a case of the [wpv-for-each] loop not outputting the expected code.

Thanks again 🙂

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Lliam,

Actually how you have it is the correct way because it is going to loop through the individual fields because you are using a view.

If you were to do this with just a content template you will need to use the wpv-foreach , I see that its repeating the groups because its added to a view.

Thanks,
Shane

[LiamH4958]

Hi Shane,

Thanks for looking at it and sorry for taking up time on something that turned out not to be an issue at all... It threw me slightly as using wpv-foreach also fetched the correct images, I still need to use the flexslider for some custom posts but will give wpv-foreach a go first.

Cheers
Liam