To enable the legacy view:
- https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/
Create a slider from repeating image custom fields
Views lets you create sliders that transition between posts, but what if you want to create a slider that rotates the images added as custom fields to an individual post?
The key is to generate markup consistent with what is expected by your chosen slider library, and the principles are the same for most sliders. Here we use the FlexSlider 2 library from WooThemes.
Our solution needs to generate markup that matches the following format:
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
</ul>
</div>
Steps you need to follow:
1. Enqueue the slider library JS and CSS files
Add the following to your theme's functions.php file (or using a plugin such as Code Snippets)
function ts_enqueue_flexslider(){
if ( !is_admin() ) {
wp_enqueue_script( 'flexslider-js', '<em><u>hidden link</u></em>', array( 'jquery' ), '1.0' );
wp_enqueue_style( 'flexslider-css', '<em><u>hidden link</u></em>', array(), '1.0' );
}
}
add_action( 'wp_enqueue_scripts', 'ts_enqueue_flexslider' );
2. Generate the required markup in your template
Add the following to your Content Template (or to a Visual Editor cell in a Template Layout), editing the name of the image custom field as required (wpcf-slides & slides)
<div class="flexslider">
<ul class="slides">
[wpv-for-each field="wpcf-slides"]
<li>
[types field='slides' alt='%%ALT%%' title='%%TITLE%%' size='large' align='none' resize='proportional' separator=', '][/types]
</li>
[/wpv-for-each]
</ul>
</div>
3. Initialise the slider
Add the following JS to the custom JS section of your Content Template or view:
( function( $ ) {
$( document ).ready( function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
})( jQuery );
Notes
We enqueue the flexslider library on all front-end pages. You may want to add checks to only enqueue it for specific pages or templates.
The flexslider library includes many options that you can set in the third step, see the flexslider documentation for details.
