Flexslider Admin

Contributors: emrikol
Tags: flexslider, slides, wp-admin, developer
Donate link: http://wordpressfoundation.org/donate/
Requires at least: 4.8.2
Tested up to: 4.8.2
Requires PHP: 7.0 Stable tag: trunk
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Provides a simple administrative interface to manage slides for Flexslider.

Description

Flexslider is a very powerful jQuery slider toolkit. While there are plugins that can provide a robust interface to manage slides, I needed something a lot simpler. Some code borrowed from Meteor Slides :D

This plugin WILL NOT:

• Enqueue Flexslider JS/CSS in your theme.
• Generate HTML markup automatically.
• Manage complex Flexslider layouts and settings.

Installation

This plugin is for developers only, and will require developer work to integrate it into a theme.

There are three filters that should be added:

• flexslider_admin_slide_width => The largest width of a slide, used for size display.
• flexslider_admin_slide_height => The largest height of a slide, used for size display.
• flexslider_admin_thumbnail_size => The size of the thumbnails to show in the admin interface.

One example of how to set up the plugin:

if ( class_exists( 'Flexslider_Admin' ) ) {
    $sizes = array(
        array(
            'name'   => 'slides',
            'width'  => 750,
            'height' => 422,
            'crop'   => true,
        ),
        array(
            'name'   => 'slides-thumbnail',
            'width'  => '150',
            'height' => '84',
            'crop'   => true,
        ),
    );

    Flexslider_Admin_Views::add_sizes( $sizes );
    add_filter( 'flexslider_admin_slide_width', function( $width ) {
        return 750;
    } );
    add_filter( 'flexslider_admin_slide_height', function( $height ) {
        return 422;
    } );

    add_filter( 'flexslider_admin_thumbnail_size', function ( $size ) {
        return 'slides-thumbnail';
    } );
}

$flexslider_vars = array(
    'data' => array(
        'animation'      => get_theme_mod( 'fsa-slides_animation', 'fade' ),
        'easing'         => get_theme_mod( 'fsa-slides_easing', 'swing' ),
        'direction'      => get_theme_mod( 'fsa-slides_direction', 'horizontal' ),
        'slideshowSpeed' => ( get_theme_mod( 'fsa-slides_speed' ) ? get_theme_mod( 'fsa-slides_speed' ) : 7 ) * 1000,
        'animationSpeed' => ( get_theme_mod( 'fsa-slides_animation_speed' ) ? get_theme_mod( 'fsa-slides_animation_speed' ) : .6 ) * 1000,
        'initDelay'      => ( get_theme_mod( 'fsa-slides_start_delay' ) ? get_theme_mod( 'fsa-slides_start_delay' ) : 0 ) * 1000,
        'reverse'        => get_theme_mod( 'fsa-slides_reverse' ) ? get_theme_mod( 'fsa-slides_reverse' ) : false,
        'pauseOnAction'  => get_theme_mod( 'fsa-slides_pause_interaction' ) ? get_theme_mod( 'fsa-slides_pause_interaction' ) : false,
        'pauseOnHover'   => get_theme_mod( 'fsa-slides_pause_hover' ) ? get_theme_mod( 'fsa-slides_pause_hover' ) : true,
    ),
);

$flexslider_inline = <<
jQuery( window ).load( function() {
    jQuery( '.flexslider' ).flexslider( {
        animation: flexslider_admin.data.animation,
        easing: flexslider_admin.data.easing,
        direction: flexslider_admin.data.direction,
        slideshowSpeed: flexslider_admin.data.slideshowSpeed,
        animationSpeed: flexslider_admin.data.animationSpeed,
        initDelay: flexslider_admin.data.initDelay,
        reverse: flexslider_admin.data.reverse,
        pauseOnAction: flexslider_admin.data.pauseOnAction,
        pauseOnHover: flexslider_admin.data.pauseOnHover,
    } );
} );
EOT;

wp_enqueue_style( 'flexslider', get_stylesheet_directory_uri() . '/flexslider/flexslider.css' );
wp_enqueue_script( 'flexslider', get_stylesheet_directory_uri() . '/flexslider/jquery.flexslider.js', array( 'jquery' ) );
wp_add_inline_script( 'flexslider', $flexslider_inline );
wp_localize_script( 'flexslider', 'flexslider_admin', $flexslider_vars );